body {

background:#050505;

color:#7CFF7C;

font-family:
'IBM Plex Mono',
monospace;

display:flex;

justify-content:center;

align-items:center;

height:100vh;

margin:0;

overflow:hidden;

font-size:
clamp(2rem,5vw,5rem);

text-shadow:
0 0 5px rgba(124,255,124,0.35),
0 0 12px rgba(124,255,124,0.15);

animation:
screenOn 1.2s ease-out;

}

/* subtle crt scanlines */

body::before {

content:"";

position:fixed;

top:0;
left:0;

width:100%;
height:100%;

pointer-events:none;

background:
repeating-linear-gradient(
to bottom,
rgba(255,255,255,0.03),
rgba(255,255,255,0.03) 1px,
transparent 1px,
transparent 3px
);

opacity:0.12;

}

/* soft vignette */

body::after {

content:"";

position:fixed;

inset:0;

pointer-events:none;

background:
radial-gradient(
circle,
transparent 45%,
rgba(0,0,0,0.45) 100%
);

}

#content {

position:relative;

z-index:2;

display:flex;

flex-direction:column;

align-items:flex-start;

}

#main {

display:inline-flex;

align-items:center;

}

.hidden {

display:none;

}

#text {

display:inline-block;

}

#cursor {

margin-left:0.05em;

animation:
blink 0.8s infinite;

}

@keyframes blink {

0% { opacity:0; }
50% { opacity:1; }
100% { opacity:0; }

}

@keyframes screenOn {

0% {

opacity:0;
transform:scaleY(0.02);

}

40% {

opacity:1;
transform:scaleY(1.02);

}

100% {

opacity:1;
transform:scaleY(1);

}

}

a {

color:inherit;

text-decoration:none;

transition:
color 0.25s ease,
text-shadow 0.25s ease;

}

a:hover {

color:#B8FFB8;

text-shadow:
0 0 8px rgba(184,255,184,0.6);

}

::selection {

background:#7CFF7C;

color:#050505;

}

@media
(prefers-reduced-motion: reduce) {

* {

animation:none !important;
transition:none !important;

}

}

@media (max-width:600px){

body {

font-size:
clamp(2.5rem,8vw,4rem);

}

}