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

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

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

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

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

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

/*****************/
/* MENU BUTTON 2 */
/*****************/
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 */
/********/
main {
    padding: 5em 0;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

main img {
    width: 20em;
}

main h2, main p {
    font-size: small;
}

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

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

/**************/
/* 1E SECTION */
/**************/
main {
    display: grid;
    grid-template-columns: 3em 12em 3em;
    grid-template-rows: 20em 1fr;
    justify-items: center;
}

section {
    grid-row: 2/3;
    grid-column: 2/3;
}

main button {
    background-color: transparent;
    border: 0;
}

main button img {
    width: 2em;
}

main section button img {
    width: 4em;
}

main > button:nth-of-type(1) {
    grid-row: 1/2;
    grid-column: 1/2;
    z-index: 0;
}

/**************/
/* 2E SECTION */
/**************/
section {
    display: flex;
    flex-direction: column;
    align-self: start;
    width: 20em;
}

main select {
    font-family: "Libre, sans-serif";
    color: var(--color-border);
    border-color: var(--color-border);
    padding: .5em;
    background-color: transparent;
}

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

    header nav:nth-of-type(1) li a {
        color: var(--color-accent);
    }
}

main section button:nth-of-type(1) {
    font-family: "Libre, sans-serif";
    color: var(--color-accent);
    border: none;
    padding: .7em;
    width: 16em;
    background-color: var(--color-text-footer);
}

section button:nth-of-type(2) {
    font-family: 'Libre', serif;
    color: var(--color-text-default);
    text-transform: uppercase;
    text-decoration: underline;
    text-align: start;
    padding: 1em 0;
}

section button:nth-of-type(2):hover {
    font-style: italic;
}

section button:nth-of-type(3) {
    color: var(--color-base);
    padding: .5em 4em;
    border: none;
    border-radius: .5em;
    background-color: var(--color-border);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5em;
    z-index: 0;
}

main section:nth-of-type(2) {
    padding-left: 3em;
}
 
main section button > img {
    filter: brightness(100%);
}

/*********/
/* TABLE */
/*********/

table {
    display: none;
    background-color: var(--color-text-footer);
    font-size: .7em;
    color: var(--color-accent);
    text-transform: lowercase;
    padding: .5em;
    border: .1em solid var(--color-accent);
    border-collapse: collapse;
    margin-bottom: 3em;
}

th, td {
    padding: .5em;
    border: .1em solid var(--color-accent);
}

@media (min-width:500px) {
    main {
        display: grid;
        grid-template-columns: 3em 20em 3em 26em;
        grid-template-rows: 1fr;
    }
    
    section {
        grid-row: 1/2;
        grid-column: 4/5;
    }

    main img {
        width: 25em;
    }

    main section:nth-of-type(2) {
        padding: 0;
    }
}

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

/* source: CSS-tricks, Thomas Plas, OpenAI ChatGPT */
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);
    text-align: center;
    font-size: .75em;
    padding-left: 0;

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