body {
  margin: 0;
  background: #fff;
  overflow: hidden;
  font-family: 'Segoe UI', sans-serif;
  background-image: 
    radial-gradient(at 20% 20%, rgba(8,42,121,0.6) 0px, transparent 60%),
    radial-gradient(at 80% 60%, rgba(58,131,240,0.3) 0px, transparent 40%),
    radial-gradient(circle at 50% 50%, #fff 0%, transparent 100%),
  url('./asset/noise_texture.png');
}

#scene {
  position: relative;
  width: 100vw;
  height: 100vh;
  transition: transform 1s ease-in-out;
  transform-origin: 50% 40%;
}
canvas {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  z-index: 0;
  fill: #ffdee2
}

#overlay-text {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  z-index: 1;
}

#overlay-text h1 {
  font-size: clamp(1.5rem, 4vw, 3rem);
  animation: wave 3s ease-in-out infinite alternate;
  margin: 0;
  transition: opacity 0.5s;
}

#overlay-text p {
  font-size: clamp(1rem, 2vw, 1.5rem);
  color: #555;
  margin: 0.5em 0 0;
  transition: opacity 0.5s;
}

#contact {
  position: fixed;
  bottom: 40px;
  width: 100%;
  text-align: center;
  font-family: sans-serif;
  color: #333;
  opacity: 0.85;
  font-size: 1rem;
  z-index: 2;
}

#contact a {
  color: #000;
  text-decoration: none;
  font-weight: bold;
}

#contact a:hover {
  text-decoration: underline;
}

@keyframes wave {
  0% { transform: translateY(-3px); }
  100% { transform: translateY(3px); }
}

#footer {
  position: fixed;
  bottom: 10px;
  width: 100%;
  text-align: center;
  font-size: 0.8rem;
  color: #999;
  font-family: sans-serif;
  opacity: 0.6;
  z-index: 2;
}

#footer a {
  color: #666;
  text-decoration: none;
}

#footer a:hover {
  text-decoration: underline;
  color: #000;
}

/* NYE SEKTIONER */

/* Wrapper for terminal */
#terminal-wrapper {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 190px;
  height: 190px;
  z-index: 3;
  transition: transform 0.3s ease;
}

#terminal-wrapper:hover {
  transform: scale(2.5) translate(-30%, -30%);
}

/* Terminalens SVG */
#terminal-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
}

/* Canvas lag bagved SVG */
#crt-bg, #crt-stripes {
  position: absolute;
  top: 12.2%; /* Matcher SVG viewBox position */
  left: 11.7%; /* Matcher SVG viewBox position */
  width: 73.2%; /* Skaleret til at matche terminal skærm området */
  height: 48.8%; /* Skaleret til at matche terminal skærm området */
  pointer-events: none;
  z-index: 1;
  border-radius: 4px; /* Lille afrunding for at matche terminal skærm */
}

#crt-stripes {
  z-index: 1;
}
/* Dynamisk tekst i SVG */
#terminal-text {
  font-family: monospace;
  font-size: 20px;
  white-space: pre;
}