/* Algemene stijlen voor de body en het notepad */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    overflow-x: hidden;
    margin: 0;
}

a {
    text-decoration: none;
}

/* Notepad instellingen */
.notepad {
    position: relative;
    left: 3em;    /* 3em van de linkerzijde */
    right: 3em;   /* 3em van de rechterzijde */
    max-width: calc(100% - 6em);  /* Breedte wordt aangepast met de 3em marges aan beide zijden */
    height: calc(90vh - 40px);   /* Verhoog de hoogte (90vh minus de padding) */
    font-family: 'Courier New', monospace;
    background-color: #f0f0f0;
    border: 1px solid #ccc;
    padding: 20px;
    white-space: pre-wrap;
    box-sizing: border-box;  /* Zorgt ervoor dat de breedte inclusief padding wordt berekend */
    overflow-x: hidden;  /* Voorkomt dat de tekst horizontaal uitloopt */
    z-index: 2;
}

/* Titel binnen de notepad */
.notepad h1 {
    margin: 0;          /* Verwijdert de marge boven en onder het <h1> element */
    padding: 0;         /* Verwijdert de padding */
    line-height: 1.2;   /* Pas de regelhoogte aan indien nodig */
}

/* Paragraaf instellingen binnen de notepad */
.notepad p {
    margin: 0;          /* Verwijdert de marge boven en onder het <p> element */
    padding: 0;         /* Verwijdert de padding */
    line-height: 1.5;   /* Regelhoogte voor het <p> element */
}

/* Responsieve stijl voor de kruis knop */

.close-button a {
    text-decoration: none;
    color: inherit;
}

.close-button a:hover {
    color: #242424;
}

/* Stijl voor de achtergrondafbeelding */
.bg-image {
    background-image: url(../images/background.png);
    background-repeat: no-repeat;
    background-size: cover;
    filter: blur(5px);
    position: absolute;
    height: 100vh;
    width: 100%;
    z-index: -1;
}

/* Specifieke stijl voor wanneer het scherm kleiner is dan 800px */
@media screen and (max-width: 800px) {

    .close-button {
        z-index: 3;
        position: absolute;
        right: 0.5em;
        font-size: 2.5em; /* Vergroot het kruis voor mobiel */
        color: #ff0000;
        background-color: transparent;
        border: none;
        cursor: pointer;
    }
    .notepad {
        display: flex;
        left: 1em;
        right: 1em;
        top: 6em;
        max-width: calc(100% - 2em);  /* Zorgt ervoor dat de notepad niet uitloopt */
        height: calc(100%-2em);   /* Pas de hoogte aan voor mobiel */
        justify-content: center;
        flex-direction: column;
        font-size: small;
    }

    /* Maak de kruis knop groter en verplaats deze */
    .close-button {
        font-size: 3em; /* Verhoog de grootte voor mobiel */
        top: 1.5em;     /* Verplaats de knop naar de juiste positie */
    }

    /* Pas de achtergrondafbeelding aan voor mobiel */
    .bg-image {
        background-image: url(../images/background-phone.png);
        background-position: top;
    }

    /* Verberg de file-afbeelding voor kleinere schermen */
    .bestand {
        display: none;
    }

    figcaption {
        display: none;
    }
}

/* Stijl voor grotere schermen, zoals tablets en desktops */
@media screen and (min-width: 800px) {

    .close-button {
        z-index: 3;
        position: absolute;
        top: 3em;
        right: 1.5em;
        font-size: 2.5em; /* Vergroot het kruis voor mobiel */
        color: #ff0000;
        background-color: transparent;
        border: none;
        cursor: pointer;
    }
    .bg-image {
        background-image: url(../images/background.png);
        background-repeat: no-repeat;
        background-size: cover;
        filter: blur(5px);
        position: absolute;
        height: 100vh;
        width: 100%;
        z-index: -1;
    }
    
    .homepage {
        z-index: 1;
    }

    .bestand {
        height: 100px;
        filter: blur(5px);
    }

    figcaption {
        position: relative;
        left: 10px;
        text-shadow: 1px 1px black;
        color: rgba(255, 255, 255, 0.829);
        filter: blur(5px);
    }
}