:root{--primary-hue: 260;--secondary-hue: 290;--accent-hue: 200;--glass-bg: hsla(240, 30%, 10%, .3);--glass-bg-accent: hsla(var(--primary-hue), 100%, 70%, .1);--glass-border: 1px solid rgba(255, 255, 255, .1);--bg-gradient-onyx: linear-gradient(to bottom right, hsla(240, 20%, 15%, .5) 0%, hsla(240, 20%, 10%, .2) 100%);--bg-gradient-jet: linear-gradient(to bottom right, hsla(240, 20%, 20%, .2) 0%, hsla(240, 20%, 10%, .1) 100%), hsla(240, 30%, 10%, .4);--border-gradient-onyx: linear-gradient(to bottom right, hsla(0, 0%, 100%, .1) 0%, hsla(0, 0%, 100%, 0) 50%);--text-gradient-yellow: linear-gradient(to right, hsl(280, 100%, 75%), hsl(200, 100%, 75%));--jet: rgba(255, 255, 255, .1);--onyx: hsla(240, 20%, 10%, .5);--eerie-black-1: hsla(240, 25%, 8%, .8);--eerie-black-2: rgba(15, 12, 41, .6);--white-1: hsl(0, 0%, 100%);--white-2: hsl(240, 20%, 95%);--orange-yellow-crayola: hsl(260, 100%, 75%);--vegas-gold: hsl(200, 80%, 70%);--light-gray: hsl(240, 10%, 90%);--light-gray-70: hsla(240, 10%, 90%, .7);--ff-poppins: "Poppins", sans-serif;--fs-1: 24px;--fs-2: 18px;--fs-3: 17px;--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: 0 4px 30px rgba(0, 0, 0, .2);--shadow-2: 0 16px 30px rgba(0, 0, 0, .2);--shadow-3: 0 16px 40px rgba(0, 0, 0, .3);--shadow-4: 0 25px 50px rgba(0, 0, 0, .3);--shadow-5: 0 24px 80px rgba(0, 0, 0, .2);--transition-1: .25s ease;--transition-2: .5s ease-in-out;--color-bg1: rgb(8, 10, 35);--color-bg2: rgb(0, 17, 82);--color1: 18, 113, 255;--color2: 107, 74, 255;--color3: 100, 100, 255;--color4: 50, 50, 200;--color5: 80, 0, 80;--circle-size: 80%;--blending: hard-light}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}a{text-decoration:none}li{list-style:none}img,ion-icon,a,button,time,span{display:block}button{font:inherit;background:none;border:none;text-align:left;cursor:pointer}input,textarea{display:block;width:100%;background:none;font:inherit}::selection{background:var(--orange-yellow-crayola);color:var(--white-1)}:focus{outline-color:var(--orange-yellow-crayola)}html{font-family:var(--ff-poppins);height:100%}body{min-height:100vh;background:var(--color-bg1);color:var(--white-1);overflow-x:hidden;position:relative}.gradient-bg{width:100vw;height:100vh;position:fixed;overflow:hidden;background:linear-gradient(40deg,var(--color-bg1),var(--color-bg2));top:0;left:0;z-index:-1}.gradient-bg:after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:#00001466;backdrop-filter:blur(80px);-webkit-backdrop-filter:blur(80px);z-index:10}.gradients-container{filter:url(#goo) blur(40px);width:100%;height:100%;z-index:1}.g1,.g2,.g3,.g4,.g5,.interactive{position:absolute;background:radial-gradient(circle at center,rgba(var(--color1),.8) 0,rgba(var(--color1),0) 50%) no-repeat;mix-blend-mode:var(--blending);width:var(--circle-size);height:var(--circle-size);top:calc(50% - var(--circle-size) / 2);left:calc(50% - var(--circle-size) / 2);transform-origin:center center;opacity:1}.g1{animation:moveVertical 30s ease infinite}.g2{background:radial-gradient(circle at center,rgba(var(--color2),.8) 0,rgba(var(--color2),0) 50%) no-repeat;top:calc(50% - var(--circle-size) / 2);left:calc(50% - var(--circle-size) / 2);transform-origin:calc(50% - 400px);animation:moveInCircle 20s reverse infinite}.g3{background:radial-gradient(circle at center,rgba(var(--color3),.8) 0,rgba(var(--color3),0) 50%) no-repeat;top:calc(50% - var(--circle-size) / 2 + 200px);left:calc(50% - var(--circle-size) / 2 - 500px);transform-origin:calc(50% + 400px);animation:moveInCircle 40s linear infinite}.g4{background:radial-gradient(circle at center,rgba(var(--color4),.8) 0,rgba(var(--color4),0) 50%) no-repeat;top:calc(50% - var(--circle-size) / 2);left:calc(50% - var(--circle-size) / 2);transform-origin:calc(50% - 200px);animation:moveHorizontal 40s ease infinite;opacity:.7}.g5{background:radial-gradient(circle at center,rgba(var(--color5),.8) 0,rgba(var(--color5),0) 50%) no-repeat;width:calc(var(--circle-size) * 2);height:calc(var(--circle-size) * 2);top:calc(50% - var(--circle-size));left:calc(50% - var(--circle-size));transform-origin:calc(50% - 800px) calc(50% + 200px);animation:moveInCircle 20s ease infinite}@keyframes moveInCircle{0%{transform:rotate(0)}50%{transform:rotate(180deg)}to{transform:rotate(360deg)}}@keyframes moveVertical{0%{transform:translateY(-50%)}50%{transform:translateY(50%)}to{transform:translateY(-50%)}}@keyframes moveHorizontal{0%{transform:translate(-50%) translateY(-10%)}50%{transform:translate(50%) translateY(10%)}to{transform:translate(-50%) translateY(-10%)}}.sidebar,article{background:var(--glass-bg);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:var(--glass-border);border-radius:20px;padding:15px;box-shadow:var(--shadow-5);z-index:1}.separator{width:100%;height:1px;background:var(--jet);margin:16px 0}.icon-box{position:relative;background:var(--glass-bg-accent);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);border:var(--glass-border);z-index:1}.icon-box:before{display:none}.icon-box ion-icon{--ionicon-stroke-width: 35px}article{display:none}article.active{display:block;animation:fade .5s ease backwards}@keyframes fade{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.h2,.h3,.h4,.h5{color:var(--white-1);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:7px}.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}.has-scrollbar::-webkit-scrollbar-track{background:#ffffff0d;border-radius:5px}.has-scrollbar::-webkit-scrollbar-thumb{background:#fff3;border-radius:5px;border:1px solid rgba(255,255,255,.1)}.has-scrollbar::-webkit-scrollbar-button{width:20px}.content-card{position:relative;background:#ffffff0d;padding:45px 15px 15px;border-radius:14px;box-shadow:var(--shadow-2);cursor:pointer;z-index:1;border:var(--glass-border);transition:var(--transition-1)}.content-card:hover{background:#ffffff1a;transform:translateY(-2px)}.content-card:before{display:none}
