@font-face {
    font-family: "Montserrat";
    src: url(../fonts/Montserrat-VariableFont_wght.woff2);
}

@font-face {
    font-family: "Godot-woff";
    src: url(../fonts/godot.woff2);
}

/* Code van derde: a11yproject.com How to hide content */
.visually-hidden {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

/* Bron hulp light dark mode: MDN light-dark() */

:root{

    color-scheme: light dark;

    /* Background Colors */
    --main-bg-color: light-dark(#EFF1F5, #25282b);
    --auth-bckg-color: #1a1a1a7a;
    --ftr-color: light-dark(#ffff, #111111);
    --hmb-mnu-bckgrnd-color: #333639;
    --pckr-bckgrnd-color: #00000099;
    --hdr-bckgrnd-color: light-dark(#000, none);
    --crd-bckgrnd-color: light-dark(#ffff, #333639);
    --ftrs-scnd-bckgrnd-color: #263256;

    /* Code van derde: cssgradient.io */
    --ftrs-scton-1-bckgrnd-color: radial-gradient(circle, rgba(59, 79, 129, 1) 0%, rgba(18, 18, 43, 1) 100%);

    /* Colors */
    --color-white: #ffff;
    --color-gray: gray;
    --color-black: #000;

    /* Text Colors */
    --main-txt-color: light-dark(#546B99, #FFFF); 
    --scnd-txt-color: light-dark(#4A5365, #FFFFFFE6);
    --thrd-txt-color: #989A9B;
    --lnk-txt-color: #6C94A4;
    --ftr-bg-txt-color: (#2C2C2C, #FFFFFF);
    --ftr-txt-color: light-dark(#2C2C2C, #898989);
    --feturs-txt-color: light-dark(#546B99,#d4e3f6);
    --crd-h4-color: #57b3f8;
    --str-txt-color: #ef6767;

    /* Button Colors */
    --main-btn-color: light-dark(#FFFF, #333639);
    --gtinvlvd-btn-color: #6F6F6F45;
    --lrn-mr-btn-color: light-dark(#12597F, #85C2E0);
    --spnsr-btn-color: #FFFFFF;
    --dn-btn-color: #F35774;
    --dwnl-btn-txt-color: #263256;
    --ltst-btn-color: #2e8adf;
    --wtsn-btn-color: rgba(122, 121, 125, 0.5);

    /* Hover Colours */
    --dnte-btn-hover-color: #FF6688;
    --a-lnks-hover-color: #CFCFCF;
    --ftr-hover-color: #7AB1C5;
    --slct-hover-color: #ffffff1a;
    --lnk-txt-hover-color: #81B9D0;
    --auth-bckgrnd-hover-color: #212121;

    /* Hover Brightness */
    --hover-brightness: 120%;
    --hover-brightness-brighter: 130%;

    /* Focus Colors */
    --blue-focus: #7AB1C5;

    /* Focus Size */
    --focus-size: .2rem;

    /* Active Colors */
    --dnte-btn-active-color: #C23E5C;
    --a-active-color: #6B6B6B;
    --aut-backgrnd-active-color: #0F0F0F;
    --lnk-active-color: #4C6773;

    /* Active Brightness */
    --active-brightness: 50%;

    /* Font-sizes */
    --font-size-p: 1.125rem;
    --font-size-h2: 2.25rem;
    --font-size-h3: 1.375rem;
    --font-size-spnsr-h3: 1.75rem;
    --font-size-h4: 1.125rem;

    /* Font-Weights */
    --font-weight-btns: 900;
    --font-weight-h: 800;

    /* Backdrop Filters */
    --hdr-bckdrp-filter: light-dark(none, blur(10px));

    /* Border Colors */
    --crd-brdr-color: #00000033;

}

html {
    font-family: Godot-woff, sans-serif;
}

body {
    margin: 0;
    background-color: var(--main-bg-color);
}


/* HEADER */

header {
    top: 0;
    right: 0;
    left: 0;
    width: 100%;
    position: fixed;
    display: flex;
    justify-content: space-around;
    backdrop-filter: blur(10px);
    background-color: var(--hdr-bckgrnd-color);
    font-family: Montserrat, sans-serif;
    padding-top: 1rem;
    z-index: 1;
}

/* Skip link */
header>a:first-of-type {
    position: absolute;
    left: -999999999999rem;
}

header>a:first-of-type:focus {
    left: 0;
    outline: var(--focus-size) solid var(--blue-focus);
}

/* Link om logo heen */
header>a:nth-of-type(2) {
    width: 8.5rem;
    height: 3rem;
}

header>a:nth-of-type(2):focus {
    /* Hulp bron: MDN :Focus */
    outline: var(--focus-size) solid var(--blue-focus);
}

/* Logo */
header>a:nth-of-type(2) img {
    width: 8.5rem;
    height: 3rem;
}

header>a:nth-of-type(2) img:hover {
    filter: brightness(var(--hover-brightness));
    /* Hulp bron: W3schools Filter */
}

header>a:nth-of-type(2) img:active {
    filter: brightness(var(--active-brightness));
}

/* Styling van de knop om het hamburger menu icoontje heen*/
header button {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;

    width: 2.5rem;
    height: 2.5rem;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    align-self: center;
    gap: .3rem;
}

header button:hover {
    background-color: #ffffff1a;
    border-radius: 2rem;
}

header button:focus {
    outline: var(--focus-size) solid var(--color-white);
}

/* 3 spans die het icoontje van het hamberger menu maken */
header button span {
    width: 2rem;
    height: .2rem;
    background: var(--color-white);
    border-radius: 99rem;
    transition: transform .3s ease, opacity .1s;
    /* Hulp bron: Mdn transition */
}

/* Animatie */

/* Hulp bron: Mdn transform */

/* Als er word geklikt word deze span (Streepje) 45 grade gedraaid en een klein stukje naar beneden geduwd zodat deze goed aansluit */
header button[aria-expanded="true"] span:nth-of-type(1) {
    transform: translateY(.5rem) rotate(45deg);
}

/* Als er word geklikt verdwijnt de middelste span (streepje) */
header button[aria-expanded="true"] span:nth-of-type(2) {
    opacity: 0;
}

/* Als er word geklikt word deze span (Streepje) -45 grade gedraaid en een klein stukje naar boven geduwd zodat deze goed aansluit */
header button[aria-expanded="true"] span:nth-of-type(3) {
    transform: translateY(-.5rem) rotate(-45deg);
}

header nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: var(--hmb-mnu-bckgrnd-color);
    display: none;
    flex-direction: column;
    gap: 2rem;
}

/* menu open */
header nav[data-open="true"] {
    display: block;
}

/* Plaatsing hamburger Menu Item */
header nav ul {
    list-style-type: "";
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    margin-top: 2rem;
}

/* Styling hamburger menu items */
header nav ul li a {
    text-decoration: none;
    color: var(--color-white);
    padding: 1rem;
}

header nav ul li a:hover {
    background-color: #ffffff1a;
}

header nav ul li a:focus {
    /* Hulp bron: MDN :Focus */
    /* Hulp bron: W3schools :Outline */
    outline: var(--focus-size) solid var(--color-white);
}

/* Taal selectie menu */
select {
    display: none;
}

/* Donate button */
header nav a:has(img) {
    color: var(--color-white);
    text-decoration: none;
    background-color: var(--dn-btn-color);
    padding: .8rem 1.2rem;
    border-radius: .63rem;

    display: flex;
    justify-content: center;
    gap: .5rem;
}

header nav a:has(img):hover {
    background-color: var(--dnte-btn-hover-color);
}

header nav a:has(img):focus {
    outline: var(--focus-size) solid var(--color-white);
}

header nav a:has(img):active {
    background-color: var(--dnte-btn-active-color);
}

/* Hartje in Donate Knop */
header nav a:has(img) img {
    width: .81rem;
    height: auto;
}


/* FOOTER */

footer {
    display: grid;
    background-color: var(--ftr-color);
    padding: 2rem;
}

/* 4 colomen links in footer */
footer ul {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    list-style-type: "";
    margin: 0;
    padding: 0;
    padding-bottom: 2rem;
}

footer h2 {
    color: var(--ftr-bg-txt-color);
    font-size: var(--font-size-h3);
    font-weight: var(--font-weight-h);
}

/* Styling linkjes */
footer ul a {
    color: var(--ftr-txt-color);
    text-decoration: none;
}

footer ul a:hover {
    color: var(--ftr-hover-color);
}

footer ul a:focus {
    outline: var(--focus-size) solid var(--blue-focus);
}

footer ul a:active {
    color: var(--lnk-active-color);
}

/* Streep in de footer */
footer hr {
    border: none;
    border-top: 0.5px solid var(--color-gray);
}

/* Tekst onderaan de footer */
footer section:first-of-type p {
    color: var(--ftr-txt-color);
    text-align: center;
    font-size: var(--font-size-p);
}

/* Onderste tekst in de footer */
footer section:first-of-type p:last-of-type {
    padding-top: 2rem;
}

/* Linkjes in de tekst */
footer section:first-of-type p a {
    color: var(--ftr-txt-color);
}

footer section:first-of-type p a:hover {
    color: var(--ftr-hover-color);
}

footer section:first-of-type p a:focus {
    outline: var(--focus-size) solid var(--blue-focus);
}

footer section:first-of-type p a:active {
    color: var(--lnk-active-color);
}

/* Section met iconen in de footer */
footer section:last-of-type {
    display: flex;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
    gap: 3rem;
}

/* Iconen in de footer */
footer section:last-of-type a {
    fill: var(--color-gray);
    width: 2rem;
    height: 2rem;
}

footer section:last-of-type a:hover {
    fill: var(--ftr-hover-color);
}

footer section:last-of-type a:focus {
    outline: var(--focus-size) solid var(--blue-focus);
}

footer section:last-of-type a:active {
    fill: var(--lnk-active-color);
}

@media (min-width: 500px) {
    header {
        padding: 1rem;
    }

    footer {
        grid-template-columns: 1fr 1fr;
        gap: 1rem;
    }

    footer section {
        justify-self: center;
    }

    footer section:nth-of-type(5) {
        grid-column-start: 1;
    }
}

@media (min-width: 768px) {
    /* FOOTER */
    
    footer {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: 1fr .5fr .5fr;
    }

    footer nav:first-of-type {
        grid-column-start: 1;
    }

    footer nav:nth-of-type(2) {
        grid-column-start: 2;
        justify-self: center;
    }

    footer nav:nth-of-type(3) {
        grid-column-start: 3;
        justify-self: center;
    }

    footer nav:nth-of-type(4) {
        grid-column-start: 4;
        justify-self: end;
    }

    footer hr {
        grid-column: 1 / -1;
        grid-row: 2;
        width: 100%;
        align-self: center;
    }

    footer ul {
        padding-bottom: 0;
    }

    footer section:first-of-type {
        grid-row-start: 3;
        grid-column: 1 / 3;
        justify-self: start;
    }

    footer section:first-of-type p {
        text-align: start;
    }

    footer section:last-of-type {
        grid-row-start: 3;
        grid-column-start: 4;
        justify-self: end;
    }
}

@media (min-width: 1200px) {

    /* HEADER */
        
    header nav {
        position: static;
        display: flex;
        flex-direction: row;
        gap: 1rem;
        background: none;
    }

    /* Alle nav items in header */
    header nav ul {
        display: block;
        list-style-type: "";

        display: flex;
        flex-direction: row;
        justify-content: start;
        align-items: center;
        margin: 0;
        padding: 0;
        gap: .1rem;
    }

    /* Bron: UNA */
    /* Hulp gekregen van: Sanne T Hoofd */

    /* Taal selecteren menu */
    select,
    ::picker(select) {
        appearance: base-select;
    }

    ::picker(select) {
        border-radius: 10px;
        background-color: var(--pckr-bckgrnd-color);
        border-color: var(--color-gray);
        color: var(--txt-color);
        width: 8rem;
    }

    /* Hulp gekregen van Mathijs */
    select {
        display: block;
        border: none;
        cursor: pointer;
        width: 3rem;
        height: 2.49rem;
        align-self: center;
        background-image: url("../images/language.png");
        background-position: center;
        background-size: 3rem;
        background-repeat: no-repeat;
        color: transparent;
    }

    select:hover {
        background-color: var(--slct-hover-color);
    }

    select:focus {
        outline: var(--focus-size) solid var(--color-black);
    }
    
    select::picker-icon {
        display: none;
    }

    select button img {
        width: 1rem;
    }

    ::checkmark {
        display: none;
    }

    /* Opties binnen het taal selecteren menu */
    option {
        padding-top: .5rem;
        padding-bottom: .5rem;
        text-align: center;
        display: block;
        color: var(--color-white);
    }

    /* Hamburger Menu Icon */
    header button {
        display: none;
    }
}

@media (min-width: 1400px) {
    header {
        padding-left: 10rem;
        padding-right: 10rem;
    }

    footer {
        padding-left: 10rem;
        padding-right: 13rem;
    }
}