*,*:before,*:after{box-sizing:border-box}body,h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin:0}h1,h2,h3,h4,h5,h6{text-wrap:balance}ul[role=list],ol[role=list]{list-style:none}html:focus-within{scroll-behavior:smooth}body{min-height:100vh;text-rendering:optimizeSpeed}a:not([class]){text-decoration-skip-ink:auto}img,picture{max-width:100%;display:block}input,button,textarea,select{font:inherit}@media (prefers-reduced-motion: reduce){html:focus-within{scroll-behavior:auto}*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}:root{--clr-accent-name: hsl(246, 80%, 60%);--clr-accent-work: hsl(15, 100%, 70%);--clr-accent-play: hsl(195, 74%, 62%);--clr-accent-study: hsl(348, 100%, 68%);--clr-accent-exercise: hsl(145, 58%, 55%);--clr-accent-social: hsl(264, 64%, 52%);--clr-accent-selfcare: hsl(43, 84%, 65%);--clr-neutral-100: hsl(236, 100%, 87%);--clr-neutral-200: hsl(235, 45%, 61%);--clr-neutral-300: hsl(235, 46%, 20%);--clr-neutral-400: hsl(226, 43%, 10%);--font-family-base: "Rubik", sans-serif;--font-size-sm: .9375rem;--font-size-base: 1.125rem;--font-size-lg: 1.5rem;--font-size-xl: 2rem;--font-weight-light: 300;--font-weight-regular: 400;--font-weight-medium: 500}body{font-family:var(--font-family-base);background-color:var(--clr-neutral-400);font-size:var(--font-size-base);font-weight:var(--font-weight-regular);min-height:100vh;display:grid;justify-content:center;margin:5rem 0rem}.main-section{display:flex;flex-direction:column;gap:1.5rem;width:75vw}.name-card{display:grid;grid-template-rows:auto auto;background-color:var(--clr-neutral-300);border-radius:1rem}.user-card{display:grid;grid-template-columns:auto 1fr;grid-template-rows:1fr 1fr;gap:0rem 1rem;background-color:var(--clr-accent-name);align-items:center;padding:1.5rem;border-radius:inherit}.profile-pic{grid-row:1 / span 2;height:4rem;border:3px solid white;border-radius:50%}.user-card>p{font-size:var(--font-size-sm);color:var(--clr-neutral-100)}.user-card>h1{font-size:var(--font-size-lg);font-weight:var(--font-weight-light);align-self:flex-start;color:#fff}.timeframe-options{display:flex;justify-content:space-around;padding:1rem;color:var(--clr-neutral-200)}.timeframe-options>button{all:unset;cursor:pointer}button:hover,button:focus{color:#fff}.activity-time-card{display:grid;background-color:var(--clr-accent-work);overflow:hidden;border-radius:1rem}.timecard-top{position:relative;height:2.5rem}.activity-img-rep{position:absolute;top:-.8rem;right:.8rem}.info-card{background-color:var(--clr-neutral-300);padding:1.2rem;border-radius:1rem;box-shadow:-1px 0 0 0 var(--clr-neutral-300),1px 0 0 0 var(--clr-neutral-300);z-index:1;display:grid;grid-template-columns:1fr 1fr;row-gap:.5rem;align-items:center}.title{font-size:inherit;color:#fff;font-weight:inherit}.info-card>img{justify-self:end}.current-total-time{font-size:var(--font-size-xl);color:#fff;font-weight:var(--font-weight-light)}.previous-total-time{font-size:var(--font-size-sm);color:var(--clr-neutral-100);justify-self:end}@media (min-width: 768px){.main-section{width:50vw}}@media (min-width: 1048px){body{place-content:center;margin:unset}.main-section{width:unset;display:grid;margin-inline:5rem;max-width:70vw;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(2,1fr)}.user-card{grid-template-columns:1fr}.name-card{grid-row:1 / -1}.info-card{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto auto;row-gap:.5rem;align-items:center}.previous-total-time{grid-column:1}.timeframe-options{flex-direction:column}}