/*Target alles*/
*
{
    padding: 0px;
    margin: 0px;
    font-family: Arial, Helvetica, sans-serif /*Speciale font voor alles*/
}

/*Achtergrond*/
#Index-header-bg-img
{
    width: 100%;
    height: 95vh;
    border-bottom: 1vh solid rgb(55, 55, 121); /*Border specifiek aan de onderkant*/
}

/*Logo links boven*/
#Index-header-logo-img
{
    position: absolute; /*Zorgt dat de plaats vast staat*/
    top: 0px;
    left: 5vw;
    right: 0px;
    width: auto;
    height: 20vh;
    padding: 0.5vw;
    border-radius: 0px 0px 10px 10px; /*Zorgt voor ronde corners, in dit geval linksboven rechtsboven 0, en links en rechts onder wel*/
    box-shadow: 2px 2px 10px white; /*Witte schaduw, 10px blur, 2px horizontaal en verticaal*/
    background-color: white;
}

/*Titel*/
#Index-header-title
{
    position: absolute; /*Zorgt dat de plaats vast staat*/
    top: 75vh;
    left: 0px;
    right: 0px;
    text-align: center;
    text-shadow: 2px 2px 10px white; /*Witte schaduw, 10px blur, 2px horizontaal en verticaal*/
    color: white;
    font-size: 6vw;
}

/*Tekst onder de titel*/
#Index-header-sub-title
{
    position: absolute; /*Zorgt dat de plaats vast staat*/
    top: 90vh;
    left: 0px;
    right: 0px;
    text-align: center;
    text-shadow: 2px 2px 10px white; /*Witte schaduw, 10px blur, 2px horizontaal en verticaal*/
    color: white;
    font-size: 2vw;
}

/*Navigation ul*/
#Index-header-navigation-ul
{
    display: flex;
    flex-wrap: wrap; /*Zorgt dat buttons onder elkaar kunnen staan als het nodig is*/
    margin-top: 3vh;
    list-style-type: none; /*Haalt die rondjes links van de text weg*/
    justify-content: space-evenly;
}

/*Navigation button*/
.Index-header-navigation-button
{
    display: flex;
    background-color: rgb(55, 55, 121);
    font-size: 1.5vw;
    color: white;
    text-decoration: none; /*Haalt dat lijntje onder de tekst weg*/
    padding: 0.5vw;
    border-radius: 10px; /*Zorgt voor ronde corners*/
    align-items: center;
    justify-content: center;
}

/*Navigation button als je met muis erover gaat*/
.Index-header-navigation-button:hover
{
    background-color: rgba(55, 55, 121, 0.4); /*Zorgt dat de button een andere kleur word als je met de muis erover gaat*/
}

/*Navigation button icon*/
.Index-header-navigation-button-icon
{
    margin-right: 0.5vw;
    height: 5vh;
    width: auto;
}

/*Main*/
#Index-main-section
{
    display: inline-block; /*Zorgt dat de elementen niet uit de section gaan, en maakt het een block element*/
    margin-top: 4vh;
    margin-left: 1.5vw;
    margin-right: 1.5vw;
}

/*Main title*/
#Index-main-section-title
{
    font-size: 3vw;
    margin-bottom: 1vh;
}

/*Main paragraph*/
.Index-main-section-p
{
    font-size: 1vw;
}

/*Main figcaption*/
.Index-main-section-figure
{
    float: right;
    padding: 0.5vw;
}

/*Main image's fagcaption*/
.Index-main-section-figure figcaption
{
    font-size: 0.8vw;
}

/*Main figcaption image*/
.Index-main-section-figure img
{
    border-radius: 10px; /*Zorgt voor ronde corners*/
    height: 50vh;
    width: auto;
}

/*Footer*/
footer
{
    display: flex;
    margin-top: 4vh;
    border-top: 1vh solid rgb(55, 55, 121);
    background-color: lightgray;
    justify-content: space-around;
}

/*Footer section*/
.Index-footer-section
{
    margin: 1vh 0px;
    background-color: white;
    border-radius: 10px; /*Zorgt voor ronde corners*/
    padding: 0.5vw;
}

/*Titel per section*/
.Index-footer-section-title
{
    font-size: 1.5vw;
}

/*Footer text paragraph*/
.Index-footer-section-p
{
    font-size: 0.75vw;
}

/*Extra small text voor in footer section*/
.Index-footer-section-small
{
    font-size: 0.7vw;
}

/*Images in footer sections*/
.Index-footer-section-img
{
    margin-top: 1vh;
    height: 5vh;
    width: auto;
    border-radius: 2px; /*Zorgt voor ronde corners*/
}

/*ul in footer section*/
.Index-footer-section-ul
{
    margin-left: 1vw;
}