/* Zorgt voor een klassieke terminal look */
body {
    background-color: black; /* Zwarte achtergrond */
    color: limegreen; /* Groene tekstkleur zoals in oude terminals */
    font-family: monospace;
    text-shadow: 0 0 5px #00ff00;
}

main {
    padding: 20px; /* Pas de padding aan zoals je wilt */
}

p {
    line-height: 1.6; /* Optioneel, voor betere leesbaarheid */
}

.LogoMenuGrid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    Grid-template-areas: 
            "a a a a b"
            "d d d d d";
    justify-content: stretch;
    align-content: start; 
    width: 100%;
}

.MobileMenu{
    grid-area: a;

}
.Hambugermenu{
    display: none;
    grid-area: b;
    width: 40px;
    height: 30px;
    text-align: center;
    padding: 10px;
} 
.hamburgerImg {
    width: 30px;
}
pre {
    font-family: monospace;
    font-size: 16px;
    line-height: 1;
    color: limegreen; /* Zorgt voor groene tekst in het ASCII-gebied */
}

.ascii-art{
    display: none;
    grid-area: c;
    width: 110px;
    justify-self: center;
}
.title{
    /*align-self: start;*/
    grid-area: d;
    max-width: 100%;
    justify-self: center;
}

.TitelKlein {
    display: none; /* Verberg .TitelKlein standaard */
    grid-area: d;
    font-size: 200%;
}
nav {
    display: grid;
    justify-content: center;
    font-size: x-large;
}

.nav-list {
    display: flex;
    list-style: none; /* Verwijdert standaard opsommingstekens */
    padding: 0;
    margin: 0;
    gap: 20px; /* Gelijke ruimte tussen items */
}

.nav-list-Hamburger{
    display: grid;
    grid-template-rows: 1;
    font-size: x-large;
    text-align: center;
    text-align: center;
    width: 100%;
}

.nav-list-Hamburger {
    width: 100%;
    list-style-type: none;
}

.col1 {
    width: 100%;
    padding: 10px;
}

a {
    color: #00ff00; /* Standaard groen */
    text-decoration: none; /* Geen onderstreping voor terminal-look */
}

a:visited {
    color: #00cc00; /* Iets donkerder groen na klikken */
}

a:hover {
    color: #33ff33; /* Lichter groen bij hover */
    text-shadow: 0 0 5px #33ff33; /* Gloei-effect bij hover */
}

a:active {
    color: #009900; /* Nog donkerder groen bij klikken */
}

.col {
    width: 100%; /* Pas dit aan naar wens */
    padding: 10px; /* Optioneel, voor meer ruimte binnen de cellen */
}

@keyframes blink {
    50% {
        opacity: 0;
    }
}


.cursor {
    display: inline-block;
    background-color: #00ff00;
    width: 10px;
    height: 20px;
    animation: blink 0.6s infinite;
}

.terminal {
    width: 80ch; /* Breedte zoals een oude terminal */
    margin: 50px auto;
    padding: 20px;
    border: 2px solid #00ff00;
    box-shadow: 0 0 10px #00ff00;
    overflow-y: auto;
    height: 400px;
}

.Linkframe{
    display: block flex;
    flex-wrap: wrap;
    justify-content: space-around;
    flex: 1 1 0;
    /* display: block; */ /* in mobile modus */

    padding: 15px;
}

.Linkframe > *{

    margin: 15px;
    height: 100%;
    padding: 20px 15px 15px 15px;
}

.Linkframe > div > h2{
    font-size: 200% ;
    margin: 15px;
    height: 100%;
    /* padding: 0px 15px 15px 15px; */
}


/*hamburegermenu*/

.MobileMenu {
    display: none;
    position: absolute; /* Absolute positionering ten opzichte van de dichtstbijzijnde relatief gepositioneerde ouder */
    top: 50px; /* Afstand van de bovenkant van de .Hambugermenu */
    left: 0; /* Lijn uit aan de linkerkant van de .Hambugermenu */
    width: calc(100% - 6px ); /* Neem de volledige breedte van .Hambugermenu */
    background: black; /* Achtergrondkleur, optioneel */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); /* Een schaduw voor betere zichtbaarheid, optioneel */
    z-index: 1000; /* Zorg dat het menu boven andere inhoud verschijnt */
    border: solid 3px limegreen;
}

.menu-toggle {
    display: none;
}

/* Styling voor het menu label dat als hamburger icoon dient */
.menu-icon {
    cursor: pointer;
    display: block; /* Zorg dat het label als een blok element wordt weergegeven */
}

/* Toon en verberg het navigatiemenu wanneer de checkbox is aangevinkt */
.menu-toggle:checked ~ .MobileMenu {
    display: flex;
}

@media (max-width: 700px) {
    * {
        font-size: 110%;
    }
    .Linkframe > div > * {
        margin-top: 15px;
        font-size: 150%;
    }
    .LogoMenuGrid{
        Grid-template-areas: 
            "a a a a b"
            "c d d d d";
    }
    .title {
        display: none; /* Verberg het element bij schermbreedte kleiner dan 700px */
    }
    .ascii-art{
        display: block;
    }
    .TitelKlein {
        display: block; /* Toon .TitelKlein bij schermen kleiner dan 700px */
    }
    .Hambugermenu{
        display: block;
    }
    .Linkframe{
        display: block;
    }
    nav{
        display: none;
    }

}

.typewriter > p{
    font-size: llarger;
}

/* Container voor het typewriter-effect */
.typewriter {
    /* Eventueel centreren */
    width: fit-content;
    margin: 0 auto;
    /* Zorgen dat we niet naar de volgende regel springen */
    white-space: nowrap;
    /* Zorg dat tekst verborgen wordt buiten de breedte */
    overflow: hidden;
    /* Dit is de breedte die de animatie uiteindelijk moet krijgen (aantal tekens) */
    width: 100%; /* Pas aan naar het aantal tekens dat je hebt */
     border-right: 2px solid #0f0;  /* 'Cursor' lijntje */
    
    
    /* De eigenlijke type-animatie, in twee delen:
       1) typing: bouwt de breedte op in stappen (letter voor letter).
       2) blink-caret: laat het lijntje knipperen. */
    animation: typing 5s steps(40, end), blink-caret 0.8s step-end 8;
  }
  
  /* De eigenlijke 'typen' animatie */
  @keyframes typing {
    from { 
      width: 0; 
    }
    to { 
      width: 40ch; /* hetzelfde als hierboven instellen */ 
    }
  }
  
  /* Cursor knipperen */
  @keyframes blink-caret {
    50% { border-color: transparent; }
  }