:root{
--terminal-color:#00ff9c;
}

body{
background:black;
margin:0;
font-family:Courier New, monospace;
color:var(--terminal-color);
overflow:hidden;
}

/* terminal position */

.terminal{
position:absolute;
top:1cm;
left:50%;
transform:translateX(-50%);
width:90%;
max-width:900px;
}

pre{
white-space:pre-wrap;
font-size:clamp(14px,2vw,20px);
line-height:1.2;
}

/* header */

.logo{
font-size:45px;
font-weight:bold;
}

.beta{
font-size:20px;
opacity:.7;
margin-left:8px;
}

/* CRT glow */

.crt{
position:fixed;
top:0;
left:0;
right:0;
bottom:0;
pointer-events:none;
box-shadow:
inset 0 0 130px rgba(0,255,150,.25),
inset 0 0 200px rgba(0,255,150,.15);
}

/* scanlines */

.scanlines{
position:fixed;
top:0;
left:0;
right:0;
bottom:0;
background:
repeating-linear-gradient(
to bottom,
rgba(255,255,255,0.03) 0px,
rgba(0,0,0,0.15) 2px,
rgba(0,0,0,0.15) 4px
);
pointer-events:none;
}

/* cursor */

#cursor{
display:inline-block;
width:10px;
height:16px;
background:var(--terminal-color);
margin-left:4px;
animation:blinkCursor 1s steps(2,start) infinite;
}

@keyframes blinkCursor{
0%{opacity:1}
50%{opacity:0}
100%{opacity:1}
}

/* loader */

#progress-container{
display:none;
margin-top:20px;
}

.progress-box{
border:6px solid var(--terminal-color);
display:inline-block;
padding:10px 20px;
}

/* flashing */

.flash-fast{
animation:flashFast .4s infinite;
}

@keyframes flashFast{
0%{opacity:1}
50%{opacity:0}
100%{opacity:1}
}

.flash-slow{
animation:flashSlow 1s 2;
}

@keyframes flashSlow{
0%{opacity:1}
50%{opacity:.2}
100%{opacity:1}
}

.logs-flash{
animation:logsFlash 2s infinite;
}

@keyframes logsFlash{
0%{opacity:.2}
50%{opacity:1}
100%{opacity:.2}
}

/* username input */

.terminal-input{
background:springgreen;
color:#000000;
font-weight:bold;
caret-color:#00ff9c;
border:none;
outline:none;
font-family:Courier New, monospace;
font-size:26px;
}

/* green ONLINE */

.online{
color:#39ff14;
text-shadow:
font-size: 24px;
0 0 30px #39ff14,
0 0 45px #39ff14,
0 0 55px #39ff14;
}