*{
    margin: 0px;
    padding: 0px;
}

:root{
    /* Kleuren */
    color-scheme: light dark;
    --background: light-dark(hsl(0 0% 90%), hsl(0 0% 10%));
    --background-light: light-dark(hsl(0 0% 93%), hsl(0 0% 13%));
    --background-dark: light-dark(hsl(0 0% 87%), hsl(0 0% 7%));
    
    --text: light-dark(hsl(0 0% 10%), hsl(0 0% 90%));
    --text-muted: light-dark(hsl(0 0% 25%), hsl(0 0% 75%));
    
    --primary: hsl(75, 96%, 65%);

    --shadow: light-dark(hsl(0, 0%, 60%), hsl(0, 0%, 15%));

    /* Text grootte */
    --text-large: 4rem;
    --text-medium: 2rem;
    --text-normal: 1rem;
    --text-small: 1rem;

    /* Font */
    --mojangles: 'Mojangles', system-ui;
    --dm: 'DM', system-ui;
    }

/* Teksttags */

h1{
    font-family: var(--mojangles);
    font-size: var(--text-large);
    color: var(--text);
    text-align: center;
}

h2{
    font-family: var(--dm);
    font-size: var(--text-medium);
    color: var(--text);
}

h3{
    font-family: var(--dm);
    font-size: var(--text-normal);
    color: var(--text);
}

p{
    font-family: var(--dm);
    font-size: var(--text-normal);
    color: var(--text);
}

p.small{
    font-family: var(--dm);
    font-size: var(--text-small);
    color: var(--text-muted);
}

/* Body */

body{
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: var(--background-dark);
    max-width: 100vw;
}

/* Alles van de header */

header{
    background: var(--background);
    display: flex;
    padding: 0.5rem 1rem;
    align-items: center;
    justify-content: space-between;
}

.logo{
    height: 6rem;
}

nav{
    align-self: center;
    display: flex;
    gap: 1rem;
}

.navbtn{
    font-size: 1.5rem;
    color-scheme: light;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    color: var(--text);
    background: var(--primary);
    text-decoration: none;
    font-family: var(--mojangles);
    text-align: center;

    /* hover transition */
    transition: transform ease .5s;
    &:hover{
        transform: scale(105%);
    }
}

.burger{
    display: none;
}

.discord-link{
    height: 4rem;
    fill: var(--text-muted);
    transition: all ease .5s;
    &:hover{
        fill: var(--primary);
    }
}

/* Sidebar */

.sidebar{
    height: 100%;
    width: 100%;
    position: fixed;
    visibility: hidden;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    backdrop-filter: blur(1rem);
    z-index: 99999999999999999999999999999999999999999999;
    transition: all .5s ease;
}

.sidebar_menu{
    justify-content: space-between;
    padding: 1rem;
    height: 100%;
    min-width: 55vw;
    display: flex;
    flex-direction: column;
    position: absolute;
    align-items: flex-end;
    right: 0px;
    background: var(--background-light);
    box-sizing: border-box;
}

.navmenu{
    display: flex;
    flex-direction: column;
    width: 100%;
}

.sidemenu_back{
    position: absolute;
    top: 1rem;
    left: 1rem;
    background: var(--background-light);
    font-family: var(--mojangles);
    font-size: 3.7rem;
    border-radius: 100vw;
    height: 4rem;
    width: 4rem;
    text-justify: center;
    text-align: center;
    cursor: pointer;
}

@media screen and (max-width: 768px){
    nav{
        display: none;
    }

    header .discord-link{
        display: none;
    }

    .burger{
        display: block;
        height: 4rem;
        width: 4rem;
        stroke: var(--text-muted);
    }
}


/* Alles van de inhoud */

main{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 2rem 10vw;
}

.button{
    font-size: 1rem;
    color-scheme: light;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    color: var(--text);
    background: var(--primary);
    text-decoration: none;
    font-family:  var(--dm);
    font-weight: 600;
    align-self: flex-start;

    /* hover transition */
    transition: transform ease .5s;
    &:hover{
        transform: scale(105%);
    }
}

.seperator{
    width: 25vw;
    height: .5rem;
    margin: 2rem;
    background: var(--primary);
    border-radius: 100vw;
    box-shadow: 0 0.25rem 0.25rem 0 var(--shadow);
}

.section{
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-top: 2rem;
    gap: 1rem;
}

.cards{
    display: grid;
    grid-template-columns:
        repeat(auto-fit, minmax(16rem, 1fr));
    max-width: 100%;
    align-items: center;
    gap: 1rem;
}

.card{
    position: relative;
    min-width: 16rem;
    max-width: 100%;
    border-radius: 4%;
    &:hover{
        z-index: 2014;
    }
}

/* Alles van de footer */

footer{    
    display: flex;
    padding: 1rem 2rem;
    justify-content: space-between;
    align-items: center;
    color-scheme: light;
    background: var(--primary);
    box-sizing: border-box;
    min-width: 100%;
    margin-top: auto;
}

.copyright{
    font-family: var(--mojangles);
    font-size: 1rem;
    color: var(--text);
}

/* Mobile detector */


.state-indicator {
    position: absolute;
    top: -999em;
    left: -999em;

    z-index: 1;
}

/* mobile phone */
@media all and (max-width: 768px) {
    .state-indicator {
        z-index: 2;
    }
}