:root {
    --border-radius: 5%;

    --main-bg-color: rgb(26, 167, 26);
    --secondary-bg-color: rgb(206, 133, 45);
    --extra-bg-color: beige;
    
    --hover-color: rgb(0, 32, 0);
    --link-color: rgb(136, 90, 34);
    
    --main-text-color: black;
    --secondary-text-color: green;
    --extra-text-color: white;

    --color-logo: greenyellow;

    --padding-xs: 0.5rem;
    --padding-s: 1rem;
    --padding-l: 2rem;
    --padding-xl: 3rem;

    --font-size-xxs: 0.5rem;
    --font-size-xs: 0.75rem;
    --font-size-s: 1rem;
    --font-size-m: 1.5rem;
    --font-size-l: 2rem;
    --font-size-xl: 3rem;
    --font-size-xxl: 4rem;
}

body {
    width: 75%;
    margin: auto;
    font-family: Arial, Helvetica, sans-serif;
    padding: 0.2rem;
    font-size: var(--font-size-s);
    background-color: var(--extra-bg-color);
}

img {
    width: 20%;
}

a {
    color: var(--link-color);
    text-decoration: none;
}

a img {
    width: 3rem;
}

.menu-selection a,
.blog a {
    color: var(--main-text-color);
}

header {
    display: flex;
    align-items: center;
    background-color: var(--main-bg-color);
    gap: 1rem;
    padding: var(--padding-xl);
}

nav {
    display: flex;
    width: 75%;
    justify-content: flex-end;
    align-items: center;
}

header nav li {
    display: inline;
}

.selected a {
    border-radius: var(--border-radius);
    background-color: var(--extra-bg-color);
}

ul li a {
    text-decoration: none;
    padding: var(--padding-xs);
}

ul li a:hover,
.gerecht-van-de-maand a:hover,
.about a:hover,
.blogpreviews a:hover,
input [type="submit"]:hover {
    background-color: var(--hover-color);
    color: var(--extra-text-color);
    border-radius: var(--border-radius);
}

header h1 a {
    text-decoration: none;
    color: var(--color-logo);
    font-size: var(--font-size-xl);
    text-align: center;
    font-family: "highest-praise", sans-serif;
    font-weight: 400;
    font-style: normal;
}

main h1 {
    color: var(--secondary-bg-color);
    text-align: center;
    font-size: var(--font-size-xxl);
    padding: var(--padding-s);
}

h2 {
    color: var(--main-bg-color);
    text-align: center;
    font-size: var(--font-size-xl);
    padding-top: var(--padding-s);
    padding-bottom: var(--padding-s);
    font-style: italic;
}

.gerecht-van-de-maand {
    padding: var(--padding-l);
    text-align: center;
}

.gerecht-van-de-maand h3 {
    color: var(--secondary-text-color);
    font-size: var(--font-size-l);
    font-weight: bold;
    padding: var(--padding-s);
}

.gerecht-van-de-maand p {
    color: var(--main-text-color);
    font-size: var(--font-size-s);
    padding-bottom: var(--padding-s);
    padding-left: 10%;
    padding-right: 10%;
    text-align: left;
}

.gerecht-van-de-maand a {
    text-decoration: none;
    padding: var(--padding-xs);
    text-align: center;
}

.blogpreviews,
.price {
    padding: var(--padding-s);
    text-align: center;
}

.blog-grid,
.menu-grid,
.team-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.blogpreviews article {
    display: flex;
    flex-direction: column;
    padding: var(--padding-s);
}

.blogpreviews article img,
.blog article img,
.team-grid article img,
.menu-selection img,
.about-greenbite img {
    width: 100%;
    border-radius: var(--border-radius);
}

.blogpreviews a {
    text-decoration: none;
    color: var(--secondary-text-color);
}

.about,
.about p {
    text-align: center;
    padding: var(--padding-s);
}

.about a {
    display: inline-block;
    padding: var(--padding-xs);
    text-decoration: none;
}

.contact,
.reservation,
input [type="submit"],
.blog {
    padding: var(--padding-s);
}

form {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: var(--padding-s);
    gap: 0.5rem;
}

label {
    align-self: flex-start;
}

input {
    width: 100%;
    padding: var(--padding-xs);
}

footer {
    background-color: var(--secondary-bg-color);
    font-size: var(--font-size-s);
    padding: var(--padding-xs);
    text-align: center;
}

.menu-selection {
    padding-left: var(--padding-l);
    padding-right: var(--padding-l);
}

.menu-selection h3,
.blogpreviews h3,
.blog h3 {
    padding: var(--padding-s);
    text-align: center;
    font-weight: bold;
}

.reservation select,
.reservation textarea {
    width: 100%;
    padding: var(--padding-xs);
    display: block;
}

.blog p {
    padding: var(--padding-xs);
    font-style: italic;
    font-size: var(--font-size-xs);
}

.blog p:first-of-type {
    font-style: normal;
    font-size: var(--font-size-s);
}

.main-about p,
.main-contact p {
    padding: var(--padding-s);
    padding-left: var(--padding-xl);
    padding-right: var(--padding-xl);
    text-align: center;
}

.main-about ul {
    display: flex;
    justify-content: center;
    gap: 1rem;
    padding: var(--padding-l);
}

.main-about strong {
    font-weight: bold;
}

.team {
    padding: var(--padding-l);
}

.team article h3 {
    text-align: center;
    font-weight: bold;
    font-size: var(--font-size-m);
    padding-top: var(--padding-s);
}

.team article p {
    padding: var(--padding-xs);
}

table {
    width: auto;
    margin: 1.5rem auto;
}

td {
    padding: var(--padding-xs) var(--padding-s);
    text-align: left;
}

td:first-child {
    padding-right: var(--padding-s);
}

td:last-child {
    padding-left: var(--padding-s);
}

.main-contact section {
    padding: var(--padding-s);
}

.maps {
    width: 100%;
    padding-bottom: var(--padding-l);
}

.about iframe {
    padding: var(--padding-s);
}

@media (max-width: 980px) {
    body {
        width: 90%;
    }

    main h1 {
        font-size: var(--font-size-xl);
    }

    header h1 a,
    h2 {
        font-size: var(--font-size-l);
    }

    .gerecht-van-de-maand h3 {
        font-size: var(--font-size-m);
    }

    .team article h3 {
        font-size: var(--font-size-s);
    }

    body,
    .gerecht-van-de-maand p,
    footer,
    .blog p:first-of-type {
        font-size: var(--font-size-xs);
    }

    .blog p {
        font-size: var(--font-size-xxs);
    }

    header nav li {
        display: flex;
    }

    .main-about ul {
        display: inline-block;
    }

    .about-greenbite ul li {
        padding: var(--padding-xs);
    }

    .blog-grid,
    .menu-grid,
    .team-grid {
        grid-template-columns: 1fr;
    }
}