body
{
    margin: 0;
    padding: 0;
}

/* 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;
}

/* Ik heb linear-gradient gebruikt om een transparency layer te doen op mijn site, alle twee heb ik ze zwart gemaakt zodat de tekst beter leesbaar is. */

body
{
    background: 
    linear-gradient(rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3)),
    url("../images/background.jpg");
    background-size: cover;
    background-repeat: no-repeat;
}

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

/* Ik heb max-width gebruikt om ervoor te zorgen dat er geen overlapping tussen de image en de tekst zat */

.geschiedenis p
{
    background-color: rgba(0,0,0,0.6);
    color: rgb(224, 223, 223);
    max-width: 900px;
}

.geschiedenis h1
{
    background-color: rgba(243, 156, 18, 0.6);
    color: white;
    max-width: 900px;
}

.geschiedenis img
{
    float:right;
    position: absolute;
    left: 1000px;
    top: 350px;
    border-radius: 10px;
}

#geschiedenisCaption
{
    position: absolute;
    height: 25px;
    width: 300px;
    left: 990px;
    top: 760px;
    color: white;
    font-family: 'Lato', sans-serif;
}

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

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

/* 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;
}