/* Hacker Terminal Styles */
.hacker-terminal {
  background-color: #000;
  border: 1px solid #0F0;
  border-radius: 5px;
  padding: 20px;
  font-family: 'Courier New', Courier, monospace;
  color: #0F0;
  max-width: 800px;
  margin: 0 auto;
  box-shadow: 0 0 10px #0F0;
  position: relative;
  overflow: hidden;
}

.hacker-terminal::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(
    0deg,
    rgba(0, 255, 0, 0.1),
    rgba(0, 255, 0, 0.1) 1px,
    transparent 1px,
    transparent 2px
  );
  background-size: 100% 4px;
  animation: scan 1.5s linear infinite;
  pointer-events: none;
  opacity: 0.4;
}

@keyframes scan {
  0% {
    transform: translateY(-50%);
  }
  100% {
    transform: translateY(50%);
  }
}

.hacker-terminal-content p {
  margin: 0;
  line-height: 1.5;
  white-space: pre-wrap; /* Allows wrapping and respects whitespace */
}

.hacker-terminal-content .prompt {
  color: #0F0;
}

.hacker-terminal-content .output {
  color: #0F0;
}

.cursor {
  display: inline-block;
  background-color: #0F0;
  width: 10px;
  height: 1.2em;
  animation: blink 1s step-end infinite;
  margin-left: 5px;
  vertical-align: middle;
}

@keyframes blink {
  from, to {
    background-color: transparent;
  }
  50% {
    background-color: #0F0;
  }
}

/* Glitch effect on hover */
.hacker-terminal-content .output:hover {
  animation: glitch 0.25s linear 3;
}

@keyframes glitch{
  0% {
    text-shadow: 0.05em 0 0 rgba(0, 255, 0, 0.75),
                 -0.05em -0.025em 0 rgba(0, 0, 0, 0.75),
                 -0.025em 0.05em 0 rgba(0, 255, 0, 0.75);
  }
  15% {
    text-shadow: 0.05em 0 0 rgba(0, 255, 0, 0.75),
                 -0.05em -0.025em 0 rgba(0, 0, 0, 0.75),
                 -0.025em 0.05em 0 rgba(0, 255, 0, 0.75);
  }
  16% {
    text-shadow: -0.05em -0.025em 0 rgba(0, 255, 0, 0.75),
                 0.025em 0.035em 0 rgba(0, 0, 0, 0.75),
                 0.05em 0 0 rgba(0, 255, 0, 0.75);
  }
  49% {
    text-shadow: -0.05em -0.025em 0 rgba(0, 255, 0, 0.75),
                 0.025em 0.035em 0 rgba(0, 0, 0, 0.75),
                 0.05em 0 0 rgba(0, 255, 0, 0.75);
  }
  50% {
    text-shadow: 0.05em 0.025em 0 rgba(0, 255, 0, 0.75),
                 0.05em 0 0 rgba(0, 0, 0, 0.75),
                 0 -0.05em 0 rgba(0, 255, 0, 0.75);
  }
  99% {
    text-shadow: 0.05em 0.025em 0 rgba(0, 255, 0, 0.75),
                 0.05em 0 0 rgba(0, 0, 0, 0.75),
                 0 -0.05em 0 rgba(0, 255, 0, 0.75);
  }
  100% {
    text-shadow: -0.05em 0 0 rgba(0, 255, 0, 0.75),
                 -0.025em -0.05em 0 rgba(0, 0, 0, 0.75),
                 -0.025em -0.05em 0 rgba(0, 255, 0, 0.75);
  }
}