@import"_font";*{margin:0;padding:0;box-sizing:border-box}html{font-size:62.5%}:root{--header-bg: hsl(246, 80%, 60%);--work-bg: hsl(15, 100%, 70%);--play-bg: hsl(195, 74%, 62%);--study-bg: hsl(348, 100%, 68%);--exercise-bg: hsl(145, 58%, 55%);--social-bg: hsl(264, 64%, 52%);--self-care-bg: hsl(43, 84%, 65%);--bg-color: hsl(226, 43%, 10%);--card-bg: hsl(235, 46%, 20%);--card-hover: hsl(235, 36%, 40%);--text-color: hsl(236, 100%, 87%);--purple-accent: hsl(235, 45%, 61%);--white: hsl(235, 45%, 100%)}.attribution{font-size:1.5rem;font-weight:bold;margin-bottom:2rem;gap:.5rem;color:var(--text-color);text-align:center}.attribution a{text-decoration:none;transition:1s ease-in-out;color:var(--social-bg)}.attribution a:hover,.attribution a:active{filter:brightness(1.3)}body{background-color:var(--bg-color);padding:8rem 2rem;color:var(--text-color);font-family:"rubik",sans-serif;font-size:1.6rem}h2{font-size:1.8rem;color:var(--white);font-weight:bold}.card{padding:3rem;max-width:45rem;border-radius:2rem;margin:0 auto 0 auto}.profile img{border:.2rem solid var(--white);width:6rem;border-radius:50%}.profile{display:flex;padding:3rem;border-radius:2rem;align-items:center;gap:2rem;background-color:var(--header-bg)}h1{font-size:2.5rem;font-weight:lighter;text-transform:capitalize}.user{background-color:var(--card-bg);grid-area:user;margin-bottom:7rem;padding:0}.work{grid-area:work}.play{grid-area:play}.study{grid-area:study}.exercise{grid-area:exercise}.social{grid-area:social}.self-care{grid-area:self-care}nav{background-color:var(--card-bg);font-size:2rem;padding:2rem 3rem;width:100%;border-radius:0 0 2rem 2rem;display:flex;align-items:center;z-index:-1;justify-content:space-between}nav a{color:var(--text-color);transition:1s ease;cursor:pointer;text-decoration:none}a:hover,a:active,a:active,a:active{color:var(--white)}.title,.status{display:flex;align-items:center;justify-content:space-between}.title{margin-bottom:1rem;z-index:99}.card:has(h2){background-color:var(--card-bg);margin-bottom:7rem}.bigtext{font-size:3rem;color:var(--white);font-weight:lighter}.card:has(h2){position:relative;cursor:pointer;transition:1s ease}.card:has(h2):hover{background-color:var(--card-hover)}.expand{transform:translateX(-1.5rem)}.expand:hover,.expand:hover::before,.expand:hover::after{background-color:var(--white)}.card:has(h2):has(.expand:hover){background-color:var(--card-bg)}.expand,.expand::before,.expand::after{width:1rem;content:"";height:1rem;border-radius:50%;display:block;transition:1s ease-in-out;background-color:var(--purple-accent)}.expand:hover,.expand::before:hover,.expand::after:hover{background-color:var(--white)}.expand::before{left:-1.5rem;position:absolute}.expand::after{left:1.5rem;position:absolute}.extra{width:100%;content:"";height:6rem;position:absolute;left:0;top:-4rem;display:flex;align-items:center;padding-right:2rem;justify-content:flex-end;overflow:hidden;z-index:-1;border-radius:2rem 2rem 0 0}.extra img{transform:translateY(-0.5rem);width:6rem}.work .extra{background-color:var(--work-bg)}.play .extra{background-color:var(--play-bg)}.study .extra{background-color:var(--study-bg)}.exercise .extra{background-color:var(--exercise-bg)}.social .extra{background-color:var(--social-bg)}.self-care .extra{background-color:var(--self-care-bg)}@media(min-width: 1440px){body{padding:0}.card{margin:0;height:-moz-max-content;height:max-content}.user{height:100%;transform:translateY(-4rem)}.card:has(h2){margin:0;height:calc(100% - 4rem)}main{display:grid;height:calc(100vh - 3.7rem);place-items:center}.bento{width:70%;display:grid;gap:3rem;transform:translateY(4rem);align-items:start;grid-template-columns:repeat(4, 1fr);grid-template-rows:repeat(2, 25rem);grid-template-areas:"user work play study" "user exercise social self-care"}.title{margin-bottom:2rem}.status{flex-direction:column;align-items:flex-start;gap:1rem}.bigtext{font-size:5rem}h2{font-size:2rem}.profile{height:calc(70% - 1rem);flex-direction:row;align-items:flex-start}.profile img{width:10rem;height:10rem}.profile div{position:absolute;top:16rem;left:3rem}.profile div p{font-size:2rem}h1{font-size:4.5rem;color:var(--white)}nav{height:calc(30% + 1rem);flex-direction:column;justify-content:space-evenly;align-items:flex-start;padding:0 3rem}}/*# sourceMappingURL=styles.css.map */