@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap");:root{--bg-gradient-onyx:linear-gradient(to bottom right,hsl(240,1%,25%) 3%,hsl(0,0%,19%) 97%);--bg-gradient-jet:linear-gradient(to bottom right,hsla(240,1%,18%,1),hsla(240,2%,11%)),hsl(240,2%,13%);--bg-gradient-yellow-1:linear-gradient(to bottom right,hsl(45,100%,71%),hsla(36,100%,69%,0) 50%);--bg-gradient-yellow-2:linear-gradient(135deg,hsla(45,100%,71%,0.251),hsla(35,100%,68%,0) 59.86%),hsl(240,2%,13%);--border-gradient-onyx:linear-gradient(to bottom right,hsl(0,0%,25%),hsla(0,0%,25%,0) 50%);--text-gradient-yellow:linear-gradient(90deg,hsl(45,100%,72%),hsl(35,100%,68%));--jet:hsl(0,0%,22%);--onyx:hsl(240,1%,17%);--eerie-black-1:hsl(240,2%,13%);--eerie-black-2:hsl(240,2%,12%);--smoky-black:hsl(0,0%,7%);--white-1:hsl(0,0%,100%);--white-2:hsl(0,0%,98%);--orange-yellow-crayola:hsl(45,100%,72%);--vegas-gold:hsl(45,54%,58%);--light-gray:hsl(0,0%,84%);--light-gray-70:hsla(0,0%,84%,0.7);--bittersweet-shimmer:hsl(0,43%,51%);--ff-poppins:"Poppins",sans-serif;--fs-1:24px;--fs-2:20px;--fs-3:18px;--fs-4:16px;--fs-5:15px;--fs-6:14px;--fs-7:13px;--fs-8:11px;--fw-300:300;--fw-400:400;--fw-500:500;--fw-600:600;--shadow-1:-4px 8px 24px hsla(0,0%,0%,0.25);--shadow-2:0 16px 30px hsla(0,0%,0%,0.25);--shadow-3:0 16px 40px hsla(0,0%,0%,0.25);--shadow-4:0 25px 50px hsla(0,0%,0%,0.15);--shadow-5:0 24px 80px hsla(0,0%,0%,0.25);--transition-1:0.25s ease;--transition-2:0.5s ease-in-out}*,:after,:before{margin:0;padding:0;box-sizing:border-box}a{text-decoration:none}li{list-style:none}a,button,img,ion-icon,span,time{display:block}button{border:none;text-align:left;cursor:pointer}button,input,textarea{font:inherit;background:none}input,textarea{display:block;width:100%}::selection{background:var(--orange-yellow-crayola);color:var(--smoky-black)}:focus{outline-color:var(--orange-yellow-crayola)}html{font-family:var(--ff-poppins)}body{background:var(--smoky-black)}.icon-box{position:relative;background:var(--border-gradient-onyx);width:30px;height:30px;border-radius:8px;display:flex;justify-content:center;align-items:center;font-size:16px;color:var(--orange-yellow-crayola);box-shadow:var(--shadow-1);z-index:1}.icon-box:before{content:"";position:absolute;inset:1px;background:var(--eerie-black-1);border-radius:inherit;z-index:-1}.icon-box ion-icon{--ionicon-stroke-width:35px}.separator{width:100%;height:1px;background:var(--jet);margin:16px 0}.h2,.h3,.h4,.h5{color:var(--white-2);text-transform:capitalize}.h2{font-size:var(--fs-1)}.h3{font-size:var(--fs-2)}.h4{font-size:var(--fs-4)}.h5{font-size:var(--fs-7);font-weight:var(--fw-500)}.article-title{position:relative;padding-bottom:20px}.article-title:after{content:"";position:absolute;bottom:0;left:0;width:30px;height:3px;background:var(--text-gradient-yellow);border-radius:3px}.has-scrollbar::-webkit-scrollbar{width:5px;height:5px;display:none}.has-scrollbar::-webkit-scrollbar-track{background:var(--onyx);border-radius:5px}.has-scrollbar::-webkit-scrollbar-thumb{background:var(--orange-yellow-crayola);border-radius:5px}.has-scrollbar::-webkit-scrollbar-button{width:20px}.content-card{position:relative;background:var(--border-gradient-onyx);padding:45px 15px 15px;border-radius:14px;box-shadow:var(--shadow-2);cursor:pointer;z-index:1}.content-card:before{content:"";position:absolute;inset:1px;background:var(--bg-gradient-jet);border-radius:inherit;z-index:-1}.card-style{background:var(--eerie-black-2);border:1px solid var(--jet);border-radius:20px;padding:15px;box-shadow:var(--shadow-1);z-index:1}main{margin:10px 12px 30px;min-width:259px}.main-content{position:relative}article{width:100%;margin-inline:auto;display:none}article.active{display:block;animation:fade .5s ease backwards}@keyframes fade{0%{opacity:0}to{opacity:1}}@media (min-width:580px){:root{--fs-1:30px;--fs-2:28px;--fs-3:24px;--fs-4:20px;--fs-5:18px;--fs-6:16px;--fs-7:15px;--fs-8:12px}main{margin-top:30px;margin-bottom:30px}.icon-box{width:48px;height:48px;border-radius:12px;font-size:18px}.separator{margin:32px 0}.article-title{padding-bottom:20px}.article-title:after{width:40px;height:5px;padding-bottom:20px}.card-style{margin-inline:auto}}@media (min-width:768px){article{width:700px}}@media (min-width:1024px){:root{--fs-1:30px;--fs-2:28px;--fs-3:24px;--fs-4:20px;--fs-5:18px;--fs-6:16px;--fs-7:15px;--fs-8:12px}.h2,.h3,.h4,.h5{font-size:medium}article{width:900px}main{max-width:1200px;margin-inline:auto;display:flex;justify-content:center;align-items:stretch;gap:25px}.main-content{min-width:75%;width:75%;margin:0}.article-title{padding-bottom:20px}.article-title:after{width:40px;height:5px}.has-scrollbar::-webkit-scrollbar{width:20px}.has-scrollbar::-webkit-scrollbar-track{background:var(--smoky-black)}.has-scrollbar::-webkit-scrollbar-thumb{border:5px solid var(--smoky-black);background:hsla(0,0%,100%,.1);border-radius:20px;box-shadow:inset 1px 1px 0 hsla(0,0%,100%,.11),inset -1px -1px 0 hsla(0,0%,100%,.11)}.has-scrollbar::-webkit-scrollbar-thumb:hover{background:hsla(0,0%,100%,.15)}.has-scrollbar::-webkit-scrollbar-button{height:60px}}