@import "https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;500&display=swap";:root{--purple-600:#5847eb;--orange-300:#ff8c66;--blue-300:#56c2e6;--pink-400:#ff5c7c;--green-400:#4acf81;--purple-700:#7536d3;--yellow-300:#f1c65b;--navy-950:#0f1424;--navy-900:#1c1f4a;--purple-500:#6f76c8;--navy-200:#bdc1ff;--font-family:"Rubik", sans-serif;--font-size-body:18px}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--navy-950);color:#fff;height:100vh;font-family:var(--font-family);font-size:var(--font-size-body);text-align:left;flex-direction:column;justify-content:center;align-items:center;display:flex}.container{justify-content:center;align-items:center;gap:20px;width:52%;min-width:750px;height:42%;min-height:350px;display:flex}.container-name{background-color:var(--purple-600);border-radius:15px;flex-direction:column;justify-content:flex-start;width:22%;height:100%;display:flex;position:relative;overflow:hidden}.user-info{background-color:var(--purple-600);border-radius:5px;flex-direction:column;justify-content:flex-start;gap:10px;height:68%;padding:30px 25px 0;display:flex}.user-info img{border:3px solid #fff;border-radius:50%;width:70px;height:70px;margin-bottom:20px}.report-for{color:var(--navy-200);font-size:14px}.name{font-size:36px;font-weight:300;line-height:1.2}.timeframe{background-color:var(--navy-900);border-radius:15px;flex-direction:column;justify-content:center;align-items:flex-start;gap:15px;height:32%;padding:25px 30px;display:flex}.timeframe p{color:var(--purple-500);font-size:16px;transition:color .3s}.timeframe p:hover,.timeframe p.active{color:#fff;cursor:pointer}.container-activities{grid-template-rows:repeat(2,1fr);grid-template-columns:repeat(3,1fr);gap:20px;width:80%;height:100%;display:grid}.activity-card{border-radius:15px 15px 60px 60px;flex-direction:column;place-content:flex-end;height:100%;display:flex}.activity{background-color:var(--navy-900);border-radius:15px;width:100%;height:80%;padding:10px 0 0 25px}.activity:hover{background-color:var(--purple-500);cursor:pointer}.activity-header{background-image:url("data:image/svg+xml,%3csvg%20width='21'%20height='5'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M2.5%200a2.5%202.5%200%201%201%200%205%202.5%202.5%200%200%201%200-5Zm8%200a2.5%202.5%200%201%201%200%205%202.5%202.5%200%200%201%200-5Zm8%200a2.5%202.5%200%201%201%200%205%202.5%202.5%200%200%201%200-5Z'%20fill='%23BBC0FF'%20fill-rule='evenodd'/%3e%3c/svg%3e");background-position:right 30px top 20px;background-repeat:no-repeat;width:100%;padding:15px 0 5px;font-size:17px;font-weight:500}.activity-stats{flex-direction:column;gap:10px;display:flex}.activity-time{padding-top:10px;font-size:40px;font-weight:300}.activity-previous{color:var(--navy-200);font-size:12px}.work{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-position:right 10px top;background-repeat:no-repeat;background-size:60px;background-color:var(--orange-300)}.play{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");background-position:right 10px top;background-repeat:no-repeat;background-color:var(--blue-300)}.study{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");background-position:right 10px top;background-repeat:no-repeat;background-color:var(--pink-400)}.exercise{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");background-position:right 10px top;background-repeat:no-repeat;background-color:var(--green-400)}.social{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");background-position:right 10px top;background-repeat:no-repeat;background-color:var(--purple-700)}.self-care{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");background-position:right 10px top;background-repeat:no-repeat;background-color:var(--yellow-300)}@media (width<=760px){body{height:auto;min-height:100vh;padding:50px 0}.container{flex-direction:column;gap:30px;width:80%;min-width:0;max-width:280px;height:auto;min-height:0;padding-top:20px}.container-name{width:100%;height:auto}.user-info{flex-direction:row;justify-content:center;align-items:center;gap:20px;height:auto;padding:30px}.user-info img{width:65px;height:65px;margin-bottom:0}.name{font-size:24px}.timeframe{flex-direction:row;justify-content:space-between;height:auto;padding:25px 30px}.container-activities{flex-direction:column;gap:25px;width:100%;height:auto;display:flex}.activity-card{width:100%;height:140px}.activity{height:80%}.activity-stats{flex-direction:row;justify-content:space-between;align-items:center;padding-right:30px}.activity-time{padding-top:4px;font-size:32px}}