@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap');

body {
    font-family: 'Poppins', Arial, sans-serif; /* Ik gebruik het Poppins-lettertype */
    margin: 0; 
    padding: 0; 
    background-color: #FFFFFF; /* Ik zet de achtergrondkleur op wit */
    color: #2F1B23; /* De tekst krijgt een donkerbruine kleur */
}


header {
    position: fixed; /* Ik zet de header vast bovenaan */
    top: 0; /* De header komt bovenaan het scherm */
    width: 100%; /* De header is net zo breed als het scherm */
    background-color: #2F1B23; 
    color: #FFFFFF; 
    display: flex; /* Ik gebruik flexbox om de inhoud netjes uit te lijnen.
     De tutorial die ik heb gevolgd gaf aan dat Flexbox fijner en makkelijker te gebruiken is voor eenvoudige lay-outs.*/
    justify-content: space-between; /* De items worden gelijkmatig verdeeld */
    align-items: center; /* De items worden verticaal gecentreerd */
    padding: 10px 20px; /* Ik voeg padding toe aan de header */
    z-index: 1000; /* Ik zorg ervoor dat de header altijd boven andere elementen komt */
}


header nav {
    display: flex; /* Flexbox voor de navigatie-items */
    flex: 1; /* De navigatie neemt de volledige breedte in */
    justify-content: space-around; /* De links worden gelijkmatig verdeeld */
    align-items: center; /* De links worden verticaal gecentreerd */
}

header nav a {
    color: #FFFFFF; 
    text-decoration: none; /* Ik verwijder de onderstreping van de links */
    margin: 0 10px; /* Ik voeg ruimte toe tussen de links */
    font-weight: bold; /* De tekst van de links wordt vetgedrukt */
}


header .logo {

    font-size: 1.5rem; /* Het logo wordt groter */
    text-align: center; /* Ik centreer de tekst van het logo */
}

/* Ik voeg een onderstreping toe als je met de muis over een link gaat */
header nav a:hover {
    text-decoration: underline; 
}

.hero-container {

    color: #fff; 
}

.hero-image {
    height: auto; /* De hoogte van de afbeelding wordt automatisch aangepast */
    width: 100%; /* De afbeelding is net zo breed als het scherm */
}

.hero h1 {
    font-size: 3rem; /* Grote tekst voor de titel */
    padding: 20px; /* Padding rondom de tekst */
    border-radius: 5px; /* Ronde hoeken voor de tekst */
    margin-top: 50px; /* Ik voeg ruimte boven de tekst toe */
}


.hero-text {
    position: absolute; /* Ik zet de tekst bovenop de afbeelding */
    top: 20%; /* De tekst komt op 20% van de bovenkant van de afbeelding */
    left: 50vw; /* De tekst komt in het midden van het scherm */
    transform: translate(-50%, -50%); /* Ik zorg dat de tekst  in het midden komt */
    text-align: left; /* De tekst wordt links uitgelijnd */
}


section {
    padding: 100px 20px; /* Padding rondom de secties */
}


section h2 {
    color: #C69390; 
    margin-bottom: 20px; 
}



footer {
    background-color: #2F1B23; 
    color: #FFFFFF; 
    text-align: center; 
    padding: 20px; 
}


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

footer a:hover {
    text-decoration: underline; 
}

.back-to-top {
    position: fixed; /* De knop blijft vast aan de rechteronderkant van het scherm */
    bottom: 20px; 
    right: 20px; 
    background-color: #774A4D; 
    color: #FFFFFF; 
    border: none; 
    border-radius: 50%; 
    width: 50px; 
    height: 50px; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    cursor: pointer; 
    font-size: 1.5rem; 
}


.back-to-top:hover {
    background-color: #C69390; 
}


.over-mij-container {
    display: flex; 
    padding: 10px; 
    flex: 1; 
}


.over-mij-container img {
    display: flex; 
    padding: 10px; 
    flex: 1; 
    width: 30%; 
    margin: 1%; 
}