:root {
    --kleur-browser:  var(--matching-color);
    --kleur-browser-licht: rgb(56, 114, 150, 0.2);
    /* --kleur-browser: rgb(198, 82, 82);
    --kleur-browser-licht: var(--light-pink); */
    --height-commands: calc(1 * var(--height-nav));
}

html, body {
    touch-action: none;
}

main {
    overflow-y: hidden;
}

/*/ / WEBBROWSER/ /*/

#websites {
    height: calc(100% - var(--height-commands));
    
    overflow-y: auto;

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

#websites article {
    display: none;
    flex-direction: column;
    justify-content: center;

    height: 100%;
}

#websites article.actief {
    display: flex;
}

/* UITLEG */
.uitleg {
    display: none;
    height: 100%;
    flex-direction: column;

}

.uitleg p {
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;

    font-size: 0.9em;
    line-height: 1.6em;
    font-weight: 300;
}

.uitleg p b {
    color: var(--kleur);
    font-weight: 900;
}

.uitleg p:not(:last-of-type, :nth-last-of-type(2)) { margin-bottom: 0.5em;}

.uitleg p:last-of-type {
    display: flex;
    flex-direction: column;
    justify-content: end;
    height: 100%;
}

.uitleg p:last-of-type a, .uitleg p:last-of-type span {
    font-size: 1.2em;
    width: 100%;
    text-align: center;
    display: inline-block;
    padding: 1em 0;
}

.uitleg p.review {
    text-align: left;
}

.uitleg p.review span:first-of-type {
    font-style: italic;
    font-size: 0.9rem;
}

.uitleg p.review span:last-of-type {
    margin-top: 0.5em;
}

.informatie#websites article { justify-content: start;}
.informatie#websites article .uitleg { display: flex;}

.uitleg figure {
    border: var(--border-style);
    margin: 1em 0;
    overflow: hidden;
    /* touch-action: pinch-zoom; */
    line-height: 0;
}


/*/ / COMMANDO'S / /*/

section#selectie {
    height: var(--height-commands);
    width: 100%;

    border-top: var(--border-style);

    display: flex;
    justify-content: center;
    align-items: center;

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


section#selectie div {
    height: 100%;
    width: calc(100% / 3);

    display: flex;
    justify-content: center;
    align-items: center;

    font-size: 1.5em;
    line-height: 1.5em;

    font-weight: 300;

    color: var(--dark-pink);

    text-decoration: none;
    cursor: var(--cursor-help);
}

section#selectie div span {
      -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10 and IE 11 */
  user-select: none; /* Standard syntax */
    /* transition: transform 0.3s ease-out;
    transform: rotate(90deg); */
    display: flex;
    justify-content: center;
    align-items: center;

    border-radius: 100%;
    /* border: var(--border-style); */
    font-weight: 200;
    height: 1.4em;
    aspect-ratio: 1/1;
 
}

/* section#selectie div.actief span {
    transition: transform 0.3s ease-out;
    transform: rotate(0deg)
} */


#selectie svg { width: calc(100% / 3);     cursor: var(--cursor-link);}
#selectie svg.einde {
    opacity: 0;
    cursor: var(--cursor-arrow);
}

svg {
    color: var(--matching-color);
}


/* BROWSER */
.browser {
    width: 100%;
    height: fit-content;
    margin-bottom: 0.5em;
    border-bottom: 0.5px solid var(--kleur-browser);
    font-size: 0.5em;
}

.window {
    width: 100%;
    aspect-ratio: 2/1;

    line-height: 0;

    overflow-y:scroll;
    border: 0.5px solid var(--kleur-browser);
    border-top: 0;
    border-bottom: 0;

}

.window img { 
    width: 100%;
    object-fit: cover;
}

.noscroll .window { overflow: hidden;}
.noscroll .window img { object-fit: fill; height: 100%;}


.bar { width: 100%; aspect-ratio: 22/1; display: flex; justify-content: space-between; align-items: center;}
.bar { background-color: var(--kleur-browser-licht);  border: 0.5px solid var(--kleur-browser);}
.window::-webkit-scrollbar-track { border-radius: 8px; background-color: var(--kleur-browser-licht);}
.window::-webkit-scrollbar { width: 0.8em; background-color: var(--kleur-browser-licht);}
.window::-webkit-scrollbar-thumb { border-radius: 8px; background-color: var(--kleur-browser);}

.inputfield { border: 0.5px solid var(--kleur-browser);}
.arrows { width: 6%; margin: 0 2% ; display: flex; justify-content: space-between; align-items: center;}
.commandos { height: 100%; width: 10%; margin-right: 1%; display: flex; justify-content: space-between; align-items: center; }
.inputfield { height: 70%; width: 75%; background-color: var(--background-white); vertical-align: middle; display: flex; align-items: center; container-type: size;}
.inputfield p { padding-left: 1%; font-size: 1rem; text-align: left;     white-space: nowrap; font-size: 69cqh;}

.arrows svg {    width: 35%; height: 100%;}
.commandos svg {height: 50%; width: 33%;}


/*/ / DESKTOP / /*/
@media screen and (min-width: 1000px) {

    section#selectie div {
        border-left: var(--border-style);
        border-right: var(--border-style);
    }

    section#selectie div span {
        font-size: 1.2em;
        height: 1.2em;
    }

    .browser { margin-bottom: 2em; }
    div#info {
        font-size: 2em;
        cursor: var( --cursor-help);
    }

    .pagewrapper {
        padding: 1em calc(100% / 3) 0em calc(100% / 3);
    }
    .uitleg p {
        font-size: 1em;
    }
    .uitleg p.review span:first-of-type {
    
        font-size: 1rem;
    }
    .browser:not(.informatie#websites article .browser) {
        font-size: 1em;
        position: absolute;
        top: calc((var(--height-nav) + var(--height-titel) + 0.5 * (100svh - var(--height-nav) - var(--height-titel) - var(--height-commands)))) ;
        left: 50%;
        translate: -50% -50%;
        width: calc(100% / 1.5);

        margin-bottom: 0;
        
        aspect-ratio: 11/6 !important;
        max-width: 90vw;
        max-height: calc(100svh - var(--height-nav) - var(--height-titel) - var(--height-commands)) !important;
    }

    .browser .arrows svg:not(.informatie#websites article .browser .arrows svg ) {
        scale: 4;
        width: 8%;
    }

    /* .browser .commandos:not(.informatie#websites article .browser .arrows svg ) {
        scale: 2;
        width: 5%;
        margin: 0 5%;
    } */

}

/* calc((var(--height-nav) + var(--height-titel) + 0.5 * (100svh - var(--height-nav) - var(--height-titel) - var(--height-commands))))  */

/* calc(0% - (( 0.5 * (100svh - var(--height-nav) - var(--height-titel) - var(--height-commands))))) */