@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{
font-family: 'Russo One', sans-serif
}
.header{
background:#000;
padding:var(--s-sm)calc(var(--s-sm) + var(--s-0));
display:flex;
align-items:center;
justify-content:space-between;
position:sticky;
top:0;
z-index:999;
border-bottom:3px solid var(--d);
box-shadow:0 0 10px #000}
.header::after{
content:"";
position:absolute;
bottom:-3px;
left:0;
height:3px;
width:0%;
background-color:var(--g);
transition:width 0.2s linear;
z-index:1000}
.logo{
font-size:var(--s-3);
color:var(--g);
letter-spacing:3px;
-webkit-user-select:none;
user-select:none;
white-space:nowrap}
.hamburger{
padding-top:var(--s--2);
padding-bottom:var(--s--2);
display:flex;
flex-direction:column;
justify-content:center;
cursor:pointer;
position:absolute;
top:50%;
right:var(--s-sm);
transform:translateY(-50%);
z-index:1000;
opacity:.9}
.hamburger svg{
width:calc(var(--s-4) * .9);
transition:fill 400ms ease-in-out}
.line {
transition:transform 0.3s ease,opacity 0.2s 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) + var(--s-3) + var(--s--2));
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.6s ease-out;
z-index:998;
overflow-y:auto}
@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)}
.mobile-nav{
padding-left:var(--s-md);
padding-right:var(--s-lg);
top:calc(var(--s-sm) + var(--s-sm) + calc(var(--s-3) * .7))}
.header{
padding:var(--s-sm)var(--s-xs)}
}
.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;
flex-direction:row;
justify-content:center}
.footer-link a{
margin-left:var(--s-xs);
margin-right: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-property: opacity, transform;
transition-duration: 0.3s, 0.3s;
transition-timing-function: cubic-bezier(0.7, 0, 1, 0.5), cubic-bezier(0.7, 0, 1, 0.5);
will-change: opacity, transform;
}
.fade-in.visible {
opacity: 1;
transform: translateY(0) scale(1);
transition-duration: 0.8s, 0.8s;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1), cubic-bezier(0.4, 0, 0.2, 1);
}