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

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

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: #ffffff;
    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 */

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

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

main
{
    font-family: 'Lato', sans-serif;
}

/* Ik heb ervoor gezorgd dat alle knoppen gecentered zijn en dat ze gelijk verspreid zijn. */

.centerContent
{
    display: flex;
    justify-content: center;
}

#lunchPlekken
{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px;
}

#lunchOptions li
{
    list-style-type: none;
    margin: 10px 85px;
    display: inline-block;
}

/* Ik heb een box-shadow gebruikt zodat het lijkt alsof die zweeft en het ziet er beter uit */

.lunchItem
{
    border: 2px solid black;
    padding: 10px;
    width: 800px;
    background-color: white;
    box-shadow: 5px 5px 5px grey;
}

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

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