body {
    font-family: 'Open Sans', sans-serif; /* Fonts Die gebruikt worden in de body */
    background-color: white; /*background color van de body */
    margin: auto; /*margins van de body */
    margin-bottom: 50px; /* zorgt ervoor dat de footer niet de laatste plaats over laat voor geen BR's */
}

header {
    background-color: rgb(233, 1, 233); /*kleur van de header */
    color: black; /*kleur van de tekst */
    padding: 10px; /*voegt een beetje space rond de header zodat er geen wit is van de body */
    text-align: center; /*centreer de text */
    width: auto; /*zet de wijde van de header op automatisch voor alle schermen*/
    height: auto; /*zet de hoogte van de header op automatisch voor alle schermen*/
}

footer {
    background-color: rgb(233, 1, 233); /*kleur van de footer */
    color: black; /*kleur van de tekst */
    padding: 10px; /*voegt een beetje space rond de footer zodat er geen wit is van de body */
    text-align: center; /*centreer de text */
    position: fixed; /*zorgt ervoor dat de footer volgt met het scherm */
    bottom: 0; /*zorgt ervoor dat de footer nog op het scherm komt anders gaat het meer naar beneden*/
    width: 100%; /*zorgt ervoor dat de width 100% van het scherm is */
}

.menu {
    display: flex; /*zorgt ervoor dat het menu de space pakt dat het kan pakken maar flexibel blijft*/
    justify-content: space-around; /*voegt evenveel space rond de items*/
    width: auto; /*zet de wijde van het menu op automatisch voor alle schermen*/
}

.menu a {
    flex: 1; /* krijgt de opties van flex-grow flex shrink en flex-basis met de setting op 1 is een beetje zoals initial*/
    color: black; /*kleur van de tekst */
    text-decoration: none; /*verwijdert de onderlijning dat je normaal ziet op hrefs */
    border: 2px solid black; /*maakt een border rond de menu van 2px groote zet het in solid en maakt het zwart */
    padding: 10px 20px; /* boven en onderkant is de eerst en de tweede is recht en links */
    background-color: #08e7d4; /*background color van de menu items */
    transition: background-color 0.3s ease; /* maakt een kleine animatie transition als je ervover hoverd*/
}

.menu a:hover {
    background-color: black; /*background color van de menu items worden black */
    color: white; /*kleur van de tekst wordt wit */
}

article, .contact-article {
    max-width: 800px; /*max width van de articles dat ze kunnen innemen op een scherm*/
    margin: 20px auto; /*margins van de article*/
    text-align: center; /*centers the text */
    color: black; /*kleur van de text */
    padding: 20px; /*space rond de article element*/
    background-color: #08e7d4; /*background kleur van de article element */
    border: 2px solid rgb(233, 1, 233); /*informatie border article element */
    border-radius: 8px; /* zorgt voor vloeiende box */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); /*maakr een kleine box shadow de 0s worden recht onder getoond*/
    margin-bottom: auto; /*laat plaats onder de article over */
}

article ul {
    list-style-position: inside; /*zet de ul buttons in het midden*/
    padding-left: 5px; /* zet het een beetje meer naar links */
}

.contact-article form {
    display: flex; /*zet de article form in contact op flex */
    flex-direction: column; /* veranderd het in ee column zodat het vanboven naar beneden gaat*/
    align-items: center; /*centreert de items*/
}

.contact-article input, .contact-article textarea {
    width: 95%; /*zet de width voor de input*/
    padding: 8px; /*laat wat plaats over voor de input*/
    margin-bottom: 16px; /*laat space tussen de input areas*/
}

.contact-article button {
    background-color: #08e7d4; /*kleur van de button in de forum */
    color: black; /*kleur van de tekst */
    border: 2px solid black; /*info over de border */
    padding: 10px 20px; /* padding space rond de button*/
    cursor: pointer; /* zorgt ervoor dat de curos veranderd in een vinger (pointer) als je op de knop hovered */
    transition: background-color 0.3s ease; /* transition animatie voor hover */
}

.contact-article button:hover {
    background-color: black; /*background color van de knop word black */
    color: white; /*kleur van de tekst wordt wit */
} 

.responsive-img {
    max-width: 10%; /*zorgt voor de size van de image op de home pagina*/
    height: 10%; /*zorgt voor de size van de image op de home pagina*/
    display: flex; /*zorgt ervoor dat de image op de home pagina flex is */
    margin: auto; /*veranderd de margins automatisch op welk scherm ook */
    margin-top: 10px; /*voegt een beetje plaats vanboven zodat de image niet in de article gaat */
}

.gallery {
    display: grid; /* zorgt ervoor dat de images in een grid worden getoond */
    grid-template-columns: repeat(2, 1fr); /* zorgt ervoor dat de grid getoond wordt per 2 images
    Het 1fr eenheid betekent dat de beschikbare ruimte gelijk wordt verdeeld tussen de kolommen (1 fractie betekent 
    1 deel beschikbaar*/ 
    gap: 10px; /*laat een gap tussen de columns*/
    margin: 10px; /*margins voor de images */
  }
  
  .gallery img {
    width: 100%; /*100% van de space van de image wordt gebruikt */
    height: auto; /*grote van de image wordt zelf bepaald */
  }

  .artistic-text {
    text-align: center; /* text wordt gecentreerd */
    font-family: 'Limelight', cursive; /* Limelight font wordt gebruikt in cursive */
  }

@media (max-width: 840px) {
    header {
        font-size: 70%; /*font-size van de */
        position: fixed; /*position van de header is fixed */
        width: 100%; /*width van de header */
        top: 0; /*zorgt ervoor dat de header vanboven blijft */
        z-index: 1; /* Voeg z-index toe om ervoor te zorgen dat de header bovenaan blijft */
    }

    .menu {
        font-size: 70%; /* You can keep the original size or adjust as needed */
        flex-direction: column; /*zorgt ervoor dat de menu in column wordt getoond*/
        display: flex; /*flex display*/
        justify-content: center; /*centreerd de content*/
        width: inherit; /*zorgt ervoor dat de menu goed in het midden wordt gezet*/
        margin: -10px; /*zorgt ervoor dat de menu goed in het midden staat*/
    }

    article, .contact-article {
        padding: 10px;
        margin-top: 340px; /* Aanpassing van de margin-top */
        margin-bottom: 70px; /* Add margin-bottom to create space above the footer */
    }

    .artistic-text {
        text-align: center; /*centreerd de text op phone */
        font-family: 'Limelight', cursive; /* Limelight font wordt gebruikt in cursive */
        margin-top: 340px; /*zorgt ervoor dat de artistic text onder de header start*/
      }

    .gallery {
        margin-bottom: 75px; /*zorgt ervoor dat je naar beneden kunt scrollen nog */
      }

    footer {
        width: 98%; /*width van de footer beetje adjusted voor text erop te laten*/
    }
    .responsive-img {
        max-width: 60vw; /*width van de image op de home pagina */
        height: 40vh; /*height van de image op de home pagina */
        margin-block-end: -60%;
        display: block;
    }   
}

@media (max-width: 1242px) {
    header {
        font-size: 110%; /*font size voor medium screens */
    }  
}