/* Reset */
* {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
}

body {
        font-family: Arial, sans-serif;
        background-color: #f9f9f9;
}

main {
        max-width: 1200px;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
}

.section,
.center {
        display: flex;
        flex-direction: row;
}

/* Header */
header h1,
header h2 {
        text-transform: uppercase;
}

header h1 {
        font-size: 3em;
}

header h2 {
        font-size: 2em;
        border-left: 15px solid #ffa600;
        padding-left: 0.5em;
}

header {
        border-bottom: 2px solid #ffa600;
        padding-bottom: 10px;
        max-width: 1200px;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        gap: 20px;
        padding: 20px 0px;
}

/* Navigation Bar */
nav.sticky {
        position: fixed;
        top: 20px;
        right: 20px;
        width: 250px;
        border: 2px solid #ffa600;
        border-radius: 10px;
        font-size: 1.4em;
        background: white;
        box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
        z-index: 5;
}



nav.sticky input {
        width: 100px;
        border-radius: 5px;
        height: 25px;
}

.container {
        margin-bottom: 100px;
}

nav ul {
        list-style: none;
}

nav li {
        padding: 10px;
}

nav li a {
        text-decoration: none;
        color: black;
        padding-right: 0;
        margin-right: 0px;
}

.natuur {
        color: white;
}

.col-orange {
        background-color: #ffa600;
}

.nav-head {
        color: white;
        text-transform: uppercase;
}

.hidden {
        font-size: 0px;
}

nav img {
        margin-left: 10px;
        width: 20px;
}

/* Footer */
footer {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        text-align: center;
        color: white;
        padding: 10px 0;
}

article {
        border-radius: 10px;
        padding: 10px;
}

.section div:nth-child(1) {
        width: 60%;
}

.section div:nth-child(2),
.section div:nth-child(3) {
        width: 40%;
}

.small-img {
        float: left;
        margin-right: 15px;
        width: 40%;
}

.small-img img {
        width: 100%;
        height: auto;
        display: block;
}

.center article {
        width: 33.33333%;
}

figure {
        position: relative;
        aspect-ratio: 400 / 225;
        margin-bottom: 10px;
}

figure img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 10px;
}

figure figcaption {
        position: absolute;
        bottom: 10px;
        right: 10px;
        color: white;
        text-shadow: 2px 2px 2px black;
}

p {
        animation: ease-in-out test 1s;
}

@keyframes test {
        0% {
                transform: scale(0.0);
        }

        50% {
                transform: translateY(50%);
        }
}

@keyframes move {

        50% {
                transform: translateY(50%);
                rotate: 20deg;
        }
}

figure:hover {
        animation: ease-in-out move 1s;
}



/* Paragraph Styling */
p {
        line-height: 1em;
        height: 3em;
        overflow: hidden;
}

.normal-paragraph {
        line-height: normal;
        height: auto;
        overflow: visible;
        display: block;
}

h3 {
        padding: 20px;
}


/* Responsive Design */

@media screen and (max-width: 1600px) {

        main,
        header {
                max-width: 80%;
        }

        footer {
                display: none;
        }

        .hidden {
                font-size: inherit;
        }

        nav.sticky {
                position: relative;
                top: inherit;
                right: inherit;
                width: 80%;
                border: none;
                border-radius: 0px;
                font-size: 1.4em;
                box-shadow: none;
                display: flex;
                justify-content: space-between;
                max-width: 1200px;
                margin: 0 auto;

        }

        nav.sticky input {
                width: 100px;
                border-radius: 5px;
                height: 25px;
        }

        nav img {
                display: none;
        }

        nav ul {
                list-style: none;
                display: flex;
                flex-direction: row;
        }

        nav li {
                padding: 10px;
        }

        nav li a {
                text-decoration: none;
                color: black;
                padding-right: 0;
                margin-right: 0px;
        }
}

@media screen and (max-width: 1200px) {

        nav.sticky {
                max-width: 80%;
                width: 100%;
        }

        .select {
                width: 100%;
                text-align: center;
        }

        .search {
                display: none;
        }

        nav ul {
                flex-direction: column;
        }

        figcaption {
                display: none;
        }

        .section div:nth-child(1) {
                width: 33.3333%;
        }

        .section div:nth-child(2) {
                width: 66.6666%;
        }

        .combined {
                display: flex;
                flex-direction: row;
                width: 100%;
        }

        .small-img {
                float: inherit;
                margin-right: inherit;
                width: inherit;
        }

        .small-img img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                border-radius: 10px;
        }

        figure img {
                width: 100%;
                height: 100%;
                aspect-ratio: 400 / 225;
                object-fit: cover;
                border-radius: 10px;
                max-height: 100%;
                max-width: 100%;
        }

        .normal-paragraph {
                line-height: 1em;
                height: 3em;
                overflow: hidden;
        }

        article {
                width: 100%;
        }
}

@media screen and (max-width: 900px) {

        h1,
        h2 {
                display: none;
        }

        header {
                padding: 0px;
                max-width: 100%;
        }

        nav.sticky {
                max-width: 100%;
        }

        p,
        .normal-paragraph {
                display: none;
        }

        .combined,
        .center {
                flex-direction: column;
                max-width: 100%;
        }

        .section {
                flex-direction: column;
        }

        .section div {
                width: 100%;
                margin-bottom: 20px;
        }


        .center article,
        .section article {
                width: 100%;
        }

        .section div:nth-child(1) {
                width: 100%;
        }

        .section div:nth-child(2) {
                width: 100%;
        }

        main {
                max-width: 100%;
        }

        figure:hover {
                animation: none;
        }

}