/* Algemene styling */
body {
    background-color: #c2c5aa;
}

.row {
    display: flex;
    flex-wrap: wrap;
}

.col-6 {
    flex: 1; /* Zorgt ervoor dat de kolommen gelijk verdeeld worden */
    padding: 10px; /* Geef ruimte tussen de kolommen */
}

.backgroundHome {
    background-image: url('programmerscreen.jpg');
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover; /* Zorgt ervoor dat de afbeelding het scherm vult */
    background-position: center; /* Centreer de afbeelding */
    width: 100%;
    height: 100vh; /* Hoogte van 100% van de viewport */
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 20px; /* Zorgt voor extra ruimte rondom de titel */
}

.navbar {
    background-color: #656d4a;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1em;
    font-family: 'Lucida Sans', sans-serif;
}

.navbar a {
    color: #c2c5aa;
    text-decoration: none;
    padding: 0.5em 1em;
}

.navbar a:hover {
    background-color: #414833;
    color: white;
}

.footer {
    font-size: large;
    text-align: center;
}

.HomePagina {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    height: 100vh;
}

/* Responsieve afbeeldingen */
img {
    max-width: 100%; /* Zorgt ervoor dat afbeeldingen niet breder zijn dan hun container */
    height: auto; /* Houdt de aspect ratio */
}

.titleHome {
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    color: #656d4a;
    text-shadow: 2px 0 #c2c5aa;
    text-align: center;
    font-size: 5vw; /* Past zich aan op basis van schermbreedte */
    padding: 10px;
}

.buttonHome {
    background-color: #656d4a;
    color: #c2c5aa;
    border: none;
    width: 20vw; /* Wordt aangepast aan de schermbreedte */
    margin: 2em auto;
    padding: 1em;
    text-align: center;
    cursor: pointer;
    font-size: 1.2em; /* Vergroot de tekst in de knop */
    transition: background-color 0.3s ease; /* Voeg animatie toe */
}

.buttonHome:hover {
    background-color: #414833; /* Verander de kleur bij hover */
}

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {

    .backgroundHome {
        background-attachment: scroll; /* Vermijd een vaste achtergrond op kleine schermen */
        height: auto; /* Pas de hoogte aan voor kleinere schermen */
    }
    .row {
        flex-direction: column; /* Kolommen worden onder elkaar geplaatst */
        text-align: center; /* Centreer de tekst voor mobiele apparaten */
    }

    .col-6 {
        width: 100%; /* Zorgt ervoor dat de kolommen 100% breed worden */
        margin: 0 auto; /* Centraal op de pagina */
    }

    /* Pas de volgorde van de kolommen aan zodat de afbeelding onder de tekst komt */
    .col-6:nth-child(1) {
        order: 1; /* Tekst komt eerst */
    }

    .col-6:nth-child(2) {
        order: 2; /* Afbeelding komt daarna */
    }

    .keyboardHome {
        width: 100%; /* Afbeelding neemt de volledige breedte in */
        margin-top: 20px; /* Ruimte tussen de tekst en de afbeelding */
        height: auto; /* Houdt de originele verhoudingen */
    }

    .titleHome {
        font-size: 8vw;
    }

    .buttonHome {
        width: 80%; /* Zorgt ervoor dat de knop de breedte van het scherm gebruikt */
    }

    img {
        width: 100%; /* Afbeeldingen passen volledig op het scherm van mobiele telefoons */
    }
}

/* Breekpunt voor tablets (min-width: 600px en max-width: 992px) */
@media only screen and (min-width: 600px) and (max-width: 992px) {
    .titleHome {
        font-size: 6vw;
    }

     .row {
        flex-direction: row; /* Kolommen naast elkaar */
    }

    .col-6 {
        width: 50%; /* Elke kolom neemt 50% breedte */
    }

    .keyboardHome {
        width: 80%; /* Pas de breedte van de afbeelding aan */
        margin-top: 16%; /* Ruimte boven de afbeelding */
    }

    .buttonHome {
        width: 50%; /* Brede knoppen voor tablets */
    }
    
    .navbar {
        flex-direction: column; /* Stacks de navigatie-items verticaal */
        align-items: flex-start;
    }

    .navbar a {
        display: none; /* Verberg de links standaard */
        width: 100%; /* Zorgt ervoor dat links 100% van de breedte innemen */
        padding: 1em;
        text-align: left;
    }

    .navbar a.active {
        display: block; /* Toon alleen actieve links wanneer het hamburger-menu is geklikt */
    }

    .navbar .menu-icon {
        display: block;
        cursor: pointer;
        font-size: 2em;
        color: #c2c5aa;
    }
}


/* Breekpunt voor laptops/desktops (min-width: 992px) */
@media only screen and (min-width: 992px) {
    .titleHome {
        font-size: 4vw;
    }

    .buttonHome {
        width: 20%;
    }

    .navbar {
        flex-direction: row;
    }

    .navbar a {
        display: inline-block;
    }

    .navbar .menu-icon {
        display: none; /* Verberg het hamburger-menu op grotere schermen */
    }
    .col-6 {
        width: 50%; /* Elke kolom blijft 50% breedte op grotere schermen */
    }

    .keyboardHome {
        width: 80%;
        height: auto;
    }
}

/* Andere secties */
.aboutHome {
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    color: #414833;
    font-size: 3vw;
    margin: 20px;
}

.textAbout {
    margin: 20px;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    color: #414833;
}

.keyboardHome {
    width: 80%;
    height: auto; /* Zorg ervoor dat de hoogte ook flexibel is */
    margin-top: 16%;
}

/* Hamburger-menu knop styling */
.menu-icon {
    display: none; /* Verberg standaard, zichtbaar alleen op kleinere schermen */
}