/* 
ALGEMENE KAART STYLING 
*/
.card {
    height: 100%; 
    transition: transform 0.2s; /*transition zorgt ervoor dat de elementen de transformatie van de kaart voor een bepaalde tijd uitvoeren*/
}

.card-body {
    display: flex; /*display flex zorgt ervoor dat de elementen in een rij worden weergegeven*/
    flex-direction: column; /*flex direction column zorgt ervoor dat de elementen in een kolom worden weergegeven*/
    height: 100%; /*height 100% zorgt ervoor dat de kaart de volledige hoogte van de container inneemt*/
}

.card-text {
    flex-grow: 1; /*flex grow 1 zorgt ervoor dat de tekst de rest van de ruimte inneemt*/
    margin-bottom: 1rem; /*margin bottom 1rem zorgt ervoor dat er een margin aan de onderkant wordt toegevoegd*/
}

/*
TEKST STYLING
deze styling zorgt ervoor dat de tekst allemaal dezelfde font heeft. Daarnaast heb ik een line height toegevoegd voor meer leesbaarheid. 
*/

h1 {
    font-size: 2rem; 
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

h2 {
    font-size: 1.5rem; 
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

h3 {
    font-size: 1.25rem; 
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

p {
    line-height: 1.5rem;
    font-size: 1rem; 
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

a {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* 
BUTTON STYLING 
*/

.btn-primary {
    align-self: flex-start; /*align self flex start zorgt ervoor dat de knop aan de linkerkant wordt geplaatst*/
    margin-top: auto;
    background-color: #003366;
    border-color: #003366;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.btn2 {
    padding: 0px 0px;
    border-radius: 5px; /*border radius 5px zorgt ervoor dat de knop een ronde rand krijgt*/
    text-decoration: none; /*text decoration none zorgt ervoor dat er geen tekst decoratie wordt toegevoegd*/
    margin-left: 10px; /*margin left 10px zorgt ervoor dat er een margin aan de linkerkant wordt toegevoegd*/
}


/*
STYLING AFBEELDINGEN IN KAARTEN
*/

.card-img-top {
    height: 200px; /*height 200px zorgt ervoor dat de afbeelding een hoogte van 200px heeft*/
    object-fit: cover; /*object fit cover zorgt ervoor dat de afbeelding de volledige breedte van de kaart inneemt*/
}

/*
STYLING HEADER EN FOOTER
*/

.Header img, .Footer-fluid img {
    width: 100%; /*width 100% zorgt ervoor dat de afbeelding de volledige breedte van de pagina inneemt*/
    height: auto; /*height auto zorgt ervoor dat de afbeelding de hoogte aanpast aan de breedte*/
    display: block; /*display block zorgt ervoor dat de afbeelding in een blok wordt weergegeven*/
}

.Header, .Footer-fluid {
    width: 100%; /*width 100% zorgt ervoor dat de afbeelding de volledige breedte van de pagina inneemt*/
    padding: 0; 
    margin: 0; 
}

.Footer-fluid {
    margin-top: 4rem; /*margin top 4rem zorgt ervoor dat er een margin aan de bovenkant wordt toegevoegd*/
}


/* 
STYLING QUIZ
*/

.quiz-questions .h5.mb-3 {
    font-weight: 700;
}

.quiz .card {
    border: 2px solid #004C99;
    border-radius: 0;
    box-shadow: none;
}
 
legend {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

label {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* 
STYLING BACK LINK
*/

.back-link {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: #000;
    font-weight: 500;
}

.back-link:hover {
    text-decoration: none;
    color: #004C99;
}

.back-arrow {
    width: 20px;
    height: 20px;
    margin-right: 8px;
}