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

/* Body styling and centering */
body {
  background: #050505;
  color: #00ff7f;
  font-family: "Courier New", Courier, monospace;
  font-size: 15.5px;
  line-height: 1.4;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  position: relative;
  text-shadow:
    0 0 4px rgba(0, 255, 120, 0.35),
    0 0 10px rgba(0, 255, 120, 0.15);
}

/* Wallpaper background with hue and brightness tweaks */
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('wallpaper.jpg') no-repeat center center fixed;
  background-size: cover;
  filter: hue-rotate(100deg) brightness(1.05) contrast(1.1);
  pointer-events: none;
  z-index: -2;
}

/* CRT overlay grid effect */
body::after {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background-color: rgba(0, 255, 0, 0.12);
  mix-blend-mode: overlay;
  z-index: -1;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,0.02),
    rgba(255,255,255,0.02) 1px,
    rgba(0,0,0,0) 2px,
    rgba(0,0,0,0) 4px
  );
}

/* Terminal container */
.terminal {
  width: 720px;
  height: 420px;
  padding: 1.2em; /* space inside border */
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
  transform: perspective(800px) scale(1.01);
  border-radius: 18px;
  box-shadow:
    inset 0 0 50px rgba(0, 255, 120, 0.3),
    0 0 80px rgba(0, 255, 120, 0.2);
}

/* Green border for the monitor effect */
.terminal::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 18px;
  pointer-events: none;
  border: 2px solid rgba(0, 255, 120, 0.15);
}

/* Inner radial shading */
.terminal::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 18px;
  pointer-events: none;
  background: radial-gradient(
    ellipse at center,
    rgba(0,0,0,0) 55%,
    rgba(0,0,0,0.4) 100%
  );
}

/* Scrollable content area inside terminal */
.content {
  position: absolute;
  top: 1em;
  left: 1em;
  right: 1em;
  bottom: 3.5em; /* space for footer */
  overflow-y: hidden;
  font-family: "Courier New", Courier, monospace;
  font-size: 15.5px;
  line-height: 1.4;
}

/* Boot messages styling */
.boot {
  color: #00ff7f;
  text-shadow:
    0 0 6px rgba(0, 255, 120, 0.6),
    0 0 12px rgba(0, 255, 120, 0.25);
}

/* Status messages styling */
.status {
  color: #009944;
  text-shadow:
    0 0 3px rgba(0, 153, 68, 0.6),
    0 0 6px rgba(0, 153, 68, 0.25);
}

/* Prompt line */
.prompt {
  color: #00ff7f;
  text-shadow:
    0 0 6px rgba(0, 255, 120, 0.6),
    0 0 12px rgba(0, 255, 120, 0.25);
}

/* Blinking cursor */
.cursor {
  animation: blink 1s steps(1) infinite;
}

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

/* Dynamic log area */
.log {
  margin-top: 0.5em;
  line-height: 1.4;
  white-space: pre-line;
  color: #00ff7f;
  text-shadow:
    0 0 4px rgba(0, 255, 120, 0.35),
    0 0 8px rgba(0, 255, 120, 0.2);
}

/* Footer pinned at bottom */
.footer {
  position: absolute;
  bottom: 1em;
  left: 1em;
  right: 1em;
  color: #006633;
  font-size: 13px;
  text-shadow:
    0 0 4px rgba(0, 255, 120, 0.35),
    0 0 8px rgba(0, 255, 120, 0.2);
}

/* Links inside terminal */
.links a {
  display: block;
  color: #00ff7f;
  text-decoration: none;
  margin: 6px 0;
}

.links a:hover {
  color: #ff3333;
}

/* Glitch effect */
.glitch {
  animation: glitch 0.2s;
}

@keyframes glitch {
  0% { transform: translate(0); }
  50% { transform: translate(-2px, 1px); }
  100% { transform: translate(0); }
}

/* Hidden text reveal */
.hidden span {
  visibility: hidden;
  color: #cc0000;
}

.hidden:hover span {
  visibility: visible;
}