@import"https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap";:root{--primary-blue: hsl(246, 80%, 60%);--primary-light-red-work: hsl(15, 100%, 70%);--primary-soft-blue-play: hsl(195, 74%, 62%);--primary-light-red-study: hsl(348, 100%, 68%);--primary-lime-green-exercise: hsl(145, 58%, 55%);--primary-violet-social: hsl(264, 64%, 52%);--primary-soft-orange-self-care: hsl(43, 84%, 65%);--neutral-very-dark-blue: hsl(226, 43%, 10%);--neutral-dark-blue: hsl(235, 46%, 20%);--neutral-desaturated-blue: hsl(235, 45%, 61%);--neutral-pale-blue: hsl(236, 100%, 87%)}*{box-sizing:border-box;margin:0;padding:0}html{font-size:10px}body{font-family:Rubik,sans-serif;background-color:var(--neutral-very-dark-blue);color:#fff}p{font-size:1.8rem}.outer-container{display:flex;min-height:100vh;justify-content:center;align-items:center;position:relative;width:100%}.inner-container{width:100%;max-width:1110px;display:grid;grid-template-columns:1fr 3fr;grid-template-rows:repeat(auto-fit,244px);min-height:520px;gap:3rem;justify-content:center}@media (width <= 1141px){.card-wrapper{grid-template-columns:repeat(2,1fr);gap:0}.inner-container{width:80%;margin:0 auto}}@media (width <= 830px){.inner-container{grid-template-columns:1fr;grid-template-rows:1fr;margin-block:8rem}}.card-wrapper{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:auto;gap:3rem;transition:all .3s ease-in-out}.card{position:relative;border-radius:1.6rem 1.6rem 2rem 2rem;z-index:-2;height:244px;width:255px;transition:all .3s ease-in-out}.card-icon{position:absolute;top:0;right:1.7rem;z-index:-1}.card.work{background-color:var(--primary-light-red-work)}.card.play{background-color:var(--primary-soft-blue-play)}.card.study{background-color:var(--primary-light-red-study)}.card.exercise{background-color:var(--primary-lime-green-exercise)}.card.social{background-color:var(--primary-violet-social)}.card.self-care{background-color:var(--primary-soft-orange-self-care)}.card-inner-container{background-color:var(--neutral-dark-blue);z-index:5;padding:2.88rem 3.04rem;border-radius:1.6rem;height:199px;width:100%;position:absolute;bottom:0;transition:all .3s ease-in-out}.title-dots-container{display:flex;justify-content:space-between;align-items:center}.title{font-weight:400}.current-prev-container{display:flex;flex-direction:column;gap:.8rem;transition:all .3s ease-in-out}.current-hrs{font-weight:300;font-size:5.57rem;margin-top:2.3rem;transition:all .3s ease-in-out}.prev-hrs{color:var(--neutral-pale-blue);font-size:1.5rem;font-weight:300}@media (width <= 1141px){.card-wrapper{grid-template-columns:repeat(2,1fr)}}@media (width <= 588px){.card-wrapper{grid-template-columns:1fr}.card{width:100%;height:162px}.card-inner-container{height:132px}.current-prev-container{flex-direction:row;justify-content:space-between;align-items:center;margin-top:3rem;gap:0}.current-hrs{margin-top:0;font-size:3rem}}.header-wrapper{height:518px;grid-row:span 2;background-color:var(--neutral-dark-blue);border-radius:1.6rem;width:100%;transition:all .3s ease-in-out}.profile-text-container{display:flex;flex-direction:column;width:100%;height:354px;background-color:var(--primary-blue);padding:3.76rem 3.2rem 0;border-radius:1.6rem;transition:all .3s ease-in-out}.profile-pic{width:78px;height:78px;border:3px solid white;border-radius:50%;margin-bottom:3.76rem;transition:all .3s ease-in-out}.report-text{font-weight:300;color:var(--neutral-pale-blue);margin-bottom:.24rem;font-size:1.52rem}.header-title{font-size:4rem;font-weight:300}.fields-container{display:flex;flex-direction:column;gap:1.92rem;padding:2.8rem 2.9rem 3.2rem 3.2rem;transition:all .3s ease-in-out}input[type=radio]{-webkit-appearance:none;-moz-appearance:none;appearance:none}label{color:var(--neutral-desaturated-blue);font-size:1.8rem;font-weight:300;cursor:pointer;transition:all .3s ease-in-out}label:hover{color:#fff}input[type=radio]:checked+label{color:#fff}@media (width <= 830px){.header-wrapper{height:250px}.profile-text-container{flex-direction:row;justify-content:space-between;height:150px}.fields-container{flex-direction:row;justify-content:space-between}}@media (width <= 588px){.header-title{font-size:2rem;font-weight:500}.profile-pic{width:60px;height:60px}}