:root{
    --color-white: white;
    --color-black: black;
    --color-000: black;
    --color-fff: #fff;
    --color-voorkant-default: #fff5ee;
    --color-achterkant-default: #ff3b1f;
    --color-gray: gray;
    --icon-darkmodeknop: url("Images/Vector.png");
}

@media (prefers-color-scheme: dark) {
    :root {
        --color-black: white;
        --color-000: black;
        --color-fff: black;
        --color-voorkant-default: black;
        --color-achterkant-default: #ff3b1f;
        --color-gray: gray;

    }
  }

  /* onclick toggle */
  .darkmode{
        --color-black: white;
        --color-000: white;
        --color-fff: black;
        --color-voorkant-default: black;
        --color-achterkant-default: #ff3b1f;
        --color-gray: gray;

        --icon-darkmodeknop: url("Images/Group5.png");
  }

body{
    background: var(--color-white);
    background-image: linear-gradient(90deg, var(--color-000) 50%, var(--color-fff) 0);
    margin: 0;
    padding: 0;
    overflow: hidden;
}

header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1em;
}

header button {
    padding: 0.8em;
    font-size: 1em;
    border-radius: 8px;
    padding: 0;
    width: 10vw;
    height: 5vw;

    background-color: rgb(203, 203, 203);
}

header button:nth-of-type(2) {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;

    background-image: var(--icon-darkmodeknop);
    background-size: 3vw 3vw;
    background-repeat: no-repeat;  
    background-position: center;

    background-color: transparent;
    border: 0;
}


header button:nth-of-type(1):hover {
    background-color: var(--color-white);
    border-radius: 8px;
    color: black;
}


h1{
    mix-blend-mode: difference;
    position: absolute;
    width: 100%;
    z-index: 1;
    text-align: center;
    color: var(--color-white);
}

.kaartul {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50vw;
    height: 80svh;
    perspective: 5000px; /* Geeft diepte aan de flip */
    transform-style: preserve-3d;
    list-style: none;
    padding-left: 0;
}



.kaart {
    position: absolute;
    display: flex;
    flex-direction: column;
    rotate: 5deg;
    
    width: 20em;
    height: 30em;
    border-radius: 1em;

    transform-style: preserve-3d;
    transform-origin:  center;

    /* gradient */
    transition: 1s cubic-bezier(0.34, 1.56, 0.64, 1); 

}

.kaart div {
    overflow: hidden;
}

/* Draait en verplaatst de kaart naar de rechterkant */
.kaartul li.kaart.kaartGedraaid{
    /* animation: verplaatsEnDraai 1s forwards; */
    transform: rotateY(0.5turn);
    translate: 50vw 0 calc(sibling-index() * -5em);
    rotate: 0deg;
}

/* @keyframes verplaatsEnDraai{
    to {
    }
} */

/* Verbergt de achterkant */
.voorkant, .achterkant {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    backface-visibility: hidden; 
    border-radius: 1em;
}

.voorkant {
    background-color: var(--color-voorkant-default); 
    display: flex;
    align-items: center;
    justify-content: center;
}

.achterkant {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto auto auto;

    background-color: var(--color-achterkant-default); 
    color: var(--color-white);
    transform: rotateY(180deg); /* Staat standaard omgedraaid */
    overflow-y: auto; /* Zorgt dat tekst die te lang is gescrold kan worden */
}


.achterkant svg {
    width: 5em;
    height: 5em;
}

.achterkant h2 {
    width: 100%;
    grid-area: 1 / 2; 
    align-self: top;
    height: fit-content;
}

.achterkant img {
    width: 100%;
    height: 100%;
    grid-column: 1 / 3; 
}

.achterkant h3 {
    width: 100%;
    grid-column: 1 / 3; 
    grid-row: 3;
    
    align-self: end;
    justify-self: start;
    margin: 0em;
    margin-left: 1em;
    margin-right: 1em;
}

.achterkant p {
    grid-column: 1 / 3;
    grid-row: 4;
    margin-top: 0.5em;
    margin-left: 1em;
    margin-right: 1em;
}
/* Bron card flip: https://stackoverflow.com/questions/79074420/how-to-do-i-make-the-flip-card-feature-work */


/* De informatie kaarten andere kleur geven */
/* Kaart 2 */

.kaartul li:nth-of-type(2) .achterkant {
    background-color: var(--color-gray); 
}

.kaartul li:nth-of-type(4) .achterkant {
    background-color: var(--color-gray); 
}

/* De kaarten een andere rotation geven om de dek op een stapple kaarten te laten lijken */

.kaartul li:nth-of-type(2){
    rotate: -5deg;
}

.kaartul li:nth-of-type(3){
    rotate: -10deg;
}

.kaartul li:nth-of-type(4){
    rotate: 10deg;
}

.kaartul li:nth-of-type(5){
    rotate: 15deg;
}

/* ticker aan de onderkant */
.studentenUL{
    display: flex;
    align-items: center;
    position: fixed;
    bottom: 0;
    background-color: rgba(50, 50, 50, 0.251);
    color: var(--color-white);
    height: fit-content;
    margin: 0;
    /* bron: https://www.w3schools.com/css/css_overflow.asp */
    overflow-x: auto;

    animation: spin 50s infinite linear alternate-reverse;
}

.studentenUL li{
    padding: 0 2em;
    width: 100px;

    display: grid;
    grid-template-rows: auto auto;
    justify-items: center;
    
}

.studentenUL li h2{
    margin: 0;
    font-size: 10px;
    width: 100px;
    text-align: center;

    grid-row: 2;
}

.studentenUL img{
    width: 2em;
    border-radius: 100%;
}

/* bron: https://www.youtube.com/watch?v=KD1Yo8a_Qis */
@keyframes spin {
    from { translate: 0;}
    to {transform: translateX(calc(-100% + 100vw));}
}

/* phone */
@media (max-width: 600px) {
    header button:nth-of-type(2) {
        background-size: 5vw 5vw;
    }

    header button{
        width: 20vw;
        height: 10vw;
    }

    header

    .kaart.kaartGedraaid{
        /* animation: verplaatsEnDraai 1s forwards; */
        transform: rotateY(0.5turn);
        translate: 50vw 0vw calc(sibling-index() * -5em);
        rotate: 0deg;
    }
    
    .kaart {
        rotate: 0deg;
        width: 10em;
        height: 17.5em;
    }

    .achterkant h2 {
        font-size: 19px;
    }
    
    .achterkant h3 {
        font-size: 16px;
    }
    
    .achterkant p {
        font-size: 12px;
    }

    /* Kaart rotation */
    ul li:nth-of-type(2){
        rotate: 0deg;
    }
    
    ul li:nth-of-type(3){
        rotate: 0deg;
    }
    
    ul li:nth-of-type(4){
        rotate: 0deg;
    }
    
    ul li:nth-of-type(5){
        rotate: 0deg;
    }
}

/* Tussen tablet en phone */
@media (max-width: 768px) { 
    .kaart {
        rotate: 0deg;
    }
    
    ul li:nth-of-type(2){
        rotate: 0deg;
    }
    
    ul li:nth-of-type(3){
        rotate: 0deg;
    }
    
    ul li:nth-of-type(4){
        rotate: 0deg;
    }
    
    ul li:nth-of-type(5){
        rotate: 0deg;
    }
}