@font-face{
font-family:'Russo One';
src:url('/fonts/RussoOne-Regular.ttf') format('truetype');
font-weight:400;
font-style:normal}
@font-face{
font-family:'Space Mono';
src:url('/fonts/SpaceMono-Regular.ttf') format('truetype');
font-weight:400;
font-style:normal}
@font-face{
font-family:'Space Mono';
src:url('/fonts/SpaceMono-Bold.ttf') format('truetype');
font-weight:700;
font-style:normal}
@font-face{
font-family:'Space Mono';
src:url('/fonts/SpaceMono-Italic.ttf') format('truetype');
font-weight:400;
font-style:italic}
@font-face{
font-family:'Space Mono';
src:url('/fonts/SpaceMono-BoldItalic.ttf') format('truetype');
font-weight:700;
font-style:italic}
:root{
--g:#00cc6e;
--d:#0a0a0a;
--l:#f0f0f0;
--progress-width:0;
--s-xs:0.5rem;
--s-sm:1rem;
--s-md:2rem;
--s-lg:3rem;
--s-xl:4rem;
--s--4: clamp(0.18rem, 0.162rem + 0.0225vw, 0.216rem);
--s--3: clamp(0.306rem, 0.297rem + 0.045vw, 0.36rem);
--s--2: clamp(0.513rem, 0.495rem + 0.099vw, 0.603rem);
--s--1: clamp(0.747rem, 0.702rem + 0.18vw, 0.9rem);
--s-0: clamp(0.9rem, 0.855rem + 0.225vw, 1.0125rem);
--s-1: clamp(1.0125rem, 0.9rem + 0.45vw, 1.35rem);
--s-2: clamp(1.35rem, 1.125rem + 0.9vw, 2.025rem);
--s-3: clamp(2.025rem, 1.8rem + 1.35vw, 3.375rem);
--s-4: clamp(3.375rem, 2.7rem + 1.8vw, 5.625rem);
}
*{
margin:0;
padding:0;
box-sizing:border-box}
html{
scroll-behavior: smooth}
body{
font-family: 'Space Mono', monospace;
background-color:var(--d);
color:var(--l);
overflow-x:hidden;
cursor:url('cursor.cur'),auto;
-ms-overflow-style:none}
::-webkit-scrollbar{
display:none}
h1,h2,h3,h4,button{
font-family: 'Russo One', sans-serif}
.header{
position:sticky;
top:0;
z-index:999;
background: linear-gradient(to bottom, #000, #000, #111);
display:flex;
flex-direction:column;
box-shadow:0 0 10px #000;
border-bottom:none;
transition:all 0.5s ease}
.header-main{
display:flex;
align-items:center;
justify-content:center;
padding:calc(var(--s-sm) * 1.6) calc(var(--s-sm) + var(--s-0));
position:relative;
transition:padding 0.5s ease}
.header:not(.at-top) .header-main{
justify-content:space-between;
padding:var(--s-sm) calc(var(--s-sm) + var(--s-0))}
.header::after{
content:"";
position:absolute;
bottom:0;
left:0;
height:3px;
width: var(--progress-width);
background-color:var(--g);
transition:width 0.5s ease;
z-index:1000}
.logo{
font-size:var(--s-3);
color:var(--g);
letter-spacing:3px;
user-select:none;
white-space:nowrap;
transition:transform 0.5s cubic-bezier(.4,0,.2,1),font-size 0.5s ease}
.header:not(.at-top) .logo{
transform:translateX(-10%) scale(0.85)}
.sub-header{
display:flex;
align-items:center;
justify-content:space-around;
height:48px;
overflow-x:auto;
border-top: 1px rgba(30,50,30,0.8) solid;
transition:height 0.5s ease,opacity 0.55s ease}
.header:not(.at-top) .sub-header{
height:3px;
border: none}
.sub-header a{
font-family: 'Russo One', sans-serif;
font-size:var(--s-0);
color:#fff;
text-decoration:none;
transition:opacity 0.2s ease}
.sub-header a:hover{
color:var(--g)}
.header:not(.at-top) .sub-header a{
opacity:0;
pointer-events:none}
.hamburger{
padding-top:var(--s--2);
padding-bottom:var(--s--2);
display:flex;
justify-content:center;
cursor:pointer;
position:absolute;
top:50%;
right:var(--s-sm);
transform:translateY(-50%);
z-index:1000;
opacity:0;
pointer-events:none;
transition:opacity 0.25s ease}
.header:not(.at-top) .hamburger{
opacity:.9;
pointer-events:auto}
.hamburger svg{
width:calc(var(--s-4) * .9);
transition:fill 100ms ease-in-out}
.line{
transition:transform 0.1s ease,opacity 0.1s ease;
transform-origin:25px 25px}
.move-line1{transform:translateY(11px)}
.move-line3{transform:translateY(-11px)}
.hide-line2{opacity:0}
.rotate-line1{transform-origin:12px 20px;transform:rotate(45deg)}
.rotate-line3{transform-origin:12px 30px;transform:rotate(-45deg)}
.r-rotate-line1{transform-origin:10px 23px;transform:rotate(0)}
.r-rotate-line3{transform-origin:10px 23px;transform:rotate(0)}
.show-line2{opacity:1}
.r-move-line1{transform:translateY(-11px)}
.r-move-line3{transform:translateY(11px)}
.mobile-nav{
position:fixed;
top:calc(var(--s-sm) + var(--s-sm) + calc(var(--s-3) * 0.85));
right:0;
transform:translateX(calc(100% + 10px));
height:100vh;
background:linear-gradient(160deg,#111 30%,#1a1a1a 60%,#222 100%);
border-left:2px solid var(--g);
box-shadow:0 0 10px var(--g);
padding-left:var(--s-lg);
padding-right:calc(var(--s-xl) * 1.2);
padding-top:var(--s-md);
display:flex;
flex-direction:column;
gap:var(--s-sm);
transition:transform 0.4s ease-out, opacity 0.4s ease;
z-index:998;
overflow-y:auto}
.mobile-nav.show{
transform:translateX(0)}
.mobile-nav a{
color:var(--l);
text-decoration:none;
font-size:var(--s-1);
opacity:0.9;
transition:color 0.3s ease}
.mobile-nav a:hover{color:var(--g)}
.mobile-nav h2,h3{
font-size:var(--s-2);
margin-bottom:var(--s-xs)}
.current-site{color:var(--g)!important}
.nav-line{
border-top:2px dashed #555;
margin:var(--s-sm) 0;
width:calc(100% + var(--s-md))}
.footer{
text-align:center;
padding:var(--s-sm);
background:#000;
border-top:2px solid var(--g);
font-size:var(--s-0);
color:var(--g);
display:flex;
flex-direction:column;
gap:var(--s-xs)}
.footer-link{
display:flex;
justify-content:center}
.footer-link a{
margin:0 var(--s-xs);
color:var(--g);
text-decoration:none}
a:hover{text-shadow:0 0 5px var(--g)}
.fade-in{
opacity:0;
transform:translateY(50px) scale(0.95);
transition:opacity 0.3s,transform 0.3s;
will-change:opacity,transform}
.fade-in.visible{
opacity:1;
transform:translateY(0) scale(1);
transition-duration:0.8s;}
@media(max-width:720px){
.hamburger{right:var(--s-xs)}
.hamburger svg{width:calc(var(--s-4) * .7)}
.logo{font-size:calc(var(--s-3) * .7)}}
#fade {
position: fixed;
inset: 0;
background: #000;
pointer-events: none;
z-index: 9999;
  animation: fadeOut 0.6s ease-in forwards}
@keyframes fadeOut {
from {
opacity: 1}
to {
opacity: 0}
}
/*Chrome Hardware Acceleration*/
.header, .sub-header{
transform: translateZ(0)}