*, html {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    overscroll-behavior: none;
}

html {
    font-size: 15px;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}

:root {
    --dark-pink: rgb(198, 82, 82);
    --light-pink: rgb(255, 219, 219);
    --background-white: rgb(252, 252, 252);
    --black: rgb(54, 54, 54);
    --height-titel: 4rem;
    --height-nav: 2.8rem;
    --matching-color: rgb(56, 114, 150); 
    --border-style: 1px solid var(--dark-pink);
    --cursor-arrow: url('/cursor/arrow.cur'), auto;
    --cursor-handwriting: url('/cursor/handwriting.cur'), auto;
    --cursor-help: url('/cursor/help.cur'), auto;
    --cursor-precision: url('/cursor/precision.cur'), auto;
    --cursor-text: url('/cursor/text.cur'), auto;
    --cursor-unavailable: url('/cursor/unavailable.cur'), auto;
    --cursor-working: url('/cursor/working.cur'), auto;
    --cursor-move: url('/cursor/move.cur'), auto;
    --cursor-link: url('/cursor/link.cur'), auto;
    --cursor-alt: url('/cursor/alt.cur'), auto;
    --cursor-busy: url('/cursor/busy.cur'), var(--cursor-working);
}

/* General arrow */
body {
  cursor: var(--cursor-arrow);
}

/* Links */
a, button {
  cursor: var(--cursor-link);
}

/* Text inputs */
input[type="text"], textarea {
  cursor: var(--cursor-text);
}

/* Disabled elements */
[disabled] {
  cursor: var(--cursor-unavailable);
}


a {
    color: var(--matching-color);

}

audio {
     cursor: pointer;
}

body {
    width: 100vw;
    height: 100svh;

    display: grid;
    grid-template-columns: auto;
    grid-template-rows: auto auto auto;
    grid-template-areas:  
    "header"
    "nav"
    "main";

    overflow: hidden;

    font-weight: 300;
    color: var(--dark-pink);
    background-color: var(--light-pink);
}

header {
    grid-area: header;

    height: var(--height-titel);
    width: 100%;

    overflow: hidden;
    border-bottom: var(--border-style);
    cursor: var(--cursor-alt);

    display: flex;
    flex-direction: column;
    justify-content: center;
}

header h1 {
    color: var(--dark-pink);

    font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    font-weight: 300;
    font-size: 1.5em;
    line-height: 2rem;
    
    display: inline-flex;
    align-items: center;
    text-align: center;

    /*IN HET GEVAL IK EEN LANGERE TITEL WIL*/
    width: max-content;
    transform: translateX(-50%);
    position: relative;
    left: 50%;
}

header h2 {
    font-weight: 300;
    font-size: 1rem;
    text-align: center;
    text-transform:uppercase;
}

 h3 {
    margin-bottom: 0.4rem;
 }
header h1 span {font-style: italic;}
::-webkit-scrollbar-thumb { cursor: var(--cursor-move);}
nav {
    grid-area: nav;
    width: 100%;
    height: var(--height-nav);

    display: flex;
    z-index:10;
    background-color: var(--background-white);
}

nav a {
    width: calc(100% / 3);
    
    display: flex;
    justify-content: center;
    align-items: center;

    font-size: 1.2em;

    color: var(--matching-color);
    background-color: var(--light-pink);

    /* text-decoration: none; */

    border-bottom: var(--border-style);
    border-right: var(--border-style);
}

nav a:last-of-type {border-right: 0;}
nav a.actief { text-decoration: none; background-color: var(--background-white); font-style: italic; color: var(--dark-pink);}


main {
    grid-area: main;
    
    position: static;
    width: 100%;
    height: calc(100svh - var(--height-nav) - var(--height-titel));

    background-color: var(--background-white);

    overflow-y: auto;
}

.pagewrapper{
    width: 100%;
    padding: 0.5em;
}

@media screen and (min-width: 1000px) {
    :root {
        --height-nav: 2.2rem;
        --height-titel: 4rem;
    }
    html {
        font-size: 18px;
    }
    body {
        grid-template-areas:  
        "header"
        "nav"
        "main";
    }

    header h1 {
        font-size: 2em;
    }

    /* nav a {
        border-top: 0px;
        border-bottom: var(--border-style);

    } */

    .pagewrapper {
        padding: 0;
        display: grid;
        overflow: hidden;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: 100%;
        grid-template-areas: "een twee drie";
    }

    .kolom {
        height: calc(100svh - var(--height-titel) - var(--height-nav));
        width: 100%;
        padding: 0.5em;
        overflow-y: auto;
    }
    
}