:root {
--terminal-bg: #1e1e1e;
--terminal-fg: #d4d4d4;
--terminal-accent: #0db9d7;
}

body {
margin: 0;
padding: 0;
background-color: transparent;
color: #0000cc;
font-family: "Terminal", sans-serif;
text-align: center;
overflow-x: hidden;
}

h1 {
font-size: 48px;
color: var(--accent);
margin-top: 20px;
}

.marquee {
color: var(--accent);
font-weight: bold;
font-size: 24px;
margin: 20px 0;
}

.content {
background-color: var(--terminal-bg);
color: var(--terminal-fg);
font-family: "Cascadia Code", Consolas, "Courier New", monospace;
border: 1px solid #333;
box-shadow: inset 0 0 10px rgba(0,0,0,0.8);
padding: 20px;
margin: 20px auto;
width: 80%;
text-align: left;
line-height: 1.5;
}

.blinking {
color: var(--terminal-accent);
font-weight: normal;
display: inline-block;
padding: 4px 8px;
background: rgba(13, 185, 215, 0.1);
border-radius: 4px;
}

.content p {
margin: 8px 0;
}

@keyframes blink {
0%, 50%, 100% { opacity: 1; }
25%, 75% { opacity: 0; }
}

.input {
background: transparent;
border: none;
outline: none;
color: #cfcfcf;
font-family: inherit;
font-size: 1em;
flex: 1;
}

.counter {
margin: 40px 0;
font-size: 14px;
color: var(--accent);
}

#bg-container {
position: fixed;
top: 0; left: 0;
width: 100%; height: 100%;
z-index: -1;
}