:root {
  --bg: #0a0a0a;
  --fg: #33ff66;
  --dim: #157f36;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: var(--bg);
  color: var(--fg);
  font-family: "VT323", "Courier New", monospace;
  font-size: 22px;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.crt {
  position: relative;
  width: 100%;
  max-width: 720px;
  padding: 2rem;
}

/* scanlines façon CRT */
.crt::before {
  content: "";
  position: fixed;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    rgba(0, 0, 0, 0.22) 0 1px,
    transparent 1px 3px
  );
  pointer-events: none;
}

h1 {
  font-family: "Press Start 2P", "Courier New", monospace;
  font-size: 26px;
  text-shadow: 0 0 8px var(--fg);
  margin-bottom: 0.75rem;
}

.subtitle {
  color: var(--dim);
}

.label {
  margin: 1.5rem 0 0.5rem;
  color: var(--dim);
}

.menu {
  list-style: none;
}

.menu a {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  color: var(--fg);
  text-decoration: none;
  padding: 0.3rem 0.4rem;
  margin-left: -0.4rem;
}

.menu a:hover {
  background: rgba(51, 255, 102, 0.12);
}

.cursor {
  color: var(--dim);
}

.desc {
  color: var(--dim);
  font-size: 17px;
}

.desc::before {
  content: "— ";
}

footer {
  margin-top: 2rem;
  color: var(--dim);
  font-size: 16px;
}

.blink {
  animation: blink 1s steps(1) infinite;
}

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