body {
    margin:0;
    font-family: 'Libre', serif;
    color: var(--color-text-default);
    text-transform: uppercase;
    background-image: var(--background-main); 
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    background-position: center; 

    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/*************/
/* DE HEADER */
/*************/
/* source: Sanne 't Hooft */
header {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    padding: .3em;
}

header h1 {
    margin-right: auto;
    font-size: 1.2em;
    padding-left: .5em;
}

header button {
    appearance: none;
    background: none;
    border: none;
}

button > img {
    width: 2em;
}

header nav:nth-of-type(1) {
    position: relative;
}

header nav:nth-of-type(2) ul:nth-of-type(2) {
    display: flex; 
    gap: 1em;
    padding-left: 1em;
    padding-top: 4em;
}

header nav:nth-of-type(1) img {
    width: 1.5em;
}

header nav:nth-of-type(2) img {
    width: 1em;
}

/************/
/* HET MENU */
/************/
header nav:nth-of-type(1) {
    position: fixed;
    top: 0;
    right: 0;
    background-color: var(--color-base);
    translate: 100%;
    transition: translate .3s;
}

header nav:nth-of-type(1).toonLang {
    translate: 0%; 
}

header nav:nth-of-type(1) ul {
    padding: 1em;
    margin: 0;
}

header nav:nth-of-type(1) li a {
    display: flex;
    gap: 1em;
    color: var(--color-text-default);
    text-decoration: none;
    line-height: 2em;
    align-items: center;
}

header nav:nth-of-type(1) li img {
    width: 1em;
    height: 1em;
}

header nav:nth-of-type(2) {
    position: fixed; 
    top: 0;
    bottom: 0;
    right: 0;
    width: 13em;
    background-color: var(--color-accent);

    translate: 100%;
    transition:translate .3s;
}

header nav:nth-of-type(2).toonMenu {
    translate: 0%; 
}

header h1 a {
    text-decoration: none;
    color: var(--color-text-default);
}

@media (prefers-color-scheme: light) {
    header button:nth-of-type(1) img {
        filter: brightness(0);
    }

    button > img {
        filter: brightness(0);
    }
}

/*****************/
/* MENU BUTTON 1 */
/*****************/
header button:nth-of-type(1) img {
    width: 1.5em;
}

/*****************/
/* MENU BUTTON 2 */
/*****************/

header nav:nth-of-type(2) button {
    padding: 1em;
}

header nav:nth-of-type(2) button img {
    width: 2em;
}

nav:nth-of-type(2) ul:nth-of-type(1) {
    padding-left: 1em;
    list-style: none;
}

nav:nth-of-type(2) ul a {
    text-decoration: none;
    line-height: 2em;
}

ul {
    list-style: none;
}

ul a {
    color: var(--color-base);
}

main {
    padding-top: 3.5em;
    padding-bottom: 1.5em;
}

main h2 {
    font-size: .75em;
}

main ul a {
    color: var(--color-text-default);
}

/**************/
/* 1E SECTION */
/**************/
select {
    font: inherit;
    padding-right: .5em;
    color: var(--color-border);
    width: 8em;
    font-size: small;
    background-color: var(--color-base);
    border-color: var(--color-text-default);
}

@media (prefers-color-scheme: light) {
    select {
        color: var(--color-text-default);
        background-color: var(--color-accent);
        border-color: var(--color-text-default);
    }
}

section:nth-of-type(1) {
    display: flex;
    justify-content: space-between;
    padding: 1em;
}

/**************/
/* 2E SECTION */
/**************/
section:nth-of-type(2) {
    font-size: .75em;
}

section:nth-of-type(2) ul {
    display: grid;
    grid-template-columns: 1fr; 
    list-style: none;
    padding: 0; 
    margin: 0;
}

/******************/
/* RESPONSIVENESS */
/******************/
/* source: Ryan Yeung, OpenAi ChatGPT prompt: why doesn't my code work? */
@media (min-width:480px) {
    section:nth-of-type(2) ul {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width:600px) {
    section:nth-of-type(2) ul {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width:768px) {
    section:nth-of-type(2) ul {
        grid-template-columns: repeat(4, 1fr);
    }
}

section:nth-of-type(2) ul li {
    text-align: center; 
}

section:nth-of-type(2) ul li img {
    max-width: 100%; 
    height: auto; 
    display: block; 
}

section:nth-of-type(2) a {
    text-decoration: none;
}

/**********/
/* FOOTER */
/**********/
footer {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: auto;
    padding-bottom: 3em;
    padding-top: 1em;
    background-color: var(--color-accent);
    margin-top: 0;
    text-transform: none;
}

/* source: CSS-tricks, Thomas Plas*/
footer form {
    position: relative;
    display: flex; 
    grid-column-start: 2;
    grid-column-end: 4;
    grid-row-start: 1;
    grid-row-end: 1;
}

form svg {
    position: absolute;
    right: .4em;
}

input {
    width: 100%;
}

footer ul:nth-of-type(1) {
    display: flex;
    justify-content: center;
    gap: 2em;
    padding-left: 0;
    text-transform: none;
    font-size: .75em;

    grid-column-start: 1;
    grid-column-end: 5;
    grid-row-start: 2;
    grid-row-end: 3;
}

footer ul:nth-of-type(2) {
    color: var(--color-text-footer);
    font-size: .75em;
    padding-left: 0;

    grid-column-start: 2;
    grid-column-end: 4;
    grid-row-start: 3;
    grid-row-end: 4;
}

footer a {
    color: var(--color-base);
}

footer li {
    line-height: 1.5em;
    text-align: center;
}