body
{
    margin: 0;
    padding: 0;
    background-color: antiquewhite;
}

/* Ik heb de font family Lato gekozen omdat de site van `s-Hertogenbosch dezelfde font gebruikt */

main h1, p, h2
{
    font-family: 'Lato', sans-serif;
    padding: 20px;
}

nav
{
    background-color: #f39c12;
    font-family:lato, sans-serif;
}

hr
{
    height: 5px;
    border: 2px solid black;
    background-color: #f39c12;
    padding: 0px;
}

/* De navbar, ik heb de kleurenschema met een random kleuren generator gemaakt en dan zwart gekozen voor mijn tweede kleur */

nav ul 
{
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
}

nav ul li 
{
    list-style-type: none;
    margin: 25px;
    display: inline-block;
}

nav ul li a
{
    display: inline-block;
    padding: 8px 12px;
    color : white;
    background-color: white;
    text-decoration: none;
    color: #333333;
}

/* Ik heb transform gebruikt om ervoor te zorgen dat als je overheen hovered dat het eruit ziet alsof de tekst naar achter gaat waarop het op een knop lijkt */

ul li a:hover
{
    background-color: #c47900;
    color: white;
    transform: translateY(2px);
}

#headerLogo
{
    height: 50px;
    display: inline-block;
}

section
{
    margin: 20px;
    border-radius: 10px;
}

/* Zorgt ervoor dat alles even verspreid is. */

#typeSport
{
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}

.sportContent
{
    background-color: rgb(161, 161, 161);
    margin: 10px;

}

.sportImg
{
    height: 200px;
    width: auto;
    border-radius: 10px;
    border: 2px solid black;
}

a
{
    text-decoration: none;
    font-family: lato, sans-serif;
}

/* Ik was eerst van plan om verschillende kleuren te gebruiken, vandaar dat ik twee keer hetzelfde heb gedaan voor de verschillende classes */

.siteInfo h1
{
    background-color: rgba(243, 156, 18, 0.6);
    color: white;
}

.siteInfo p
{
    background-color: rgba(0,0,0,0.6);
    color: rgb(224, 223, 223);
}

footer
{
    position: absolute;
    bottom: auto;
    background-color: #f39c12;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.footerSection
{
    background-color: white;
    padding: 10px 0;
    font-family: 'Lato', sans-serif;
    color: black;
}