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

body {
  background: #000;
  overflow: hidden;
  font-family: 'Courier New', Courier, monospace;
  color: #00ff41;
}

canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

#logo {
  z-index: 1;
}

#content {
  position: fixed;
  z-index: 2;
  bottom: 20%;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  pointer-events: none;
}

#intro {
  font-size: clamp(0.8rem, 3.5vw, 1.1rem);
  color: #00ff41;
  text-shadow: 0 0 8px rgba(0, 255, 65, 0.6);
  white-space: nowrap;
}

#links {
  margin-top: 1rem;
  position: relative;
  display: flex;
  justify-content: center;
  gap: clamp(0.3rem, 1.5vw, 1.6rem);
}

#links a {
  padding: 0.4rem clamp(0.5rem, 2vw, 1rem);
  color: #00ff41;
  text-decoration: none;
  border: 1px solid #00ff41;
  border-radius: 3px;
  font-size: clamp(0.75rem, 2.5vw, 0.95rem);
  pointer-events: auto;
  transition: background 0.3s, color 0.3s, box-shadow 0.3s;
  white-space: nowrap;
}

@media (hover: hover) {
  #links a:hover {
    background: #00ff41;
    color: #000;
    box-shadow: 0 0 12px rgba(0, 255, 65, 0.7);
  }
}

#ls-btn.active {
  background: #00ff41;
  color: #000;
  box-shadow: 0 0 12px rgba(0, 255, 65, 0.7);
}

#email {
  margin-top: 1rem;
  font-size: clamp(0.7rem, 2.8vw, 0.9rem);
  color: #00ff41;
  text-shadow: 0 0 8px rgba(0, 255, 65, 0.6);
  pointer-events: auto;
}

#email a {
  color: #00ff41;
  text-decoration: none;
  transition: text-shadow 0.3s;
}

@media (hover: hover) {
  #email a:hover {
    text-shadow: 0 0 12px rgba(0, 255, 65, 0.9);
  }
}

#sudo-prompt {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 0.8rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  pointer-events: auto;
  white-space: nowrap;
}

#sudo-prompt.hidden {
  display: none;
}

#sudo-prompt label {
  font-size: clamp(0.7rem, 2.5vw, 0.85rem);
  color: #00ff41;
  text-shadow: 0 0 8px rgba(0, 255, 65, 0.6);
}

#sudo-pw {
  background: transparent;
  border: none;
  border-bottom: 1px solid #00ff41;
  color: #00ff41;
  font-family: 'Courier New', Courier, monospace;
  font-size: clamp(0.7rem, 2.5vw, 0.85rem);
  outline: none;
  width: 8rem;
  caret-color: #00ff41;
  text-shadow: 0 0 8px rgba(0, 255, 65, 0.6);
}

#sudo-pw::placeholder {
  color: rgba(0, 255, 65, 0.3);
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}

#sudo-pw.shake {
  animation: shake 0.4s ease;
  border-bottom-color: #ff4141;
  color: #ff4141;
}

#ls-output {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 0.8rem;
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.4rem;
  pointer-events: auto;
}

#ls-output.hidden {
  display: none;
}

#ls-output a {
  font-size: clamp(0.7rem, 2.5vw, 0.85rem);
  color: #00ff41;
  text-decoration: none;
  transition: text-shadow 0.3s;
}

@media (hover: hover) {
  #ls-output a:hover {
    text-shadow: 0 0 8px rgba(0, 255, 65, 0.8);
  }
}