body, html {
  margin: 0;
  padding: 0;
  background-color: black;
  font-family: 'Courier New', monospace;
  overflow: hidden;
  height: 100%;
}

canvas {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 0;
}

.terminal {
  position: relative;
  z-index: 1;
  color: #00ff00;
  padding: 40px;
  max-width: 600px;
  margin: 100px auto;
  background-color: rgba(0, 0, 0, 0.7); /* <-- this is the key line */
  border-radius: 8px;
}
.terminal h1,
.terminal p {
  text-shadow: 0 0 5px #00ff00;
}


.typewriter {
  overflow: hidden;
  border-right: 0.1em solid #00ff00;
  white-space: nowrap;
  animation: typing 2s steps(30, end), blinkCaret 0.75s step-end infinite;
  font-size: 18px;
}

.delay-1 {
  animation-delay: 2s;
}

.delay-2 {
  animation-delay: 4s;
}

.delay-3 {
  animation-delay: 6s;
}

@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}

@keyframes blinkCaret {
  from, to { border-color: transparent }
  50% { border-color: #00ff00 }
}

.blink {
  animation: blinkText 1s steps(2, start) infinite;
  
}


.visitor-counter {
  position: absolute;
  bottom: 20px;
  right: 20px;
  color: #00ff00;
  font-family: 'Courier New', monospace;
  font-size: 14px;
  background-color: rgba(0, 0, 0, 0.6);
  padding: 8px 12px;
  border-radius: 6px;
  text-shadow: 0 0 5px #00ff00;
  z-index: 10;
}






















@keyframes blinkText {
  to { visibility: hidden; }
}