/*reset*/

*{
    padding: 0;
    margin: 0;
}

/*general*/

:root{
    --translateYvalue: 75.4vh;
}
html{
    scroll-behavior: smooth;
}
body{
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #fbfbfb;
}
a{
    text-decoration: none;
    color: black;
}
#scrollUp {
    display: none;
    position: fixed;
    height: 2.5vw;
    min-height: 2rem;
    width: 2.5vw;
    min-width: 2rem;
    bottom: 4%;
    right: 2%; 
    z-index: 99;
    background-color: #212121;
    color: white;
    font-weight: 900;
    cursor: pointer;
    border-radius: 50%;
    font-size: clamp(1.5rem, 2vw, 4rem);
}
#scrollUpStyle
#scrollUp:hover {
    background-color: rgb(89, 89, 89);
}

img {
    max-width: 100%;
    height: auto;
    width: 9/auto;
}
.overflow-hidden{
    overflow: hidden;
}
.nav-container{
    position: absolute;
    display: grid;
    pointer-events: none;
    width: 100vw;
    height: 30vh;
    grid-template-rows: repeat(2, 10vh);
    grid-template-columns: repeat(10, 10vw);
    z-index: 10;
}
.gothic{
    font-family: "century-gothic", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: clamp(0.1rem, 0.9vw, 3rem);
}
.gothic-bold{
    font-family: "century-gothic", sans-serif;
    font-weight: 700;
    font-style: normal;
}
.italic{
    font-style: italic;
}
.white-text{
    color: #fbfbfb;
}
.header{
    font-family: "fino-sans";
    font-size: clamp(1rem, 8.5vw, 20rem);
}
.text-container{
    display: grid;
    width: 100vw;
    grid-template-columns: repeat(10, 10vw);
    padding-bottom: 10vh;
}
.text-header{
    font-family: "fino-sans";
    font-size: clamp(1rem, 3vw, 5rem);
}
.context-container{
    height: 30vh;
    grid-template-rows: repeat(3, 10vh);
}
.context-header{
    grid-row: 1;
    grid-column: 2 / 5;
    margin-left: 5vw;
    margin-top: 5vh;
}
.context-text{
    grid-row: 1 / 4;
    grid-column: 5 / 8;
    margin-top: 9vh;
}
.full-report{
    grid-row: 4;
    grid-column: 5 / 7;
    margin-top: -4vh;
}
.link{
    font-style: italic;
    text-decoration: underline;
}
.iteratie-feedback{
    padding: 10%;
}
.iteration-container{
    position: fixed;
    background-color: #212121;
    padding: 10%;
    inset: 0%;
    overflow: scroll;
    overflow-x: hidden;
    z-index: 100;
    transition: all 1s;
}
button{
    background-color: transparent;
    border: none;
    cursor: pointer;
}
.display-none{
    pointer-events: none;
    opacity: 0;
    margin-top: -400vh;
}
#projects{
    pointer-events: all;
    grid-row: 2;
    grid-column: 10;
    justify-self: end;
    font-size: 1.2rem;
    margin-right: 5vw;
}
.hidden {
    opacity: 0;
    filter: blur(5px);
    transition: all 1s;
}
.hidden-left{
    transform: translateX(-100%);
}
.hidden-right{
    transform: translateX(100%);
}
.show{
    opacity: 1;
    filter: blur(0);
    transform: translateX(0);
}

/*learning-outcomes*/

#learning-outcomes{
    pointer-events: all;
    grid-row: 2;
    grid-column: 1 / 3;
    justify-self: start;
    font-size: 1.2rem;
    margin-left: 5vw;
    white-space: nowrap;
    height: fit-content;
}
#learning-outcomes:hover{
    cursor: pointer;
}
.nav-container-iterations{
    position: relative;
    width: 100vw;
    height: 5vh;
    left: -7.5%;
    top: -17.5%;
}
.nav-container-naakt{
    position: relative;
    width: 100vw;
    height: 5vh;
    left: -6.5%;
    top: -17.5%;
}
.popup-close{
    position: absolute;
    top: 0;
    right: 10%;
    font-size: 1.2rem;
}
.nav-container-brandguide{
    position: relative;
    width: 100vw;
    height: 5vh;
    left: 5%;
    top: -17.5%;
}
#learning-outcomes-brandguide{
    cursor: pointer;
}
#learning-outcomes-poster{
    cursor: pointer;
}
#learning-outcomes-naakt{
    cursor: pointer;
}
#learning-outcomes-collapsible{
    position: absolute;
    background-color: #212121;
    z-index: 120;
    height: 100vh;
    margin-top: -200vh;
    transition: margin-top 1.5s;
    overflow: scroll;
}
#learning-outcomes-collapsible.active{
    margin-top: 0;
}
#learning-outcomes-back{
    position: fixed;
    font-size: 1.2rem;
    margin-left: 5vw;
    margin-top: 10vh;
    cursor: pointer;
}
#learning-outcomes-header1{
    grid-row: 2 / 4;
    grid-column: 9;
    justify-self: end;
    margin-top: 10vh;
}
#learning-outcomes-header2{
    grid-row: 4 / 6;
    grid-column: 9;
    justify-self: end;
    margin-top: -6vh;
}
.learning-outcomes-container{
    
    width: 40vw;
    height: fit-content;
    padding: 2vw;
    border-radius: 1vw;
    font-size: 1rem;
}
#interactive-media-header{
    grid-row: 6;
    grid-column: 2;
    margin-left: 3vw;
    white-space: nowrap;
}
#interactive-media-container{
    grid-row: 6;
    grid-column: 3;
    margin-top: 10vh;
    margin-bottom: 10vh;
}
#development-header{
    grid-row: 12;
    grid-column: 10;
    justify-self: end;
    margin-right: 6vw;
}
#development-container{
    grid-row: 12;
    grid-column: 6;
    margin-top: 10vh;
}
#design-header{
    grid-row: 12;
    grid-column: 2;
}
#design-container{
    width: 25vw;
    grid-row: 12;
    grid-column: 2;
    margin-top: 10vh;
    margin-bottom: 10vh;
}
#research-header{
    grid-row: 18;
    grid-column: 10;
    justify-self: end;
    margin-right: 6vw;
}
#research-container{
    width: 30vw;
    grid-row: 18;
    grid-column: 7;
    word-wrap: break-word;
    margin-top: 10vh;
}
#communication-header{
    grid-row: 18;
    grid-column: 2;
}
#communication-container{
    grid-row: 18;
    grid-column: 2;
    margin-top: 10vh;
}
#identity-header{
    grid-row: 25;
    grid-column: 4;
    margin-right: 6.5vw;
    white-space: nowrap;
}
#identity-container{
    grid-row: 25;
    grid-column: 4;
    margin-top: 10vh;
    margin-bottom: 10vh;
}

/*index*/

#project-title-view{
    position: absolute;
    top: 30%;
    left: 20%;
    height: 50vh;
    width: 40vw;
    overflow: hidden;
    z-index: 5;
}
#project-title-container{
    margin-top: -175%;
}
.project-title{
    font-family: fino-sans;
    font-size: 10vw;
    margin-bottom: 30vh;
}
.bottom-title{
    margin-top: -8%;
}
#media-top{
    margin-left: 10.6vw;
}
#project-bottom{
    margin-left: 6.85vw;
}
#naakt-top{
    margin-left: 10vw;
}
#about-me-top{
    padding-top: 20%;
}
#brand-bottom{
    margin-left: 11.3vw;
}

#index-img-container{
    display: flex;
    flex-wrap: wrap;
    position: fixed;
    left: 55vw;
    top: -135vh;
    transform: rotate(10deg);
    width: 30vw;
}
.page-link-img{
    width: 30vw;
    height: 68vh;
    padding-bottom: 7vh;
    object-fit: contain;
}
.animate-scroll-title{
    animation: animate-scroll 1s ease-in-out reverse, animate-opacity 1s ease-in-out;
}
.animate-scroll-img{
    animation: animate-scroll 1s ease-in-out reverse;
}
@keyframes animate-scroll {
    100%{
        transform: translateY(var(--translateYvalue));
    }
}
@keyframes animate-opacity {
    0%{
        opacity: 1;
    }
    50%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}
/*about*/

.me-container{
    display: grid;
    background-color: #fbfbfb;
    width: 100vw;
    height: 100vh;
    grid-template-rows: repeat(10, 10vh);
    grid-template-columns: repeat(10, 10vw);
}
#me-background-container{
    grid-row: 3;
    grid-column: 7 / 10;
}
#me-background-image{
    width: 50vw;
}
#me-header{
    grid-row: 3 / 6;
    grid-column: 2 / 7;
    margin-top: 2vh;
    margin-left: 4vw;
}
#me-text{
    grid-row: 5 / 9;
    grid-column: 3 / 8;
    margin-top: 3vh;
}

/*brand_a_band*/

.brand-container-header{
    display: grid;
    background-color: #fbfbfb;
    width: 100vw;
    height: 150vh;
    grid-template-rows: repeat(5, 10vh);
    grid-template-columns: repeat(10, 10vw);
}
#brand-header{
    position: absolute;
    top: -15vw;
    right: 0%;
}
#kathleen-header{
    position: absolute;
    justify-self: start;
    top: -8.5vw;
}
#brand-start-image{
    position: relative;
    width: 80vw;
    margin-left: 10vw;
    margin-top: 50vh;
}
#brand-style-guide-container{
    min-height: 100vh;
    grid-template-rows: repeat(10, 10vh);
}
#brand-style-header{
    margin-left: -5.5vw;
}
#brand-style-text{
    grid-row: 2 / 4;
    grid-column: 3 / 8;
    margin-left: 3vw;
}
#brand-guide-header{
    margin-left: 25.5vw;
}
#brand-guide-text{
    grid-row: 6 / 10;
    grid-column: 5 / 9;
    margin-right: 6vw;
    margin-top: 4vh;
}
#brand-guide-img-container{
    display: grid;
    background-color: #212121;
    height: 110vh;
    grid-template-rows: repeat(11, 10vh);
    grid-template-columns: repeat(10, 10vw);
    padding-bottom: 5vh;
}
.brandguide-width{
    width: 50vw;
}
.red-brown{
    background-image: url('images/Brand_Kathleen/Brandguide/Brandguide_v2_Bruin.png');
    height: auto;
    width: 50vw;
    background-size: contain;
    background-repeat: no-repeat;
}
.red-brown:hover{
    background-image: url('images/Brand_Kathleen/Brandguide/Brandguide_v2_Rood.png');
}
#last-brandguide-feedback{
    margin-top: 290%;
    margin-left: -10%;
}
#final-brandguide{
    margin-top: 3%;
}
#brandguide-iterations{
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow-x: hidden;
}
#brand-story-img{
    grid-row: 2 / 5;
    grid-column: 2 / 6;
    margin-right: 2vw;
    z-index: 0;
}
#brand-photo-img{
    grid-row: 5 / 8;
    grid-column: 4 / 10;
    margin-top: 3vh;
    margin-right: 5.15vw;
    z-index: 1;
}
.brand-rounded-corners{
    border-radius: 1vw;
}
#brand-content-container{
    height: 60vh;
    grid-template-rows: repeat(6, 10vh);
}
#brand-content-header{
    margin-left: -11vw;
}
#brand-content-text{
    grid-row: 2 / 5;
    grid-column: 4 / 8;
    margin-left: 2vw;
    margin-top: 3vh;
}
#brand-persona-user-container{
    display: flex;
    flex-direction: row;
    align-items: center;
    height: fit-content;
    min-height: 60vh;
    width: 100vw;
}
.brand-persona-user{
    height: inherit;
    width: 50%;
}
#brand-poster-container{
    height: 50vh;
    grid-template-rows: repeat(5, 10vh);
}
#brand-poster-header{
    margin-left: -5vw;
}
#brand-poster-text{
    grid-row: 2 / 4;
    grid-column: 5 / 9;
}
#brand-poster-img{
    width: 80vw;
    padding-bottom: 10vw;
}
#poster-iterations{
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: fit-content;
}

/*media campaign*/

#media-container-header{
    display: grid;
    background-color: #fbfbfb;
    width: 100vw;
    height: 150vh;
    grid-template-rows: repeat(5, 10vh);
    grid-template-columns: repeat(10, 10vw);
    padding-bottom: 10vh;
}
#media-header{
    grid-row: 3 / 7;
    grid-column: 2 / 8;
    justify-self: start;
    margin-left: 5vw;
}
#mcdonalds-header{
    grid-row: 3 / 7;
    grid-column: 5 / 10;
    margin-top: 15vh;
    margin-right: 2.7vw;
    justify-self: end;
}
#media-start-image{
    width: 80vw;
    margin-left: 10vw;
    margin-top: 55vh;
}
#media-preparation-container{
    height: 70vh;
    grid-template-rows: repeat(7, 10vh);
}
#media-preparation-img{
    grid-row: 1 / 8;
    grid-column: 2 / 5;
    margin-left: 5vw;
}
#media-preparation-header{
    margin-left: -5vw;
    margin-top: 5vh;
}
#media-preparation-text{
    grid-row: 1 / 5;
    grid-column: 7 / 10;
    margin-right: 6vw;
}
#media-theme-container{
    height: 80vh;
    grid-template-rows: repeat(8, 10vh);
}
#media-theme-header{
    grid-row: 1;
    grid-column: 4 / 7;
}
#media-theme-text{
    grid-row: 2 / 7;
    grid-column: 3 / 8;
}
#media-game-container{
    height: 100vh;
    grid-template-rows: repeat(10, 10vh);
}
.media-video{
    height: auto;
    width: 20vw;
    grid-row: 3;
}
#media-video-one{
    grid-column: 1;
    margin-left: 5vw;
}
#media-video-two{
    grid-column: 10;
    margin-right: 5vw;
    justify-self: end;
}
#media-game-header{
    margin-left: 5vw;
}
#media-game-text{
    grid-row: 3;
    grid-column: 4 / 8;
    margin-top: 5vh;
}
#media-presentation-container{
    height: 60vh;
    grid-template-rows: repeat(6, 10vh);
}
#media-presentation-header{
    margin-left: -7.5vw;
}
#media-presentation-text{
    grid-row: 1;
    grid-column: 4 / 8;
}

/*retrochess*/

#retrochess-container-header{
    display: grid;
    background-color: #fbfbfb;
    width: 100vw;
    height: 120vh;
    grid-template-rows: repeat(12, 10vh);
    grid-template-columns: repeat(10, 10vw);
    padding-bottom: 15vh;
}
#retrochess-individual-header{
    position: absolute;
    top: 8.5vw;
}
#retrochess-header{
    position: absolute;
    top: 15vw;
    right: 10%;
}
#retrochess-start-image{
    width: 80vw;
    margin-left: 10vw;
    margin-top: 50vh;
}
#retrochess-preparation-container{
    height: 50vh;
    grid-template-rows: repeat(5, 10vh);
}
#retrochess-preparation-header{
    margin-left: -5vw;
}
#retrochess-preparation-text{
    grid-row: 3 / 5;
    grid-column: 3 / 6;
    margin-left: 5vw;
    margin-top: 3vh;
}
#retrochess-shotgunking{
    grid-row: 2;
    grid-column: 7 / 9;
}
#retrochess-weekone-container{
    height: 60vh;
    grid-template-rows: repeat(6, 10vh);
}
#retrochess-weekone-header{
    margin-left: -6vw;
}
#retrochess-weekone-text{
    grid-row: 3;
    grid-column: 4 / 8;
}
.retrochess-video{
    height: auto;
    width: 80vw;
}
#retrochess-weektwo-container{
    height: 60vh;
    grid-template-rows: repeat(6, 10vh);
}
#retrochess-weektwo-header{
    white-space: nowrap;
    margin-left: 32vw;
}
#retrochess-weektwo-text{
    grid-row: 2;
    grid-column: 4 / 8;
}
#retrochess-video-two{
    padding-bottom: 10vw;
}

/* naakt magazine */

#naakt-header{
    position: absolute;
    top: -10vw;
    right: 5%;
}

#magazine-preparation-container{
    height: 40vh;
    grid-template-rows: repeat(4, 10vh);
}
#magazine-preparation-header{
    margin-left: -4vw;
}
#magazine-preparation-text{
    grid-row: 1;
    grid-column: 4/9;
}
#testing-designs{
    display: flex;
    flex-direction: row;
    max-width: 50%;
}
#naakt-development-container{
    height: 50vh;
    grid-template-rows: repeat(5, 10vh);
}
#naakt-development-text{
    grid-row: 2;
    grid-column: 3/8;
}
#naakt-development-header{
    margin-left: -4.5vw;
}