*,*:before,*:after{margin:0;padding:0;font:inherit;box-sizing:border-box}:root{--blue: hsl(246, 80%, 60%);--light-orange: hsl(15, 100%, 70%);--soft-blue: hsl(195, 74%, 62%);--light-red: hsl(348, 100%, 68%);--lime-green: hsl(145, 58%, 55%);--violet: hsl(264, 64%, 52%);--soft-orange: hsl(43, 84%, 65%);--very-dark-blue: hsl(226, 43%, 10%);--dark-blue: hsl(235, 46%, 20%);--desaturated-blue: hsl(235, 45%, 61%);--pale-blue: hsl(236, 100%, 87%);--corner-radius: 18px}html,body{height:100%}body{color:#fff;background-color:var(--very-dark-blue);font:400 1rem/1 Rubik,sans-serif;-webkit-font-smoothing:antialiased}img,picture,video,canvas,svg{display:block;max-width:100%}button{appearance:none;border:none;background-color:transparent}p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word}#root{isolation:isolate;min-height:100%}.wrapper{--gap: 1.5rem;display:grid;gap:var(--gap);align-content:center;max-inline-size:65rem;margin-inline:auto;padding:2rem 1.25rem}@media (min-width: 1024px){.wrapper{grid-template-columns:1fr 2fr}}@media (min-width: 1280px){.wrapper{grid-template-columns:1fr 3fr}}.sidebar{display:flex;flex-direction:column;background-color:var(--dark-blue);border-radius:var(--corner-radius)}.user__info{flex:1;display:flex;gap:1.25rem;align-items:center;padding:1.75rem;background-color:var(--blue);border-radius:var(--corner-radius)}@media (min-width: 1024px){.user__info{gap:2rem;flex-direction:column;align-items:flex-start}}.user__img{width:70px;border:3px solid white;border-radius:50%}@media (min-width: 1024px){.user__img{width:85px}}.user__name{font-size:1.25rem;line-height:1.2;font-weight:300}.user__name .name-break{display:none}@media (min-width: 1024px){.user__name{font-size:2.35rem}.user__name .name-break{display:inline-block}}.user__name span{display:inline-block;font-size:.875rem;font-weight:400;color:var(--pale-blue)}@media (min-width: 1024px){.user__name span{font-size:1rem;margin-block-end:.5rem}}.filter-list{padding:1.5rem;list-style:none;display:flex;gap:3rem;align-items:center;justify-content:center}@media (min-width: 1024px){.filter-list{gap:1.125rem;padding:2rem;flex-direction:column;align-items:flex-start}}.filter-list__btn{font-size:1.125rem;color:var(--pale-blue);cursor:pointer;transition:color .3s ease-in-out}.filter-list__btn[aria-pressed=true],.filter-list__btn:hover{color:#fff}.reports{display:grid;gap:var(--gap);grid-template-columns:1fr}@media (min-width: 768px){.reports{grid-template-columns:repeat(2,1fr)}}@media (min-width: 1280px){.reports{grid-template-columns:repeat(3,1fr)}}.card{display:flex;flex-direction:column;background-color:var(--bg-clr);border-radius:var(--corner-radius)}.card:before{content:"";display:block;width:100%;flex:1;min-height:42px;background-image:var(--bg-img);background-position:top -8px right 1.125rem;background-size:40% auto;background-repeat:no-repeat}.work{--bg-clr: var(--light-orange);--bg-img: url(./../images/icon-work.svg)}.play{--bg-clr: var(--soft-blue);--bg-img: url(./../images/icon-play.svg)}.study{--bg-clr: var(--light-red);--bg-img: url(./../images/icon-study.svg)}.exercise{--bg-clr: var(--lime-green);--bg-img: url(./../images/icon-exercise.svg)}.social{--bg-clr: var(--violet);--bg-img: url(./../images/icon-social.svg)}.self-care{--bg-clr: var(--soft-orange);--bg-img: url(./../images/icon-self-care.svg)}.card__content{padding:1.75rem;background-color:var(--dark-blue);border-radius:var(--corner-radius);transition:background-color .3s ease-in-out}.card:hover .card__content{background-color:#292f70}@media (min-width: 1024px){.card__content{padding:2rem}}.card header,.card section{display:flex;justify-content:space-between}.card header{margin-block-end:1.5rem;align-items:center}.card__title{font-weight:500;text-transform:capitalize}.card__btn{position:relative;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}.card__btn:before{content:"";position:absolute;width:2.25rem;height:2.25rem;border-radius:50%;transform:scale(.5);transition:.15s ease-in-out;transition-property:background-color,transform}.card__btn:hover:before{transform:scale(1);background-color:#ffffff40}.card__btn svg{fill:var(--pale-blue);pointer-events:none}.card__btn:hover svg path,.card__btn:active svg path{fill:#fff}.card section{align-items:baseline}@media (min-width: 1280px){.card section{gap:.75rem;flex-direction:column}}.card__current-time{line-height:1;font-weight:300;font-size:2.25rem}@media (min-width: 1024px){.card__current-time{font-size:2.75rem}}.card__previous-time{font-size:.875rem;color:var(--pale-blue)}