body {
    font-family: Arial, sans-serif;
    background-color: #f7f7f7;
}

.container {
    width: 80%;
    margin: 50px auto;
    padding: 20px;
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

button {
    padding: 10px 15px;
    background-color: #f5821f;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
}

button:hover {
    background-color: #d16a00;
}

.gedicht {
    font-family: 'Georgia', serif;
    margin: 20px auto;
    max-width: 500px;
    border: 1px solid #eee;
    padding: 20px;
    background-color: #fafafa;
}

.aanhef {
    font-weight: bold;
    font-size: 1.5em;
    margin-bottom: 20px;
}

.strofe {
    margin-bottom: 20px;
}

.strofe p {
    margin: 5px 0;
}

.afsluiting {
    margin-top: 40px;
    font-style: italic;
    /* andere stijlen voor afsluiting */
}

.feedback-container {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}
.feedback-textarea {
    flex: 1; /* neemt 1 deel van de beschikbare ruimte */
    margin-right: 20px; /* zorgt voor wat ruimte tussen de textarea en de tekst */
}
.gedicht-container {
    flex: 4; /* neemt 2 delen van de beschikbare ruimte */
    background-color: #f3f3f3; /* lichte achtergrond voor de tekst */
    padding: 10px;
    border-radius: 5px;
}
/* Basisstijlen die altijd van toepassing zijn */
input[type="text"],
textarea,
input[type="submit"] {
    width: 100%; /* Zorgt ervoor dat inputvelden de volledige breedte gebruiken */
    margin-bottom: 10px; /* Voegt ruimte toe onder de velden */
    box-sizing: border-box; /* Zorgt ervoor dat padding en borders inbegrepen zijn in de breedte */
}
/* Je kunt ook de marges en paddings aanpassen voor een betere mobiele weergave */
@media (max-width: 768px) {
    input[type="text"],
    textarea {
        padding: 10px; /* Grotere padding voor betere toegankelijkheid op aanraakschermen */
    }

    input[type="submit"] {
        padding: 12px 20px; /* Grotere knoppen zijn makkelijker te raken op aanraakschermen */
    }
}

.sinterklaas-image-container img {
    max-width: 30%; /* Zorgt ervoor dat de afbeelding nooit breder is dan de container */
    height: auto; /* Behoudt de oorspronkelijke beeldverhoudingen */
    display: block; /* Verwijdert eventuele standaard witruimte onder de afbeelding */
    margin: 0 auto; /* Centreert de afbeelding horizontaal indien de container breder is */
}

/* Stijlen voor het PNG-plaatje */
        .header-image {
            width: 100%;
            max-width: 150px; /* of de werkelijke breedte van je afbeelding */
            margin: 0 auto;
            display: block;
        }
        
        form {
            margin-top: 20px;
        }

/* Stijlen voor het laadscherm en de spinner */
        #laadscherm {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(255, 255, 255, 0.8);
            z-index: 9999;
        }
        
        #laadscherm div {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            text-align: center;
        }

        .spinner {
            margin: 20px auto;
            width: 50px;
            height: 40px;
            text-align: center;
            font-size: 10px;
        }

        .spinner > div {
            background-color: #333;
            height: 100%;
            width: 6px;
            display: inline-block;
            
            -webkit-animation: stretchdelay 1.2s infinite ease-in-out;
            animation: stretchdelay 1.2s infinite ease-in-out;
        }

        .spinner .rect2 {
            -webkit-animation-delay: -1.1s;
            animation-delay: -1.1s;
        }

        .spinner .rect3 {
            -webkit-animation-delay: -1.0s;
            animation-delay: -1.0s;
        }

        .spinner .rect4 {
            -webkit-animation-delay: -0.9s;
            animation-delay: -0.9s;
        }

        .spinner .rect5 {
            -webkit-animation-delay: -0.8s;
            animation-delay: -0.8s;
        }

        @-webkit-keyframes stretchdelay {
            0%, 40%, 100% { -webkit-transform: scaleY(0.4) }  
            20% { -webkit-transform: scaleY(1.0) }
        }

        @keyframes stretchdelay {
            0%, 40%, 100% { 
                transform: scaleY(0.4);
                -webkit-transform: scaleY(0.4);
            }  20% { 
                transform: scaleY(1.0);
                -webkit-transform: scaleY(1.0);
            }
        }

    /* Algemene container voor het formulier */
.form-container {
    max-width: 600px;  /* Maximale breedte voor het formulier */
    margin: 0 auto;   /* Centreert het formulier horizontaal */
    padding: 20px;    /* Geeft wat ruimte rondom het formulier */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Optionele schaduw voor diepte */
}

/* Stijlen voor labels en invoervelden */
input[type="text"],
textarea {
    font-family: Arial, sans-serif; /* Vervang dit met het gewenste lettertype */
    font-size: 16px; /* Vervang dit met de gewenste grootte */
    /* Voeg hier eventuele andere gewenste stijlen toe */
}

.form-container label,
.form-container input,
.form-container textarea {
    display: block;   /* Zorgt ervoor dat elk element zijn eigen regel inneemt */
    width: 100%;      /* Neemt de volledige breedte van de container in */
    margin-bottom: 15px; /* Ruimte tussen de velden */
}
/* Stijlen voor desktopschermen */
@media (min-width: 768px) { /* Deze stijlen worden alleen toegepast op schermen breder dan 768px */
    .form-container input[type="text"] {
        height: 20px;  /* Verhoogt de hoogte van de text inputvelden */
        padding: 10px; /* Voegt wat vulling toe voor betere zichtbaarheid */
        border: 1px solid #ccc;   /* Voegt een grijze rand toe */
        border-radius: 4px;       /* Maakt de hoeken licht afgerond */
        width: 100%;              /* Zorgt ervoor dat het inputveld de volledige breedte van de container inneemt */
        box-sizing: border-box;   /* Zorgt ervoor dat padding en border worden inbegrepen in de totale breedte/hoogte */
    }
}
/* Zorgt ervoor dat het 'Hobbies' textarea veld ook de volledige breedte van de container inneemt */
.form-container textarea {
    
    padding: 10px; /* Voegt wat vulling toe voor betere zichtbaarheid */
    border: 1px solid #ccc;   /* Voegt een grijze rand toe */
    border-radius: 4px;       /* Maakt de hoeken licht afgerond */
   
    width: 100%;              /* Zorgt ervoor dat het textarea veld de volledige breedte van de container inneemt */
    box-sizing: border-box;   /* Zorgt ervoor dat padding en border worden inbegrepen in de totale breedte/hoogte */
}

/* Stijlen voor de 'Maak gedicht' knop */
.form-container input[type="submit"] {
    background-color: #007BFF; /* Een mooie blauwe kleur */
    color: #ffffff;            /* Witte tekstkleur */
    padding: 10px 20px;        /* Vulling rondom de tekst */
    border: none;              /* Verwijdert de standaard rand */
    border-radius: 5px;        /* Maakt de hoeken iets afgerond */
    cursor: pointer;           /* Toont een handje-cursor bij hover */
    width: 80%;                /* Maakt de knop 80% van de container breedte */
    margin: 0 auto;            /* Centreert de knop horizontaal */
    display: block;            /* Zorgt dat de knop zijn eigen regel inneemt */
    transition: background-color 0.3s; /* Voegt een overgangseffect toe voor hover */
}

/* Hover-stijl voor de knop */
.form-container input[type="submit"]:hover {
    background-color: #0056b3; /* Een iets donkerdere blauwe kleur bij hover */
}

/* Stijlen voor het informatie blok */
.info-block {
    max-width: 90%;
    margin: 20px auto;
    padding: 20px;
    border-radius: 10px;
    background-color: #f4f4f4; /* Lichtgrijze achtergrondkleur */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Een subtiele schaduw voor diepte */
}

.info-block h2 {
    margin-top: 0;
}

.info-block p {
    margin: 10px 0;
}