:root{--purple-600: hsl(246, 80%, 60%);--activity-work: hsl(15, 100%, 70%);--activity-play: hsl(195, 74%, 62%);--activity-study: hsl(348, 100%, 68%);--activity-exercise: hsl(145, 58%, 55%);--activity-social: hsl(264, 64%, 52%);--activity-selfcare: hsl(43, 84%, 65%);--activity: grey;--navy-950: hsl(226, 43%, 10%);--navy-hover: #34397b;--navy-900: hsl(235, 46%, 20%);--purple-500: hsl(235, 45%, 61%);--navy-200: hsl(236, 100%, 87%);--font-size: 18px;--family: "Rubik"}*{margin:0;padding:0;box-sizing:border-box}body{font-family:var(--family);font-size:var(--font-size);color:var(--navy-200);background-color:var(--navy-950);padding-block:80px 64px}body>header{background-color:var(--navy-900);margin-bottom:24px;margin-inline:auto;border-radius:16px;overflow:hidden;width:clamp(320px,95%,330px)}body>header>section{padding:32px 28px;background-color:var(--purple-600);border-bottom-left-radius:16px;border-bottom-right-radius:16px;display:flex;flex-direction:row;justify-content:flex-start;align-items:center;gap:18px}body>header>section>img{width:70px;border:3px solid #fff;border-radius:50%}body>header>section>h1{height:100%;font-size:16px;font-weight:300;line-height:1.7rem}body>header>section>h1>strong{color:#fff;font-size:24px;display:block}body>header>nav{padding:24px 20px 24px 34px}body>header>nav>ul{list-style:none;display:flex;flex-direction:row;justify-content:space-between}body>header>nav>ul>li>a{text-decoration:none;color:var(--purple-500)}body>header>nav>ul>li>a:hover{color:var(--navy-200)}body>header>nav>ul>li.active>a{color:#fff}body>main{margin-bottom:8px;margin-inline:auto;width:clamp(320px,95%,330px)}body>main>section{display:none;flex-direction:row;flex-wrap:wrap;justify-content:center;width:100%;gap:24px}body>main>section.active{display:flex}body>main>section>article{background-color:var(--activity);background-repeat:no-repeat;background-position:right 16px top -10px;border-radius:16px;overflow:hidden;height:160px;position:relative;width:100%}body>main>section>article:hover:not(:has(.icon-ellipsis:hover)){cursor:pointer}body>main>section>article:hover:not(:has(.icon-ellipsis:hover))>.content-wrapper{background-color:var(--navy-hover)}body>main>section>article>.content-wrapper{position:absolute;bottom:0;width:100%;border-top-left-radius:16px;border-top-right-radius:16px;background-color:var(--navy-900);padding:28px 24px 28px}body>main>section>article>.content-wrapper>.content-header,body>main>section>article>.content-wrapper>.content-body{display:flex;flex-direction:row;justify-content:space-between;align-items:center}body>main>section>article>.content-wrapper>.content-header{margin-bottom:6px}body>main>section>article>.content-wrapper>.content-header>h3{font-size:18px;font-weight:500;color:#fff}body>main>section>article>.content-wrapper>.content-header>.icon-ellipsis{display:flex;justify-content:center;align-items:center}body>main>section>article>.content-wrapper>.content-header>.icon-ellipsis:hover{cursor:pointer;color:#fff}body>main>section>article>.content-wrapper>.content-body>p:first-child{font-weight:300;font-size:32px;color:#fff}body>main>section>article>.content-wrapper>.content-body>p:last-child{font-size:15px}@media(min-width: 680px){body{position:relative;display:flex;flex-direction:row;justify-content:center;align-items:flex-start;gap:32px;padding-top:120px}body>header{position:sticky;top:80px;width:280px;margin:unset}body>header>section{display:block}body>header>section>article{width:280px}body>header>section>h1>strong{font-weight:300;line-height:3.2rem;font-size:42px}body>header>nav>ul{display:block;line-height:2.4rem}body>main{margin:unset;width:290px}body>main>section>article{width:280px;height:220px}body>main>section>article>.content-wrapper>.content-body{display:block}body>main>section>article>.content-wrapper>.content-body>p:first-child{font-size:48px}body .attribution{position:absolute;bottom:0px;left:50%;transform:translateX(-50%)}}@media(min-width: 960px){body{padding-top:180px}body>main{width:590px}}@media(min-width: 1300px){body{align-items:stretch;padding-top:254px}body>header{margin-left:30px;width:254px}body>header>section{padding-bottom:76px;padding-left:30px}body>header>section>h1{font-size:15px;line-height:1.2rem}body>header>section>h1>strong{font-size:40px}body>header>section>img{width:84px;margin-bottom:36px}body>header>nav{height:auto;padding-block:18px}body>header>nav>ul>li{line-height:2.6rem}body>main{width:824px}body>main>section{gap:30px}body>main>section>article{width:254px;height:242px}body>main>section>article>.content-wrapper{height:200px;padding-inline:30px;padding-top:30px}body>main>section>article>.content-wrapper>.content-body{padding-top:18px}body>main>section>article>.content-wrapper>.content-body>p:first-child{font-size:56px;line-height:unset;margin-bottom:8px}}/*# sourceMappingURL=style.css.map */