@import"https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap";.card{width:100%;min-width:255px;border-radius:15px;overflow:hidden}.card__cosmetic{position:relative;margin-bottom:-1.5em;width:100%;height:60px;overflow:hidden;z-index:-2}.card__icon{position:absolute;top:-.5em;right:10%}.card__work{background-color:#ff8c66}.card__exercise{background-color:#4acf81}.card__play{background-color:#56c2e6}.card__self-care{background-color:#f1c65b}.card__social{background-color:#7536d3}.card__study{background-color:#ff5c7c}.card__content{padding:3.2rem;color:#fff;background-color:#1c1f4a;border-radius:15px;transition:background-color .3s,scale .3s}.card__content:hover{scale:1.02;background-color:#323878}.card__title-group{justify-content:space-between;align-items:center}.card__title{font-size:1.8rem;font-weight:500;line-height:21px}.card__dots{width:24px;height:100%;padding:.25em;transition:width .25s}.card__dots:hover{width:25px}.card__time-box{display:flex;align-items:center;justify-content:space-between;padding:2.4rem 0 .8rem}.card__time{font-size:3.2rem;font-weight:300;line-height:38px}.card__last-time{font-size:1.5rem;font-weight:400;line-height:18px;color:#bdc1ff}@media (width > 600px){.card__time-box{flex-direction:column;align-items:flex-start;gap:.8em}.card__time{font-size:5.6rem;font-weight:300;line-height:66px}}.container{display:grid;padding-block:8.1em;padding-inline:2.4em;grid-auto-columns:auto;gap:2.4em;height:100%}@media (width > 600px){.container{grid-template-columns:repeat(2,auto);grid-template-rows:repeat(2,1fr)}}@media (width > 900px){.container{grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr)}}@media (width > 1200px){.container{grid-template-columns:repeat(4,255px);grid-template-rows:repeat(2,1fr)}}.user-card{display:flex;flex-direction:column;border-radius:15px;overflow:hidden}.user-card__info{display:flex;align-items:center;gap:2.4em;padding:3.2rem;background-color:#5847eb;border-radius:15px;z-index:2}.user-card__image-box{height:64px}.user-card__image{height:100%;border:5px solid #fff;border-radius:50%}.user-card__report-text{font-size:1.5rem;font-weight:400;line-height:18px;color:#bdc1ff}.user-card__report-for{font-size:2.4rem;font-weight:300;line-height:28px;color:#fff}.user-card__timeframe-box{margin-top:-3.5em;padding-block:6em 2.5em;background-color:#1c1f4a;border-radius:15px}.user-card__timeframes{display:flex;justify-content:space-evenly;flex-direction:row}@media (width > 600px){.user-card{grid-column:1/-1;grid-row:1/1}}@media (width > 1200px){.user-card{grid-column:1/1;grid-row:1/-1}.user-card__info{flex-direction:column;align-items:flex-start;height:100%}.user-card__report-for{font-size:4rem;font-weight:300;line-height:47px}.user-card__image-box{height:78px}.user-card__timeframe-box{margin-top:-3.5em;padding-block:3.5em 0}.user-card__timeframes{flex-direction:column;gap:2.1em;padding:3.2em}}li{list-style:none}button{font-size:1.8rem;font-weight:500;line-height:21px;padding-inline:.75em;color:#6f76c8;background:none;font-weight:400;transition:color .3s,opacity .3s}button:hover,button:focus{opacity:.7}.active{color:#fff}body{font-family:Rubik,sans-serif;font-weight:400;letter-spacing:0}*,*:after,*:before{box-sizing:border-box;margin:0;padding:0}html,body{height:100%}html{font-size:62.5%;scroll-behavior:smooth}a{text-decoration:none}img{height:auto}input,button,textarea,select{font-family:inherit}button{border:none;cursor:pointer}textarea{resize:vertical}table{border-collapse:collapse;border-spacing:0}.row{display:flex;flex-direction:row}.column{display:flex;flex-direction:column}body{background-color:#0f1424}@media (width > 900px){body{display:flex;justify-content:center;align-items:center;height:100vh}}