nav{color:#f8f8f2;--csil-beige:rgba(68,71,90,0.9);--csil-border:#bd93f9;display:flex;justify-content:stretch;gap:30px;position:fixed;margin-left:3rem;margin-right:3rem;margin-top:1rem;width:calc(100% - 6rem);height:2rem;-webkit-font-smoothing:antialiased;z-index:5;backdrop-filter:blur(10px)}.navOption{display:flex;gap:7.5px}@keyframes disappearUp{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-100px)}}@keyframes dropDown{0%{opacity:0;transform:translateY(-100px)}to{opacity:1;transform:translateY(0)}}.hidden{animation:disappearUp .2s forwards}.active{animation:dropDown .2s forwards}nav>ul{display:flex;list-style:none;gap:3rem;flex-grow:1;margin:0;padding:10px 20px;position:relative;border-radius:0 5px 5px 0;border-left:none;border-width:2px}nav>ul:before{content:"";position:absolute;top:-2px;bottom:-2px;left:-13px;width:20%;background-color:inherit;transform:skewX(-20deg);transform-origin:left;border:2px solid var(--csil-border);border-right:none;z-index:-1;border-radius:5px 0 0 10px}.circle{width:8.5px;height:8.5px;border-radius:50%;background-color:transparent;border:2px solid #bd93f9}.on{background-color:#bd93f9;box-shadow:0 0 10px rgba(189,147,249,.5)}nav>ul>*{display:flex;justify-content:center;align-items:center;transition:all .2s ease-in-out;color:#f8f8f2}nav>ul>:hover{color:#bd93f9;transform:translateY(-2px)}.dropDown:before{content:"";position:absolute;top:-50px;left:0;height:50px;width:100%}.dropDown{position:absolute;background-color:rgba(68,71,90,.95);border-radius:10px;border:2px solid #bd93f9;top:40px;padding:5px 20px 20px;min-height:100px;animation:pop-out .25s ease-in-out;transition:opacity .25s ease-in-out;transform-origin:top;backdrop-filter:blur(10px);box-shadow:0 10px 30px rgba(189,147,249,.3)}.disappear{animation:pop-away .25s ease-in-out}@keyframes pop-out{0%{transform:translateY(-25px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes pop-away{0%{transform:translateY(0);opacity:1}to{transform:translateY(-25px);opacity:0}}nav>*{border-color:var(--csil-border);border-style:solid;background-color:var(--csil-beige);color:#f8f8f2}.fullLogo{display:inline-flex;flex-direction:row;justify-content:space-between;font-family:var(--font-monoRoman);font-weight:600;border-right-style:none;gap:.5rem;width:min-content;align-items:center;position:relative;padding:.25rem 1rem;border-radius:5px 0 0 5px;border-width:2px;transition:all .2s ease-in-out}.fullLogo:hover{background-color:rgba(189,147,249,.2);transform:translateY(-2px);box-shadow:0 5px 15px rgba(189,147,249,.3)}.fullLogo:before{content:"";position:absolute;border-radius:0 10px 5px 0;top:-2px;bottom:-2px;right:-13px;width:70%;background-color:inherit;transform:skewX(-20deg);transform-origin:left;border:2px solid var(--csil-border);border-left:none;z-index:-1}@media (max-width:768px){.menu-toggle{display:block}nav>ul{display:none;flex-direction:column;width:100%;background-color:rgba(68,71,90,.95);backdrop-filter:blur(10px);border-radius:10px;border:2px solid #bd93f9}nav.mobile-open>ul.open{display:flex}nav>ul.open li{padding:.75rem 1rem;border-top:1px solid #6272a4;color:#f8f8f2}nav>ul.open li:hover{background-color:rgba(189,147,249,.2);color:#bd93f9}.dropDown{display:none}}