:root {
    color-scheme: light dark;
    --color-background: light-dark(#ffffff,#000000);
    --color-background-nav:#000000;
    --color-buttonspan: #ffffff;
    --color-logo: light-dark(#000000, #ffffff);
    --color-films: #00bee6;
    --color-eten: #a0dc00;
    --color-nieuws: #ff0;
    --color-info: #ffa000;
    --color-tekst: #000000;
    --color-nav-tekst: #ffffff;
    --color-fc-streep: #DB0202;
    --color-hover: #ffffff; 
    --focus-nav-a: #8b8a8a; 
}

@font-face {
    font-family: 'rhode';
    src: url('../fonts/rhode.ttf') format('truetype'),
}

@font-face {
    font-family: 'aaux';
    src: url('../fonts/aaux.ttf');
}

body {
    margin: 0;
    padding: 0;
    line-height: 1;
    font-family: Arial, sans-serif;
    background-color: var(--color-background);
    overflow-x: hidden;
    color: var(--color-tekst);
    letter-spacing: .02em;
    -webkit-font-smoothing: antialiased;
}

::selection {
    text-shadow: none;
    background: var(--color-textselect);
}

header {
    position: sticky;
    overflow: hidden;
}

body > nav {
    position: absolute;
    top: 0;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    z-index: 1000;
    overflow-x: hidden;
    overflow-y: hidden;
    display: flex;
    flex-direction: row-reverse;
    align-items: flex-end;
    justify-content: space-evenly;
    background-color: var(--color-background-nav);
    transition: .6s;
    right: -14.6em;
    top: -16.5em;

    height: fit-content; 
    width: fit-content;  
}

body > nav ul {
    padding: 1em;
}

body > nav a {
    text-decoration: none;
    color: var(--color-nav-tekst);

    font-family: "rhode";
    letter-spacing: 1px;
    font-weight: lighter;
    font-size: 3.2em;
    text-transform: uppercase;
}


nav:has(.toonMenu) {
    height: fit-content;
}

body > nav ul li:nth-of-type(1) a,
body > nav ul li:nth-of-type(2) a, 
body > nav ul li:nth-of-type(3) a  {
    padding-bottom: .5em;
    padding-right: 1em;
}

body > nav ul li:nth-of-type(4) a {
    padding-right: 1em;
}

.underline {
    text-decoration: underline;
    text-decoration-thickness: .15em;
    text-decoration-color: inherit;
    text-underline-offset: .2em;
}

body > nav ul li:nth-of-type(1) a:hover {
    color: var(--color-films);

}

body > nav ul li:nth-of-type(2) a:hover {
    color: var(--color-eten);
}

body > nav ul li:nth-of-type(3) a:hover {
    color: var(--color-info);
}

body > nav ul li:nth-of-type(4) a:hover {
    color: var(--color-nieuws);
}


body > nav button {
    padding: 1em;
    order: 1;
    border: none;
    appearance:none;
    height: 6.5em;
    background-color: var(--color-background-nav);
    cursor: pointer;
}

body > nav ul:not(section nav ul) {
    background-color: var(--color-background-nav)
}

body > nav ul:not(section nav ul) li {
    display: flex;
    align-items: center;
    justify-content: center;
}

body > nav button span {
	display:block;
	width: 2.1em;
	height: .35em;
	background-color: var(--color-buttonspan);
	grid-row-start: 1;
	grid-column-start: 1;
}

body > nav button span:nth-child(1) {
	translate: 0 -.35em -.5em;
    transition: .3s;
    transition-delay: .3s;
}
  
body > nav button span:nth-child(2) {
	translate: none;
    transition: .3s;
    transition-delay: .3s;
}
  
body > nav button span:nth-child(3) {
	translate: 0 .35em .5em;
    transition: .3s;
    transition-delay: .3s;
}


body >  nav.toonMenu {
    background-color: var(--color-background-nav);
    transition: .6s;
    right: 0em;
    top: 0em;
    z-index: 10000000;
    overflow-x: none;
}

body > nav.toonMenu button {
    padding-top: 3.5em;
    transition: .3s;
}

body > nav.toonMenu span:nth-child(1) {
	translate:0 0;
	rotate: 45deg;
    transition: .3s;
    transition-delay: .3s;
}
  
body > nav.toonMenu span:nth-child(2) {
	scale: 0;
    transition: .3s;
    transition-delay: .3s;
}

body > nav.toonMenu span:nth-child(3) {
	translate:0 -.7em;
	rotate: -45deg;
    transition: .3s;
    transition-delay: .3s;
}

section section {
    position: fixed;
    top:0;
    bottom:0;
    pointer-events: none;
    overflow:hidden;
}

section section div {
    pointer-events: all;
    padding: 1em;
}

section section:nth-of-type(1) {
    z-index: 5;
    left:2.1em;
    padding-top:8.5em;
    z-index: 4;
    width: calc(100% - 2.5em* 5);
    padding-bottom: 7.5em;
    margin-right: 2em;
    cursor: default;
}

section section:nth-of-type(2) {
    z-index: 2;
    right: 7.5em;
    width: calc(100% - 2.5em* 5);
    max-width: 52.5em;
    padding-top: 4em;
    padding-bottom: 2.5em;
    cursor: default;
}

section section:nth-of-type(3) {
    z-index: 3;
    right: 6.5em;
    width: calc(100% - 2.5em* 4);
    max-width: 52.5em;
    padding-top: 13.125em;
    padding-bottom: 16.25em;
    cursor: default;
}


section section:nth-of-type(4) {
    z-index: 1;
    right: 4.25em;
    width: calc(100% - 1.875em* 4);
    max-width: 47.5em;
    padding-top: 7.25em;
    padding-bottom: 5em;
    cursor: default;
}

section section.active {
    overflow-y: auto;
    z-index: 100;
}

h1 {
    font-family: "rhode";
    font-size: 4.3em;
    letter-spacing: 1px;
    font-weight: lighter;
    color: var(--color-logo);
    margin-left: 0.7em;
    margin-top: 0.5em;
    text-decoration: line-through;
    text-decoration-color: var(--color-fc-streep);
    text-decoration-thickness: 0.3em;
    text-transform: uppercase;

}

h2 {
    font-family: "rhode";
    letter-spacing: 1px;
    font-weight: lighter;
    font-size: 2.188em;
    text-transform: uppercase;
}

h3 {
    color: var(--color-tekst);
}

p {
    font-size: 1.375em;
    font-family: 'aaux';
    font-weight: lighter;
    width: 90%;
    line-height: 1.4;
    margin-top: 0;
}

a {
    color: inherit;
}

section a:not(section section:nth-of-type(1) div a):hover {
    text-decoration: none;
}

main button:not(div div button) {
    cursor: pointer;
    border: none;
    background: none;
    font-family: "rhode";
    font-size: 1.125em;
    text-transform: uppercase;
    border-bottom: solid var(--color-tekst) 0.3em;
}

main button:hover {
    color: var(--color-hover);
    border-bottom: solid var(--color-hover) 0.3em;
}

li {
    text-decoration: none;
}

article button {
    color: var(--color-tekst);
}

img {
    display: block;
    width: 90%;
}

a:focus {
    outline: 2px solid var(--color-hover);
    background-color: var(--color-background-nav);
    color: var(--color-nav-tekst);
}


button:focus {
    outline: 2px solid var(--color-hover);
    background-color: var(--color-background-nav);
    color: var(    --color-nav-tekst); 
}

nav a:focus {
    outline: 2px solid var(--color-hover);
    color: var(--color-hover);
    background-color:var(--focus-nav-a) ;
}





@media (min-width: 90em) {
    section section:nth-of-type(1) {
        width: calc(100% - 2.5em * 5);
        width: 77.5em;
        left: calc(50% - 90em / 2 + 2.5em);
    }

    section section:nth-of-type(2) {
        left: calc(50% - 90em / 2 + 2.5em * 12);
    }

    section section:nth-of-type(3) {
        left: calc(50% - 90em / 2 + 31.25em);
    }

    section section:nth-of-type(4) {
        left: calc(50% - 90em / 2 + 2.5em * 15.25);
    }
}


@media (max-width: 80em) {
    section section:nth-of-type(1) {
        padding-top: 10em;
    }

    section section:nth-of-type(2) {
        padding-top: 6.25em;
    }

    section section:nth-of-type(3) {
        padding-top: 15.625em;
    }

    section section:nth-of-type(4) {
        padding-top: 9em;
    }
}

@media (max-width: 47.9em) {
    header {
        position: relative;
        display: flex;
        justify-content: center;
        z-index: 0; 
    }
    
    body > nav a {
        font-size: 2.2em;
    }

    body > nav {
        right: -10.8em;
        top: -10.8em;
    }

    h1 {
        font-size: 2.5em;
    }

    p {
        font-size: 1.1em;
    }

    section section:nth-of-type(1) {
        left: 0;
        display: block;
        width: calc(100% - 2.5em / 2);
    }

    section section:nth-of-type(2) {
        left: 0;
        display: block;
        width: calc(100% - 2.5em / 2);
    }
    section section:nth-of-type(2) div {
        background-color: var(--color-eten);
        padding: 1em 1em 1em 1em; 
    }

    section section:nth-of-type(3) {
        left: 0;
        display: block;
        width: calc(100% - 2.5em / 2);
    }
    section section:nth-of-type(3) div {
        background-color: var(--color-nieuws);
        padding: 1em 1em 1em 1em;
    }


    section section:nth-of-type(3) div div button {
        top: 283.5em;
        left: 39%;
    }
    
    section section:nth-of-type(3) div div button.smallButton {
        width: 5em;
        top: 347em;
        left: 9%;
        transition: .3s;
    }

    section section:nth-of-type(3) div img:nth-of-type(1) {
        width: 90%;
    }
    
    section section:nth-of-type(4) {
        left: 0;
        display: block;
        width: calc(100% - 2.5em / 2);
    }

    .underline {
        text-decoration: line-through;
        text-decoration-thickness: .2em;
    }
}