body 
{
    margin: 0; /*margin is de ruimte tussen de rand van het element en de inhoud van het element  */
    font-family: Arial, sans-serif; 
    transition: background-color 0.3s ease;
}

body.dark
{
    background-color: #111;
    color: #f1f1f1;
}

body.dark header,
body.dark h1,
body.dark h4,
body.dark button,
body.dark p,
body.dark a,
body.dark li,
body.dark footer
{
    color: #f1f1f1;
}

body.dark header,
body.dark h1,
body.dark button
{
    background-color: #666666;
}

body.dark button
{
    border: 1px solid #888;
}

.places {
    display: flex; /* flex is een layout model dat de elementen in een container flexibel kan positioneren en schalen */
    flex-direction: column; /* flex-direction is de richting waarin de flex-items worden geplaatst */
    align-items: center; /* align-items is de uitlijning van de flex-items langs de kruis-as */
    justify-content: center; /* justify-content is de uitlijning van de flex-items langs de hoofd-as */
    gap: 12px; /* gap is de ruimte tussen de flex-items */
}

header 
{
    background-color: rgb(187, 50, 138);
    padding: 15px 40px; /* padding is de ruimte tussen de rand van het element en de inhoud van het element */
    position: relative;
}

h1 
{
    color: white;
    font-size: 35px;
    margin: 0;
}

h4 
{
    color: white;
    font-size: 25px;
    margin: 0;
}

ul 
{
    display: flex;
    flex-direction: row;
    gap: 20px;
    list-style-type: none; /* list-style-type is de stijl van de lijstitems */
    padding: 0;
    margin: 0;
}

button 
{
    background-color: rgb(237, 109, 192);
    border: 2px solid rgba(255, 255, 255, 0.8);
    border-radius: 15px; /* border-radius is de afronding van de hoeken van het element */
    color: white;
    padding: 15px 40px;
    text-align: center; /* text-align is de uitlijning van de tekst in het element en hoe het staat hier staat het in het midden */
    text-decoration: none; /* text-decoration is de decoratie van de tekst in het element en hier staat het op geen decoratie */
    display: inline-block; /* display is de weergave van het element */
    font-size: 16px;
    margin: 5px 2px;
    cursor: pointer; /* cursor is de cursor van de muis en hoe het word laten zien */
    box-shadow: 0 0 0 1px rgba(255,255,255,0.2);
}

body.dark button
{
    background-color: #666666;
    border: 2px solid #d9d9d9;
    color: #f1f1f1;
}

.hoek-knop
{
    position: absolute;
    top: 15px;
    right: 20px;
    text-decoration: none;
}

.hoek-knop button
{
    padding: 12px 20px;
    font-size: 14px;
    margin: 0;
}

main 
{
    display: flex;
    justify-content: space-evenly;
    gap: 30px;
    margin-top: 30px;
    flex-wrap: wrap; /* flex-wrap is de manier waarop de flex-items worden gewrapt in de container dus dan staan ze anders op de pagina */
} 

main img 
{
    display: block; /* display block is dat het word weergegeven als een blok */
    width: 300px;
    height: 300px;
    object-fit: cover; /* object-fit is de manier waarop de inhoud van het element wordt aangepast aan de grootte van het element */
}

footer 
{
    text-align: center;
    font-size: 15px;
    color: black;
    display: flex;
    justify-content: space-around; /* justify-content space-around is dat er niet alleen ruimte binnen is maar ook om de rand van het element heen */
    gap: 20px;
    margin-top: 30px; /* margin-top is de ruimte tussen de rand van het element en de inhoud van het element maar dan aan de bovenkant */
}