/* Theme variables */
:root {
  --bg-color: #0c0f17;
  --card-bg: #161b22;
  --card-border: #3cffb5;
  --font-color: #c9d1d9;
  --font-green: #3af27c;
  --font-blue: #50d0ff;
  --highlight-green: #4afc90;
  --border-radius: 12px;
  --box-shadow: 0 0 10px rgba(60, 255, 181, 0.5);
}

body {
  background-color: var(--bg-color);
  color: var(--font-color);
  font-family: 'JetBrains Mono', 'Courier New', monospace;
}

.crt {
  background-color: var(--bg-color);
  color: var(--highlight-green);
  font-family: 'JetBrains Mono', 'Courier New', monospace;
  box-shadow: 0 0 4px var(--highlight-green), 0 0 10px var(--highlight-green);
  background-image: repeating-linear-gradient(
    to bottom,
    rgba(138, 255, 128, 0.05),
    rgba(138, 255, 128, 0.05) 1px,
    transparent 2px,
    transparent 4px
  );
  animation: scanlines 1s linear infinite;
  line-height: 1.4;
}

@keyframes scanlines {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 0 100%;
  }
}

.crt svg {
  width: 100%;
  height: auto;
  fill: var(--highlight-green);
}