/*alg stijl*/
* {
    box-sizing: border-box;
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}

html,
body {
    display: flex;
    flex-direction: column;
    background-color: #f4f6fb;
    margin: 0; /*aangeven dat er geen margin is*/
    padding: 0; /*geen padding dus geen lege plekken*/
    min-height: 100vh; /*relatief, zorgt dat het op de plek blijft*/
}

body {
    display: flex; /*main en footer netjes te plaatsen*/
    flex-direction: column; /*alles onder elkaar*/
    background-color: #f4f6fb;
}

/*header*/

header {
    background: linear-gradient(
        135deg,
        #232b61,
        #50588a
    ); /* W3Schools: https://www.w3schools.com/css/css3_gradients.asp */
    color: white;
    text-align: center; /*alles in het midden*/
    padding: 50px 20px; /*ruimte rondom*/
}

header h1 {
    font-size: 40px; /*grote koptekst*/
    font-weight: 600; /*iets dikker lettertype*/
}

/*nav*/

nav {
    background-color: #232b61;
    text-align: center;
    padding: 15px 0;
}

nav a {
    color: white;
    margin: 0 15px; /*ruimte*/
    text-decoration: none; /*geen onderstreping*/
    font-weight: 500;
    transition: color 0.3s; /* W3Schools: https://www.w3schools.com/css/css3_transitions.asp */
}

nav a:hover {
    color: #aab2ff; /*verandert kleur bij hover*/
}

/*main*/

main {
    flex: 1;
    padding: 40px 20px;
}

/* Info-blokken */
.info-blok {
    background-color: white;
    margin-bottom: 40px;
    padding: 30px;
    border-radius: 12px; /*W3Schools: https://www.w3schools.com/css/css3_borderradius.asp*/
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08); /*W3Schools: https://www.w3schools.com/css/css3_shadows.asp*/
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.info-blok h2,
.info-blok h3 {
    margin-bottom: 15px;
}

.info-blok p,
.info-blok ul,
.info-blok ol {
    margin-bottom: 15px;
    line-height: 1.6;
    margin: 0 200px 0 200px;
    text-align: center;
}

.info-blok ul li,
.info-blok ol li {
    text-align: center;
    list-style-position: inside;
}

.info-blok ol li::marker {
    font-weight: bold; /*als je <b> in de html gebruikte werd het cijfer van de ol li niet bold dus heb dit gemaakt om het cijfer bold te maken en heb het kopje zelf bold gemaakt met <b>*/
}

.info-blok img {
    display: block;
    max-width: 100%;
    height: auto;
    margin-top: 15px;
    border-radius: 10px; /*ronde hoeken voor img*/
}

.video-blok {
    margin: 0 200px 0 200px;
    text-align: center;
}

.video-blok iframe {
    width: 100%;
    max-width: 560px;
    height: 315px;
    border-radius: 10px; /*ronde hoeken*/
}

/*tabellen*/

.info-blok table {
    width: 100%;
    border-collapse: collapse; /*W3Schools: https://www.w3schools.com/css/css_table.asp*/
    margin-top: 20px;
    background-color: white;
}

.info-blok th,
.info-blok td {
    padding: 12px;
    text-align: left;
    border: 1px solid #ccc; /*grijze rand*/
}

.type-titel {
    font-weight: 700;/*in had <h3> gebruikt in <td> maar dat is niet netjes dus heb class toegepast.*/
    text-align: center;
}

th {
    font-size: 1.2em;
    font-weight: bold;
}


.info-blok th {
    background-color: #232b61;
    color: white;
}

.info-blok tr:nth-child(even) {
    background-color: #f2f2f2;
}

.info-blok caption {
    font-weight: bold;
    margin-bottom: 10px;
}

/*formulier*/

.form-blok {
    background-color: white;
    padding: 25px;
    margin: 0 auto 40px auto;
    width: 50%;
    border-radius: 12px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

form input,
form textarea,
form select,
form button {
    width: 100%;
    padding: 10px;
    margin-bottom: 15px;
    border-radius: 5px;
    border: 1px solid #ccc;
}

textarea {
    resize: vertical; /*W3Schools: https://www.w3schools.com/cssref/pr_text_resize.asp*/
    min-height: 100px;
    max-height: 200px;
}

form button {
    background-color: #232b61;
    color: white;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s;
}

form button:hover {
    background-color: #50588a;
}

.radio-group {
    display: flex;
    gap: 20px;
}

.check-group {
    display: flex;
    gap: 20px;
}

.check-group label {
    display: block;
    margin-bottom: 5px;
}

/*footer*/

footer {
    background-color: #232b61;
    text-align: center;
    color: white;
    padding: 20px;
    margin-top: auto; /*zodat dat footer onderaan blijft*/
}

@media (max-width: 768px) {
    .form-blok {
        width: 80%;
    }
}

@media (max-width: 480px) {
    header h1 {
        font-size: 2em; /*em = relatieve verhouding (expres niet gebruiks voor heel mijn css maar gehuiden voor responsive)*/
    }

    nav a {
        display: block;
        margin: 8px 0;
    }

    .video-blok iframe {
        height: 200px;
    }
}