*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

@font-face{ 
    font-family:'Arnhem';
    src: url('../fonts/arnhem.woff2') format('truetype');
}

@font-face{ 
    font-family:'Swiss';
    src: url('../fonts/swiss.woff2') format('truetype');
}

@font-face{ 
    font-family:'Lato';
    src: url('../fonts/lato.woff2') format('truetype');
}

:root{
    /* Kleuren */
    --mainBackground: #777162;
    --backgroundFolderOne: #969080;
    --textFolderOne: #3f3e2c;
    --backgroundFolderTwo: #211e15;
    --textFolderTwo: #dbd2b7;
    --backGroundFolderThree: #c1b6a4;
    --textFolderThree: #1b150b;
    --mainTextColor: #FAFAF7;
    --mainTextColorOtherTheme: #d8d6cf;
    --line: #D6D4CB;
    
    /* Typografie */
    --normalFont: 'Arnhem', sans-serif; 
    --fancyFont: 'Swiss', sans-serif;
    --arnhemFont: 'Arnhem', sans-serif;
    --mainTextFont: 'Lato', sans-serif;

    /* Horizontale Scroll */
    --imagesTransform: rotate(-90deg) translateX(-100%);
    --wrapper-transform: rotate(90deg) translateZ(.1px) scale(0.9) translateX(0px) translateY(-3vh);
    --parallax-transform: none;

    --transformSlower: translateZ(-.2px) scale(1.1) translateX(0%) translateY(-10vh);
    --transformSlower1: translateZ(-.25px) scale(1.05) translateX(0%) translateY(8vh);
    --transformSlower2: translateZ(-.3px) scale(1.3) translateX(0%) translateY(2vh);
    --transformSlowerDown: translateZ(-.2px) scale(1.1) translateX(0%) translateY(16vh);
    --transformFaster: translateZ(.15px) scale(0.8) translateX(0%) translateY(14vh);  
    --transformFaster1: translateZ(.05px) scale(0.8) translateX(0%) translateY(10vh);
    --transformFastest: translateZ(.22px) scale(0.7) translateX(-10vh) translateY(-15vh);
    --transformVertical: translateZ(-.15px) scale(1.15) translateX(0%) translateY(0%);
    --transformLast: translateZ(-.2px) scale(1.1) translateX(25vh) translateY(-8vh);

    /* Layout */
    --imageWidth: 100vh; /* vh & vw omgedraaid is nodig voor de horizontale scroll door de rotatie, ze draaien om */
    --imageHeight: 100vw;
    --imagesOverflowY: auto;
    --imagesOverflowX: hidden;
    --flexDirection: column;
    --minimumHeightImages: 40vh;
    --flexWrap: nowrap;
    --sticky: sticky;
    --folder-shift: 24vh;

    /* Styling */
    --imageFilter: grayscale(0%);
    --hoverToTop: pink;
    --textUppercase: uppercase;
    --opacity: opacity;

    /* Animaties */
    --animationNameText: texts;
    --animationNameImage: imageAboutMe;
}

.other-theme{
    /* Kleuren */
    --mainBackground: white;
    --backgroundFolderOne: black;
    --textFolderOne: white;
    --backgroundFolderTwo: black;
    --textFolderTwo: white;
    --backGroundFolderThree: black;
    --textFolderThree: white;
    --mainTextColor: black;
    --mainTextColorOtherTheme: black;

    /* Typografie */   
    --normalFont: sans-serif;
    --fancyFont: sans-serif;
    --arnhemFont: sans-serif;

    /* Horizontale Scroll */   
    --transformImagesWrapper: none;
    --minimumHeightImages: auto;

    /* Layout */
    --opacity: none;
    --sticky: none;
    --imageWidth: 100%;
    --imageHeight: auto;
    --imagesTransform: none;
    --imagesOverflowY: visible;
    --imagesOverflowX: visible;
    --flexDirection: row;
    --flexWrap: wrap;

    /* Styling */
    --imageFilter: grayscale(100%);
    --hoverToTop: grey;
    --textUppercase: none;

    /* Animaties */
    --animationNameText: none;
    --animationNameImage: none;
}

/* --------------------------------------------------------------------------------- MARK: GENERAL 
*/

h1{
    font-family: var(--fancyFont);
    color: var(--mainTextColor);
    /* Anders waren de letters te dik vanuit het font */
    font-weight: 1;
    letter-spacing: 0.01em;

    /* Bron: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/clamp */
    font-size: clamp(2rem, 6vw, 4.5rem); 

    display: inline-block;

    position: relative;

    animation: colorChange 4s ease-in-out infinite alternate;
}

@keyframes colorChange{

  0% {
    color: var(--mainTextColor);
  }

  100% {
    color: var(--mainTextColorOtherTheme);
  }

}

h2{
    color: var(--mainTextColor);
    font-family: var(--arnhemFont);

    font-size: clamp(0.95rem, 2vw, 1.1rem); 
}

h3{
    font-family: var(--fancyFont);
    color: var(--mainTextColor);
    font-weight: 1;

    font-size: clamp(2rem, 3.5vw, 4.5rem); 
}

h4{
    font-family: var(--fancyFont);
    font-weight: 1;

    font-size: clamp(1.8rem, 3vw, 4rem); 
}

p{
    color: var(--mainTextColor);
    font-family: var(--mainTextFont);

    font-size: clamp(0.7rem, 1.2vw, 0.9rem); 
}

li{
    font-family: var(--mainTextFont);
    font-size: clamp(0.8rem, 1.2vw, 1rem); 
}

body{
    background-color: var(--mainBackground);
}

ul{
  list-style-type: '- ';
}

img{
    filter: var(--imageFilter);
}

/* ---------------------------------------------------------------------------------------- MARK: HEADER 
*/

header{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    height: 100vh;
}

/* ---------------------------------------------------------------------------------------- MARK: MAIN 
*/

.static{ /* Titels */
    position: absolute;

    display: flex;
    flex-direction: row;
    justify-content: space-between;

    padding: 0.1em 0.6em;
    top: 0.5em;
    width: 100%;

    @media (prefers-reduced-motion: no-preference){
        animation-name: opacity;
        animation-range: entry contain;
        animation-fill-mode: both;
        animation-timeline: view();
    }
}

.static h2:nth-of-type(1){
    text-transform: var(--textUppercase);
}

/* ---------------------------------------------------------------------------------------- MARK: FOLDERS 
*/

.container{ /* Container Folders */
    display: flex; 
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.container article{  /* Individuele Folder */
    position: relative;

    transition: transform 2s ease;     
}

.container article section{  /* Inhoud Folder */
    width: 95vw;
    padding: 0.5em 1em 1.5em 1em;
}

/* Folders scrollen omhoog */

/* Bron: chatGPT om de folders responsive te maken */
.folder-2.active{
  transform: translateY(calc(-1 * var(--folder-shift)));
}

.folder-3.active{
  transform: translateY(calc(-2.485 * var(--folder-shift)));
}

/* ----------------- FOLDER 1 -----------------*/
/* Ik heb deze styling bewust per folder gedaan omdat het folder specifiek is */

.folder-1{
    position: relative;
}

.folder-1 h3{ /* Tab */
    background-color: var(--backgroundFolderOne);

    color: var(--textFolderOne);
    text-transform: var(--textUppercase);
    font-family: var(--mainTextFont);
    font-size: clamp(0.7rem, 1.2vw, 0.9rem);  

    position: absolute;
    top: 0%;

    padding: 0.6em 1em;
    border-radius: 1em 1em 0 0;

    transform: translateY(-100%);
}

.folder-1 section{ /* Folder */
    background-color: var(--backgroundFolderOne);
    color: var(--textFolderOne);

    padding: 3em 2em 1em 2em;
    border-radius: 0 0.5em 0.5em 0.5em;
}

/* ----------------- FOLDER 2 -----------------*/

.folder-2{
    position: relative;
    z-index: 2;

    margin-top: 4em;
}

.folder-2 h3{ /* Tab */
    background-color: var(--backgroundFolderTwo);
    text-transform: var(--textUppercase);
    color: var(--textFolderTwo);
    font-family: var(--mainTextFont);
    font-size: clamp(0.7rem, 1.2vw, 0.9rem); 

    position: absolute;
    top: 0%;
    left: 10%;

    padding: 0.6em 1em;
    border-radius: 0.5em 0.5em 0 0;

    transform: translateY(-90%);
}

.folder-2 section{ /* Folder */
    background-color: var(--backgroundFolderTwo);
    color: var(--textFolderTwo);

    padding: 3em 2em 1em 2em;
    border-radius: 0.5em;
}

.folder-2 section ul{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(1rem, 3vw, 3rem);

    margin: 0.5em 3em;
}

/* Om de items op een willekeurige plek te laten verschijnen */
.folder-2 section ul li{
    list-style: none;
}

.folder-2 section ul li:nth-child(3n){
    justify-self: center;
}

/* ----------------- FOLDER 3 -----------------*/

.folder-3{
    position: relative;
    z-index: 11;

    margin-top: 6em;
}

.folder-3 h3{ /* Tab */
    background-color: var(--backGroundFolderThree);
    text-transform: var(--textUppercase);
    color: var(--textFolderThree);
    font-family: var(--mainTextFont);
    font-size: clamp(0.7rem, 1.2vw, 0.9rem); 

    position: absolute;
    top: 0%;
    left: 28%;

    padding: 1em 1em 0.6em 1em;
    border-radius: 0.5em 0.5em 0 0;

    transform: translateY(-90%);
}

.folder-3 section{ /* Folder */
    background-color: var(--backGroundFolderThree);
    color: var(--textFolderThree);

    position: relative;
    height: auto;
    min-height: 60vh;

    padding: 3em 2em 1em 2em;
    border-radius: 0.5em;
}

/* ---------------------------------------------------------------------------------------- MARK: ABOUT ME
*/

.about-me{
    color: var(--mainTekstColor);

    display: flex;
    flex-direction: column;
    gap: clamp(1.5rem, 4vw, 3rem);

    margin: clamp(1.5rem, 5vw, 5rem);
    border-left: 1px solid var(--line);
    height: auto;

    /* Fade In */
    @media (prefers-reduced-motion: no-preference){
        animation-name: var(--opacity);
        animation-range: entry contain;
        animation-fill-mode: both;
        animation-timeline: view();
    }
}

.about-me div{
    margin-left: 1em;
}

.about-me div p{
    padding-top: 1em;
    padding-right: 3em;
    max-width: 60ch;  
}

.about-me img{
    width: 100%;
    height: auto;
    position: relative;
	object-fit: cover;

    img{
         aspect-ratio: 1;
    }

    @media (prefers-reduced-motion: no-preference) {
        animation-name: var(--animationNameImage);
        animation-range: entry contain;
        animation-fill-mode: both;
        animation-timeline: view();
    } 
}

@media (min-width: 600px){

    .about-me{
        gap: clamp(2rem, 5vw, 4rem);
        margin: clamp(2rem, 6vw, 6rem);
    }

    .about-me img{
        width: 80%;
        margin: 0 auto;
        height: auto;
        padding-left: 0;
        position: relative;  
    }
}

@media (min-width: 900px){

    .about-me{
        flex-direction: row;
        align-items: flex-start;
    }

    .about-me img{
        flex: 1;
        max-height: 60vh;
        object-fit: cover;

        position: var(--sticky);
        top: 15vh;
        padding-left: 3em;
    }
}

@keyframes imageAboutMe{

    from{
        opacity: 0;
        transform: translateX(15em)
    }

    to{
        opacity: 1;
        transform: translateX(0em)
    }

}

@keyframes opacity{

    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }

}

@media (min-width: 414px){

    .about-me div{
        margin-left: 0.5em;
        margin-right: 0.5em;  
    }
 
}

@media (min-width: 798px){

    .about-me div{
        margin-left: 1em;
        margin-right: 1em;  
    }
 
}

/* ------------------------------------------------------------------------------------------ MARK: GALLERY FOTO'S 
*/

::-webkit-scrollbar{
    width: 1px;
    height: 1px;
}

.horizontal-scroll-wrapper{
    display: flex;
    flex-direction: var(--flexDirection);
    flex-wrap: var(--flexWrap);
    gap: 2em;
    margin-top: clamp(6em, 15vh, 30em);

    width: var(--imageWidth);
    height: var(--imageHeight);

    transform: var(--imagesTransform);
    transform-origin: top left;
    overflow-y: var(--imagesOverflowY);
    overflow-x: var(--imagesOverflowX);
    perspective: 1px;
    transform-style: preserve-3d;
}

.horizontal-scroll-wrapper img{
    max-width: 45vh;
    max-height: 50vh;

    transition: 0.5s;
    vertical-align: top;
}

.img-wrapper{
    display: flex;
    align-items: center; 
    justify-content: center;

    min-height: var(--minimumHeightImages);
    transform-origin: 50% 50%;
    transform: var(--wrapper-transform) var(--parallax-transform);
    transition: 1s;
}

body:not(.other-theme) .img-wrapper:hover{
    min-height: 65vh;
}

.other-theme .horizontal-scroll-wrapper{
    display: flex;
    justify-content: center;

    width: 100%;
    max-width: 90vw;
    margin: 35em auto; 

    transform: none;
}

.other-theme .horizontal-scroll-wrapper img{
    object-fit: cover;
    display: block;
    transform: none;

    width: 100%;
    height: 100%;
}

.other-theme .img-wrapper{
    flex: 0 0 320px;  
    height: 300px;
    overflow: hidden;
    transform: none;
}

.slower{
    --parallax-transform: var(--transformSlower);
}

.slower1{
    --parallax-transform: var(--transformSlower1);
}

.slower2{
    --parallax-transform: var(--transformSlower2);
}

.slower-down{
    --parallax-transform: var(--transformSlowerDown);
}

.faster{
    --parallax-transform: var(--transformFaster);
}

.faster1{
    --parallax-transform: var(--transformFaster1);
}

.fastest{
    --parallax-transform: var(--transformFastest);
}

.vertical{
    --parallax-transform: var(--transformVertical);
}

.last{
    --parallax-transform: var(--transformLast);
}

.neutral{ /* Niet in de root gezet omdat er niks draait */
    --parallax-transform: translateZ(0px);
}

@media (max-width: 768px){

    .horizontal-scroll-wrapper{
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;

        width: 100%;
        height: auto;

        overflow-x: auto;
        overflow-y: hidden;

        transform: none;
        perspective: none;
        transform-style: flat;

        margin: 6em 1.5em 4em 1.5em;

        scroll-snap-type: x mandatory;
    }

    .img-wrapper{
        flex: 0 0 clamp(220px, 70vw, 320px);
        height: clamp(220px, 60vw, 300px);

        transform: none;
        min-height: auto;

        scroll-snap-align: start;
    }

    .horizontal-scroll-wrapper img{
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    body:not(.other-theme) .img-wrapper:hover{
        min-height: auto;
    }
}

/* --------------------------------------------------------------------------------------- MARK: API CLASSMATES  
*/

.classmates{
    display: flex;
    flex-direction: column;
    align-items: center;

    width: min(1200px, 90%);
    margin-inline: auto;
    margin-top: clamp(9em, 10vw, 10em);
    margin-bottom: clamp(4em, 10vw, 13em);

    @media (prefers-reduced-motion: no-preference){
        animation-name: var(--opacity);
        animation-range: entry contain;
        animation-fill-mode: both;
        animation-timeline: view(); 
    }
}

.classmates .classmate-item{
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;

    width: 100%;
    gap: 3em;
    margin-top: 3em;
}

.classmates .classmate-item img{
    width: 100%;
    max-width: 320px;
    aspect-ratio: 3 / 4;
    object-fit: cover;

    margin-bottom: clamp(0.75em, 2vw, 1em);
}

.classmates .classmate-item ul{
    margin-top: 1.5em;
    padding: 0;
}

.classmates .classmate-item li{
    color: var(--mainTextColor);
    text-transform: capitalize; /* Om elke eerste letter van de data uit de API een hoofdletter te geven. Iris had dit bijvoorbeeld niet gedaan */

    list-style: none;
}

.classmates .output-styling{
    font-weight: 100;
}

@media (max-width: 900px){
    .classmates .classmate-item{
        flex-direction: column;
        align-items: center;
    }

    .classmates .classmate-item img{
        max-width: 260px;
    }
}

@media (max-width: 500px){
    .classmates .classmate-item{
        gap: 2em;
    }

    .classmates .classmate-item img{
        max-width: 220px;
    }
}

.back-to-top{
    font-family: var(--normalFont);
    color: var(--mainTextColor);

    display: flex;
    justify-content: center;
    margin-bottom: 5em;

    cursor: pointer;
}

.back-to-top:hover{
    color: var(--hoverToTop);
}