body {
  background: black;
  color: #00ff99;
  font-family: 'Courier New', monospace;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 100px;
  text-shadow: 0 0 1px #00ff99, 0 0 3px #00ff99;
}

.logo {
  width: 200px;
  margin-bottom: 40px;
}

.terminal-container {
  position: relative;
  z-index: 1;
  background-color: rgba(17, 17, 17, 0.85);
  border: 1px solid #00ff99;
  padding: 20px;
  width: 90%;
  max-width: 1200px;
  font-size: 1.1rem;
  white-space: pre-wrap;
}

.terminal-output {
  max-height: 70vh;
  overflow-y: hidden;
  scrollbar-width: none;          /* Firefox */
  -ms-overflow-style: none;       /* Internet Explorer 10+ */
}

.terminal-output::-webkit-scrollbar {
  display: none;                  /* Chrome, Safari */
}

.terminal-output > div {
  margin: 0;
  padding: 0;
  line-height: 1.1;
}

.terminal-line {
  display: flex;
  align-items: center;
  font-family: 'Courier New', monospace;
  font-size: 1.1rem;
  color: #00ff99;
  margin-top: -100px;
  padding-top: 0;
}

.prompt {
  margin-right: 5px;
}

#terminal-input {
  background: transparent;
  border: none;
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  outline: none;
  caret-color: #00ff99;
  width: 100%;
}

/* Red for previous commands */
.old-command {
  color: #ff4444;
}

/* Fade + Glitch animation */
.ascii-art {
  white-space: pre;
  font-family: 'Courier New', monospace;
  color: #00ff99;
  animation: fadeGlitch 2.8s ease-in-out;
}

@keyframes fadeGlitch {
  0% {
    opacity: 0;
    transform: scale(1.05);
    filter: contrast(2) brightness(1.4) saturate(2) hue-rotate(10deg);
  }
  25% {
    opacity: 1;
    transform: scale(1);
    filter: none;
  }
  35% {
    transform: scale(1.01) skewX(-1deg);
    filter: hue-rotate(-10deg);
  }
  45% {
    transform: none;
    filter: none;
  }
  100% {
    opacity: 1;
  }
}

.glitch-bg {
  background-color: #020;
}

/* CRT Overlay */
.crt-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0, 255, 0, 0.1) 0px,
    rgba(0, 255, 0, 0.1) 2px,
    transparent 2px,
    transparent 4px
  );
  mix-blend-mode: screen;
  animation: crtFlicker 0.25s infinite alternate;
  z-index: 3;
  border-radius: 4px;
}

@keyframes crtFlicker {
  0% {
    opacity: 0.95;
    transform: scale(1.001);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}