/* Grundlæggende indstillinger */
body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    background-color: #000; /* Helt sort baggrund */
    color: #00ff00; /* Klassisk grøn Matrix-tekst */
    font-family: 'Courier New', Courier, monospace; /* Monospace skrifttype */
    overflow: hidden; /* Forhindrer rullepaneler */
}

/* Canvas indstillinger */
#matrixCanvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1; /* Ligger i baggrunden */
}

/* Container til indholdet */
.content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    z-index: 10; /* Sørger for at teksten er forrest */
    position: relative;
    text-shadow: 0 0 5px #00ff00; /* Giver teksten et lille "glød" */
    pointer-events: none; /* Teksten blokerer ikke for canvas'et */
}

h1 {
    font-size: 3rem;
    margin-bottom: 20px;
    letter-spacing: 2px;
    color: #fff; /* Welcome-teksten er hvid for kontrast */
}

p {
    font-size: 1.2rem;
    margin: 5px 0;
}

/* Skrivemaskine-effekt */
.typewriter {
    overflow: hidden; /* Skjul tekst, der ikke er skrevet endnu */
    white-space: nowrap; /* Undgå linjeskift */
    margin: 0 auto;
    letter-spacing: .15em;
    animation: typing 2.5s steps(30, end);
}

/* Små forsinkelser for de forskellige linjer */
.delay-1 { animation-delay: 2.5s; animation-fill-mode: both; }
.delay-2 { animation-delay: 5s; animation-fill-mode: both; }

/* Skrivemaskine animation */
@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}