:root {
    --hoofdkleur: #8B0000;
    --hoofdfont: Impact, 'Arial Narrow Bold', sans-serif;
    --body-text: Verdana, Arial, sans-serif;
}

body {
    margin: 5%;
    text-align: center;
    background-color: beige;
    font-family: var(--body-text);
}

h1,
h2 {
    color: var(--hoofdkleur);
    font-family: var(--hoofdfont);
}

h1 {
    font-size: 5rem
}

h2 {
    font-size: 2rem;
    margin-top: 3rem;
}

h2 strong {
    font-size: 3rem
}

h3 {
    color: var(--hoofdkleur);
    font-size: 2rem
}

strong {
    font-weight: bold;
}

article {
    font-size: 2rem;
    margin-top: 1rem;
    font-family: 'Lucida Sans', Verdana, sans-serif
}

img#potd {
    display: block;
    margin: 0 auto;
    text-align: center;
    padding-top: 1rem;
    border-radius: 5%
}

nav ul li {
    display: inline;
    font-family: var(--hoofdfont);
}

ul a {
    color: var(--hoofdkleur);
    font-size: 2rem;
    padding: 1rem;
    text-decoration: none;

}

ul a:hover {
    color: #670000;
    text-decoration: underline
}

.product-container {
    display: flex;
    justify-content: space-between;
}

.product {
    text-align: center;
    width: 18%;
    border: 1px solid #ddd;
    padding: 10px;
    margin: 5px;
}

.product img {
    max-width: 100%;
    height: auto;
    border-radius:5%
}

p{
    padding:1rem
}

article ul li{
    display:block
}

img{
    border-radius:5%
}