:root{--Orange-300: #ff8b64;--Blue-300: #55c2e6;--Pink-400: #ff5e7d;--Green-400: #4bcf82;--Purple-700: #7335d2;--Purple-600: #5747ea;--Purple-500: #7078c9;--Yellow-300: #f1c75b;--Navy-950: #0e1323;--Navy-900: #1c204b;--Navy-800: #33397a;--Navy-200: #bbc0ff;--white: #ffffff;--black: #000000;--grey: #d8d8d8;--rubik-light-1: 300 3.5rem/4.125rem "Rubik", sans-serif;--rubik-light-2: 300 2.5rem/2.9375rem "Rubik", sans-serif;--rubik-light-3: 300 2rem/2.375rem "Rubik", sans-serif;--rubik-light-4: 300 1.5rem/1.75rem "Rubik", sans-serif;--rubik-regular-5: 400 1.125rem/1.3125rem "Rubik", sans-serif;--rubik-medium-5: 500 1.125rem/1.3125rem "Rubik", sans-serif;--rubik-regular-6: 400 .9375rem/1.125rem "Rubik", sans-serif}*{margin:0;padding:0;box-sizing:border-box}body{display:flex;flex-direction:column;justify-content:center;align-items:center;min-height:100vh;background-color:var(--Navy-950)}.main{width:20.4375rem;display:flex;flex-direction:column;gap:1.5rem}.cont-user{width:20.4375rem;height:12.6875rem;border-radius:.9375rem;background-color:var(--Navy-900)}.cont-perfil{display:flex;flex-direction:column;gap:1.5rem;height:auto}.perfil{height:8.3125rem;padding:2rem;background-color:var(--Purple-600);border-radius:.9375rem}.user-info{display:flex;gap:1.5rem;width:16rem;height:4rem}.user-info img{border-radius:50%;border:.1875rem solid var(--white)}figcaption p{width:10f6875rem}h1{font:var(--rubik-regular-6);color:var(--Navy-200)}.user{font:var(--rubik-light-4);color:var(--white);margin-block-start:.5rem}.timeframe-selector{display:flex;list-style-type:none}.timeframe-selector li{width:6.8125rem;text-align:center}.time{font:var(--rubik-regular-5);color:var(--Purple-500)}.timeframe-selector .time.active{color:#fff}.cont-work,.cont-play,.cont-study,.cont-exer,.cont-social,.cont-self{display:flex;flex-direction:column;width:20.4375rem;height:10rem;border-radius:.9375rem;background-color:var(--Orange-300);justify-content:end;position:relative;overflow:hidden}.cont-play{background-color:var(--Blue-300)}.cont-study{background-color:var(--Pink-400)}.cont-exer{background-color:var(--Green-400)}.cont-social{background-color:var(--Purple-700)}.cont-self{background-color:var(--Yellow-300)}.cont-work:after,.cont-play:after,.cont-study:after,.cont-exer:after,.cont-social:after,.cont-self:after{content:"";position:absolute;background-image:url("data:image/svg+xml,%3csvg%20width='79'%20height='79'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='m18.687%2010.43%2015.464%2030.906c.31.682.743%201.322%201.3%201.88.558.557%201.198.99%201.714%201.217L68.237%2059.98%2052.484%2075.732a8.025%208.025%200%200%201-11.355%200L2.934%2037.538a8.025%208.025%200%200%201%200-11.356L18.687%2010.43Zm19.345-7.99%2010.839%2010.838%202.065-2.064a5.845%205.845%200%200%201%208.258%200l8.258%208.259a5.845%205.845%200%200%201%200%208.258l-2.064%202.064%2010.839%2010.84a8.025%208.025%200%200%201%200%2011.355l-4.728%204.728L39.126%2040.53a1.963%201.963%200%200%201-.578-.413%201.963%201.963%200%200%201-.413-.578L21.95%207.168l4.728-4.728a8.025%208.025%200%200%201%2011.355%200Zm17.033%2012.903-2.064%202.065%208.258%208.258%202.064-2.064-8.258-8.259Z'%20fill='%23D96C47'%20fill-rule='nonzero'/%3e%3c/svg%3e");background-size:cover;width:4.875rem;height:4.875rem;right:1.125rem;top:-.6819rem}.cont-play:after{background-image:url("data:image/svg+xml,%3csvg%20width='76'%20height='77'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='m60.91%2071.846%2012.314-19.892c3.317-5.36%203.78-13.818-2.31-19.908l-26.36-26.36c-4.457-4.457-12.586-6.843-19.908-2.31L4.753%2015.69c-5.4%203.343-6.275%2010.854-1.779%2015.35a7.773%207.773%200%200%200%207.346%202.035l7.783-1.945a3.947%203.947%200%200%201%203.731%201.033l22.602%2022.602c.97.97%201.367%202.4%201.033%203.732l-1.945%207.782a7.775%207.775%200%200%200%202.037%207.349c4.49%204.49%2012.003%203.624%2015.349-1.782Zm-24.227-46.12-1.891-1.892-1.892%201.892a2.342%202.342%200%200%201-3.312-3.312l1.892-1.892-1.892-1.891a2.342%202.342%200%200%201%203.312-3.312l1.892%201.891%201.891-1.891a2.342%202.342%200%200%201%203.312%203.312l-1.891%201.891%201.891%201.892a2.342%202.342%200%200%201-3.312%203.312Zm14.19%2014.19a2.343%202.343%200%201%201%203.315-3.312%202.343%202.343%200%200%201-3.314%203.312Zm0%207.096a2.343%202.343%200%200%201%203.313-3.312%202.343%202.343%200%200%201-3.312%203.312Zm7.096-7.095a2.343%202.343%200%201%201%203.312%200%202.343%202.343%200%200%201-3.312%200Zm0%207.095a2.343%202.343%200%200%201%203.312-3.312%202.343%202.343%200%200%201-3.312%203.312Z'%20fill='%233F9CBB'%20fill-rule='nonzero'/%3e%3c/svg%3e");width:5.625rem;height:5.625rem}.cont-study:after{background-image:url("data:image/svg+xml,%3csvg%20width='79'%20height='79'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M33.227%201.495a1.87%201.87%200%200%201%202.646%200l1.323%201.323-27.78%2027.78c-2.189%202.189-2.1%205.837.088%208.026l12.132%2012.132a5.624%205.624%200%200%200%201.096%206.388%205.624%205.624%200%200%200%206.389%201.097l12.132%2012.132c2.188%202.188%205.837%202.276%208.025.088l27.78-27.78%201.323%201.322a1.87%201.87%200%200%201%200%202.646L46.632%2078.4a1.87%201.87%200%200%201-2.645%200L29.12%2063.531a5.624%205.624%200%200%201-6.389-1.097l-5.291-5.291a5.624%205.624%200%200%201-1.097-6.388L1.478%2035.89a1.87%201.87%200%200%201%200-2.646ZM59.74%2022.783c1.948.27%203.83%201.117%205.325%202.612l10.583%2010.583a1.87%201.87%200%200%201%200%202.646L46.544%2067.727a1.87%201.87%200%200%201-2.646%200L30.67%2054.498a1.872%201.872%200%200%200-2.646%200ZM49.19%206.875a1.87%201.87%200%200%201%202.647%200c4.489%204.489%205.877%208.98%206.178%2012.342L27.67%2049.56c.349-1.527%201.181-7.463-4.938-13.582a1.87%201.87%200%200%201%200-2.646Zm-7.936-2.646a1.87%201.87%200%200%201%202.645%200l1.323%201.323-25.134%2025.134a5.619%205.619%200%200%200%200%207.938c4.005%204.005%204.2%207.696%204.043%209.335L12.15%2035.978a1.87%201.87%200%200%201%200-2.646Z'%20fill='%23F04667'%20fill-rule='nonzero'/%3e%3c/svg%3e")}.cont-exer:after{background-image:url("data:image/svg+xml,%3csvg%20width='81'%20height='55'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='m33.357.579%2016.447.426c.33.009.645.144.88.38l9.953%209.953a4.946%204.946%200%200%201%201.451%203.311l.514%2012.87c.02.503.433.895.937.894l9.595-.05a4.438%204.438%200%200%201%204.437%204.43v.26c0%201.164-.453%202.259-1.277%203.082a4.334%204.334%200%200%201-3.083%201.277h-15.77c-2.347%200-4.393-2.045-4.393-4.393l-.001-8.405-12.05-.009.01%2015.17c.001.426-.21.826-.56%201.067l-18.098%2012.41c-1.363.849-2.958%201.033-4.426.537a5.147%205.147%200%200%201-1.994-1.237%205.247%205.247%200%200%201-1.193-1.85c-.875-2.293.074-4.934%202.256-6.277l12.303-8.973.252-11.28-13.556.442a1.291%201.291%200%200%201-.957-.377L2.237%2011.439c-1-.999-1.55-2.38-1.513-3.792a5.124%205.124%200%200%201%201.714-3.71c2.042-1.84%205.234-1.688%207.267.345l8.576%208.576%2029.444-1.635-2.133-2.133-12.263.347a4.434%204.434%200%200%201-3.294-1.28l-.016-.015a4.409%204.409%200%200%201-1.294-3.307c.08-2.347%202.16-4.255%204.632-4.256Zm33.78%2011.774c3.025-3.025%207.945-3.025%2010.97%200%203.024%203.025%203.024%207.944%200%2010.97-3.025%203.024-7.945%203.024-10.97%200-3.024-3.026-3.025-7.945%200-10.97Z'%20fill='%2329BA66'%20fill-rule='nonzero'/%3e%3c/svg%3e");width:4.9781rem;height:3.3425rem}.cont-social:after{background-image:url("data:image/svg+xml,%3csvg%20width='75'%20height='100'%20xmlns='http://www.w3.org/2000/svg'%3e%3cg%20fill='%235A1CBB'%20fill-rule='nonzero'%3e%3cpath%20d='M45.834%2046.627c4.78%204.78%2013.1%205.754%2019.257-.403%205.2-5.199%205.198-13.657%200-18.855L47.151%209.428C42.335%204.614%2034.02%203.7%2027.892%209.83c-4.701%204.7-5.151%2012.066-1.352%2017.277l-6.265%206.265c-1.339%201.339-.317%203.644%201.585%203.533l13.474-.777%2010.499%2010.499Zm11.404-11.483a2.567%202.567%200%201%201-3.629%203.631%202.567%202.567%200%200%201%203.63-3.631ZM35.745%2020.909a2.567%202.567%200%201%201%203.63-3.629%202.567%202.567%200%200%201-3.63%203.63Zm12.562%205.303a2.567%202.567%200%201%201-3.63%203.63%202.567%202.567%200%200%201%203.63-3.63ZM55.16%2063.698%2037.219%2045.756c-5.198-5.197-13.658-5.197-18.857.001-6.072%206.073-5.26%2014.4-.402%2019.258l10.499%2010.5-.777%2013.473c-.11%201.886%202.186%202.931%203.533%201.584l6.265-6.265c5.212%203.8%2012.577%203.349%2017.277-1.352%206.06-6.059%205.274-14.386.403-19.257ZM25.813%2057.24a2.567%202.567%200%201%201%203.63-3.631%202.567%202.567%200%200%201-3.63%203.63Zm8.932%208.931a2.567%202.567%200%201%201%203.63-3.629%202.567%202.567%200%200%201-3.63%203.63Zm8.932%208.933a2.567%202.567%200%201%201%203.63-3.631%202.567%202.567%200%200%201-3.63%203.63Z'/%3e%3c/g%3e%3c/svg%3e");width:4.6rem;height:6.25rem}.cont-self:after{background-image:url("data:image/svg+xml,%3csvg%20width='67'%20height='67'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M.918%2050.848c.114%201.723.232%203.5.346%205.336l.003.038.448%206.038c.06.81.412%201.536.951%202.075.54.54%201.266.892%202.075.952l6.038.447.038.003c12.086.755%2021.237%201.231%2028.95.484%209.007-.873%2015.369-3.445%2020.02-8.096%208.413-8.413%208.398-21.609-.034-30.041-3.79-3.79-8.959-6.11-14.31-6.526-.415-5.352-2.736-10.52-6.526-14.31C30.484-1.185%2017.288-1.2%208.875%207.214-1.295%2017.384-.415%2030.697.918%2050.848ZM21.36%2027.122l6.172%206.173%206.16-6.159%206.172%206.173-6.16%206.158%206.173%206.173-6.158%206.158-6.173-6.172-6.158%206.158-6.173-6.172%206.159-6.159-6.173-6.172%206.16-6.159Z'%20fill='%23E6A532'%20fill-rule='nonzero'/%3e%3c/svg%3e");width:4.5rem;height:4.125rem}.cont-stats{height:7.625rem;border-radius:.9375rem;padding:1.5rem;z-index:1;background-color:var(--Navy-900)}.stats{height:4.1875rem;display:flex;flex-direction:column;gap:.5rem;overflow:hidden}.activity-header{height:1.3125rem;display:flex;justify-content:space-between;align-items:center}.activity{font:var(--rubik-medium-5);color:var(--white)}.hr-act{font:var(--rubik-light-3);color:var(--white)}.hr-prev{font:var(--rubik-regular-6);color:var(--Navy-200)}.actibity-stats{height:2.375rem;display:flex;justify-content:space-between;align-items:center}@media(min-width:47.5rem){.main{display:grid;grid-template-columns:repeat(3,11.75rem);width:auto;height:auto}.cont-user{grid-column:1 / 4;width:38.25rem;height:12.875rem}.timeframe-selector{justify-content:center;gap:.5rem}.cont-work,.cont-play,.cont-study,.cont-exer,.cont-social,.cont-self{width:auto;height:13.3125rem}.cont-stats{width:11.75rem;height:180px}.stats{height:8.0625rem;gap:1rem}.actibity-stats{height:5.75rem;flex-direction:column;align-items:start;gap:.5rem}.hr-act{font:var(--rubik-light-1);color:var(--white)}}@media(min-width:87.5rem){.main{grid-template-columns:repeat(4,15.9375rem);gap:2rem;width:69.75rem;height:32.5rem}.cont-user{grid-row:1 / span 2;width:15.9375rem;height:auto}.cont-perfil{gap:0}.perfil{height:22.125rem}.user-info{flex-direction:column;width:8.625rem;height:14.375rem;gap:2.5rem}.user-info img{width:4.875rem}.user{font:var(--rubik-light-2);margin-block-start:0}.cont-work,.cont-play,.cont-study,.cont-exer,.cont-social,.cont-self{width:auto;height:15.25rem}.cont-stats{width:15.9375rem;height:12.4375rem}.timeframe-selector{flex-direction:column;gap:1.2188rem;padding:2rem}.timeframe-selector li{text-align:start}.cont-work{grid-column:2;grid-row:1}.cont-play{grid-column:3;grid-row:1}.cont-exer{grid-column:2;grid-row:2}.cont-social{grid-column:3;grid-row:2}.cont-self{grid-column:4;grid-row:2}}.attribution-list{display:flex;margin-block-start:.625rem;font:var(--rubik-medium-5);font-size:clamp(.69rem,.75vw + .5rem,.88rem);color:var(--white);list-style:none;gap:1.25rem}.attribution-list li:before{margin-left:-2.5rem}.attribution-list a{color:var(--Yellow-300);text-decoration:none}