body {
background-color: #000;
color: #00ffff;
font-family: 'Courier New', Courier, monospace;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
overflow: hidden;
text-transform: uppercase;
}

.terminal-container {
width: 90%;
max-width: 800px;
padding: 30px;
border: 1px solid rgba(0, 255, 255, 0.3);
position: relative;
background: rgba(0, 5, 5, 0.9);
z-index: 5;
display: block !important;
}

.scanline {
width: 100%;
height: 100px;
background: linear-gradient(0deg, transparent, rgba(0, 255, 255, 0.05), transparent);
position: absolute;
top: -100px;
left: 0;
animation: scan 8s linear infinite;
pointer-events: none;
}

@keyframes scan {
0% { top: -100px; }
100% { top: 100%; }
}

.crt-overlay {
position: fixed;
top: 0; left: 0; width: 100%; height: 100%;
background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.1) 50%),
linear-gradient(90deg, rgba(255, 0, 0, 0.02), rgba(0, 255, 0, 0.01), rgba(0, 0, 255, 0.02));
background-size: 100% 3px, 3px 100%;
pointer-events: none;
z-index: 10;
}

.warning {
color: #ff3333;
border: 1px solid #ff3333;
padding: 10px;
text-align: center;
margin-bottom: 20px;
}

.input-wrapper {
display: flex;
align-items: center;
}

#observer-id {
background: transparent;
border: none;
color: #00ffff;
font-family: inherit;
font-size: 1.2em;
outline: none;
width: 100%;
padding-left: 10px;
}

.cursor {
animation: blink 0.8s step-end infinite;
}

@keyframes blink {
50% { opacity: 0; }
}

footer {
margin-top: 40px;
font-size: 0.7em;
opacity: 0.4;

}