/* -------------------- FONTS -------------------- */

@font-face { font-family: AkzidenzGrotesk; src: url('fonts/Akzidenz-grotesk-roman.ttf'); }
@font-face { font-family: AkzidenzGrotesk-Black; src: url('fonts/Akzidenz-grotesk-black.ttf'); }

/* -------------------- GENERAL -------------------- */

*{
    padding: 0;
    margin: 0;
    -webkit-user-drag: none;
    user-select: none;
    transition: translate 300ms ease-in-out;
    transition: grid 300ms ease-in-out;
}

.griddler p{
    font-family: AkzidenzGrotesk-Black;
    font-size: 2.5vh;
    translate: -100vw 3.3vh;
}

h1{
    font-family: AkzidenzGrotesk-Black;
    font-size: 23vh;
}

.griddler h1{
    font-family: AkzidenzGrotesk;
    font-weight: 100;
    font-size: 23vh;
    translate: -100vw -0.2vh;
}

#landing{
    background-position: 0 0vh;
    background-size: cover;
    background-image: url('images/moliets-background.jpg');
    animation: landingslide 2s ease forwards;
    background-repeat: no-repeat;
    display: block;
}

.content{
    width: 100%;
    height: 100vh;
}

/* -------------------- CURSOR -------------------- */

#cursor{
    position: fixed;
    width: 100px;
    height: 100px;
    background-color: rgba(255, 255, 255, 0);
    backdrop-filter: blur(5px);
    transform: translate(-50%, -50%);
    mix-blend-mode: soft-light;
    border-radius: 100%;
    border-style: groove;
    border-color: black;
    z-index: 100;
    pointer-events: none;
    transition: none;
}

/* -------------------- ANIMATIONS -------------------- */

@keyframes takeslide { from {translate: 100vw 5.8vh;} to {translate: 7vw 5.8vh;}}
@keyframes pictureslide { from {translate: -100vw 5.8vh;} to {translate: -1vw 5.8vh;}}
@keyframes withslide { from {translate: -100vw 5.8vh;} to {translate: 2vw 5.8vh;}}
@keyframes threeslide{from {translate: 100vw -8vh;} to {translate: 2vw -8vh;}}
@keyframes moreslide { from {translate: -100vw 5.8vh;} to {translate: -1vw 5.8vh;}}
@keyframes wordslideright{ from {translate: 100vw -8vh;} to {translate: 7vw -8vh;}}
@keyframes wordslideleft{ from {translate: -100vw -8vh;} to {translate: -1vw -8vh;}}
@keyframes meaningslide{ from {translate: -100vw 5.8vh;} to {translate: -19vw 5.8vh;}}
@keyframes meaningslideright{from {translate: 100vw -8vh;} to {translate: -19vw -8vh;}}
@keyframes meaningslidename{from {translate: 100vw -1vh;} to {translate: 1vw -1vh;}}
@keyframes textslide{from {translate: 100vw 1vh;} to {translate: -1vw 1vh;}}

@keyframes lineleft1{0%{width:0%;}100%{width: 47%;}}
@keyframes lineleft2{0%{width:0%;}100%{width: 85%;}}
@keyframes lineleft3{0%{width:0%;}100%{width: 32%;}}
@keyframes lineleft4{0%{width:0%;}100%{width: 65%;}}
@keyframes lineleft5{0%{width:0%;}100%{width: 90%;}}
@keyframes lineleft6{0%{width:0%;}100%{width: 140%;}}

@keyframes lineright1{0%{width:0%;}100%{width: 59%;}}
@keyframes lineright2{0%{width:0%;}100%{width: 95%;}}
@keyframes lineright3{0%{width:0%;}100%{width: 75%;}}
@keyframes lineright4{0%{width:0%;}100%{width: 71%;}}

@keyframes landingslide{0%{opacity: 0;}100%{opacity: 1;}}

.takeslide{ animation: takeslide 4s cubic-bezier(0.075, 0.82, 0.165, 1) forwards; animation-delay: 11s;}
.pictureslide{ animation: pictureslide 4s cubic-bezier(0.075, 0.82, 0.165, 1) forwards; animation-delay: 5s;}
.withslide{animation: withslide 4s cubic-bezier(0.075, 0.82, 0.165, 1) forwards; animation-delay: 10s;}
.moreslide{animation: moreslide 4s cubic-bezier(0.075, 0.82, 0.165, 1) forwards; animation-delay: 7s;}

.threeslide{translate: -100vw -0.1vh; animation: threeslide 4s cubic-bezier(0.075, 0.82, 0.165, 1) forwards;}
.meaningslide{translate: -100vw -0.1vh; animation: meaningslide 4s cubic-bezier(0.075, 0.82, 0.165, 1) forwards;}
.meaningslideright{translate: -100vw 3.3vh; animation: meaningslideright 4s cubic-bezier(0.075, 0.82, 0.165, 1) forwards;}
.daplug{animation: meaningslidename 4s cubic-bezier(0.075, 0.82, 0.165, 1) forwards; padding-right: 1vw;}

.wordslideleft{animation: wordslideleft 4s cubic-bezier(0.075, 0.82, 0.165, 1) forwards;}
.wordslideright{animation: wordslideright 4s cubic-bezier(0.075, 0.82, 0.165, 1) forwards;}

/* -------------------- DEFINING GRID -------------------- */


.griddler{
    display: grid;
    grid-template-columns: 3vw 47vw 47vw 3vw;
    grid-template-rows: 11.111111vh 11.111111vh 11.111111vh 11.111111vh 11.111111vh 11.111111vh 11.111111vh 11.111111vh 11.111111vh;
    overflow: hidden;
    animation-iteration-count: infinite;
}

/* -------------------- DEFINING ELEMENTS ON LEFT SIDE -------------------- */

.items-middle-left{
    display: flex;
    flex-wrap: nowrap;
    justify-content: start;
    align-items: end;
    grid-column: 2 / span 1;
    position: relative;
}

.items-middle-left:nth-child(5)::after{content: ""; background: black;position: absolute;bottom: 0;left: 32%;height: 2px;width: 0%; animation: lineleft1 4s cubic-bezier(0.075, 0.82, 0.165, 1) 12s forwards;}
.items-middle-left:nth-child(6)::after{content: ""; background: black;position: absolute;bottom: 0;left: 0;height: 2px;width: 0%; animation: lineleft2 4s cubic-bezier(0.075, 0.82, 0.165, 1) 11s forwards;}
.items-middle-left:nth-child(7){position:relative;}
.items-middle-left:nth-child(7)::after{content: ""; background: black;position: absolute;bottom: 0;left: 0;height: 2px;width: 0%; animation: lineleft3 8s cubic-bezier(0.075, 0.82, 0.165, 1) 10s forwards;}
.items-middle-left:nth-child(8){position:relative;}
.items-middle-left:nth-child(8)::after{content: ""; background: black;position: absolute;bottom: 0;left: 0;height: 2px;width: 0%; animation: lineleft4 8s cubic-bezier(0.075, 0.82, 0.165, 1) 9s forwards;}
.items-middle-left:nth-child(9)::after{content: ""; background: black;position: absolute;bottom: 0;right: -17vw;height: 2px;width: 0%; animation: lineleft5 8s cubic-bezier(0.075, 0.82, 0.165, 1) 2s forwards;}
.items-middle-left:nth-child(10)::after{content: ""; background: black;position: absolute;bottom: 0;left: 0;height: 2px;width: 0%; animation: lineleft6 8s cubic-bezier(0.075, 0.82, 0.165, 1) forwards;}

/* -------------------- DEFINING ELEMENTS ON RIGHT SIDE -------------------- */

.items-middle-right{
    display: flex;
    justify-content: end;
    align-items: end;
    grid-column: 3 / span 1;
}

.items-middle-right:nth-child(14){grid-row: 1 / span 1;position: relative;}
.items-middle-right:nth-child(14)::after{content: ""; background: black;position: absolute;bottom: 0;right: 0;height: 2px;width: 0%; animation: lineright1 8s cubic-bezier(0.075, 0.82, 0.165, 1) 4s forwards;}
.items-middle-right:nth-child(15){grid-row: 2 / span 1; position: relative;}
.items-middle-right:nth-child(15)::after{content: ""; background: black;position: absolute;bottom: 0;right: 0;height: 2px;width: 0%; animation: lineright2 8s cubic-bezier(0.075, 0.82, 0.165, 1) 5s forwards;}
.items-middle-right:nth-child(16){grid-row: 3 / span 1;position: relative;}
.items-middle-right:nth-child(16)::after{content: ""; background: black;position: absolute;bottom: 0;right: 0;height: 2px;width: 0%; animation: lineright3 8s cubic-bezier(0.075, 0.82, 0.165, 1) 7s forwards;}
.items-middle-right:nth-child(17){grid-row: 4 / span 1;position: relative;}
.items-middle-right:nth-child(17)::after{content: ""; background: black;position: absolute;bottom: 0;right: 0;height: 2px;width: 0%; animation: lineright4 8s cubic-bezier(0.075, 0.82, 0.165, 1) 8s forwards;}
.items-middle-right:nth-child(18){grid-row: 5 / span 1; align-items: start;}
.items-middle-right:nth-child(19){grid-row: 6 / span 1;}
.items-middle-right:nth-child(20){grid-row: 7 / span 1; position: relative;}
.items-middle-right:nth-child(21){grid-row: 8 / span 1;}
.items-middle-right:nth-child(22){grid-row: 9 / span 1;}
.items-middle-right:nth-child(18) p{animation: textslide 4s cubic-bezier(0.075, 0.82, 0.165, 1) forwards;}

/* -------------------- DEFINING SIDE-ELEMENTS ON LEFT SIDE -------------------- */

.balken-links-oben{
    border-right: 2px solid black;
    border-bottom: 2px solid black;
    grid-row: 1 / span 2;
    grid-column: 1 / span 1;
    background-color: crimson;
}

.balken-links-oben:nth-child(2){grid-row: 3 / span 2;}
.balken-links-oben:nth-child(3){grid-row: 5 / span 2;}
.balken-links-oben:nth-child(4){grid-row: 7 / span 3;;border-bottom: none;}

.balken-rechts-oben{
    border-left: 2px solid black;
    border-bottom: 2px solid black;
    grid-row: 1 / span 2;
    grid-column: 4 / span 1;
}

.balken-rechts-oben:nth-child(24){grid-row: 3 / span 2;}
.balken-rechts-oben:nth-child(25){grid-row: 5 / span 2;border-bottom: none;}
.balken-rechts-oben:nth-child(26){grid-row: 7 / span 3;border-bottom: none;}

/* -------------------- RESPONSIVE -------------------- */

@media screen and (max-width: 1500px) {
    #cursor {display: none;}

    .griddler h1{font-size: 14vh;}

    .griddler p{font-size: 2vh;}

    @keyframes takeslide { from {translate: 100vw 3.4vh;} to {translate: 7vw 3.4vh;}}

    @keyframes pictureslide { from {translate: -100vw 3.4vh;} to {translate: -1vw 3.4vh;}}

    @keyframes withslide { from {translate: -100vw 3.4vh;} to {translate: 2vw 3.4vh;}}

    @keyframes threeslide{from {translate: 100vh -8vh;} to {translate: 2vh -8vh;}}

    @keyframes moreslide { from {translate: -100vw 3.4vh;} to {translate: -1vw 3.4vh;}}

    @keyframes meaningslide{ from {translate: -100vw  3.4vh;} to {translate: -15vw 3.4vh;}}

    @keyframes wordslideright{ from {translate: 100vw -5vh;} to {translate: 7vw -5vh;}}

    @keyframes wordslideleft{ from {translate: -100vw -5vh;} to {translate: -1vw -5vh;}}

    @keyframes meaningslideright{from {translate: 100vw -5vh;} to {translate: -15vw -5vh;}}

    @keyframes textslide{from {translate: 100vw -1vh;} to {translate: -1vw -1vh;}}

    @keyframes meaningslidename{from {translate: 100vw -1vh;} to {translate: 1vw -1vh;}}

    .items-middle-right:nth-child(18){align-items: end;}
}

@media screen and (max-width: 950px) {
    .griddler h1{font-size: 14vh;}

    .griddler p{font-size: 1.5vh;}

    .items-middle-right:nth-child(15){grid-row: 3 / span 1;}

    .items-middle-left:nth-child(8){grid-row: 5 / span 1;}

    .items-middle-right:nth-child(17){grid-row: 5 / span 1;}

    .items-middle-right:nth-child(18){grid-row: 6 / span 1;}

    .items-middle-right:nth-child(19){grid-row: 7 / span 1;}

    @keyframes lineleft6{0%{width:0%;}100%{width: 200%;}}

    @keyframes takeslide { from {translate: 100vw 3.4vh;} to {translate: 6vw 3.4vh;}}

    @keyframes pictureslide { from {translate: -100vw 3.4vh;} to {translate: -1vw 3.4vh;}}

    @keyframes withslide { from {translate: -100vw 3.4vh;} to {translate: 2vw 3.4vh;}}

    @keyframes threeslide{from {translate: 100vh -3.5vh;} to {translate: 2vh -3.5vh;}}

    @keyframes moreslide { from {translate: -100vw 3.4vh;} to {translate: -1vw 3.4vh;}}

    @keyframes meaningslide{ from {translate: -100vw  3.4vh;} to {translate: -3vw 3.4vh;}}

    @keyframes wordslideright{ from {translate: 100vw -3.5vh;} to {translate: 7vw -3.5vh;}}

    @keyframes wordslideleft{ from {translate: -100vw -3.5vh;} to {translate: -1vw -3.5vh;}}

    @keyframes meaningslideright{from {translate: 100vw -3.5vh;} to {translate: -3vw -3.5vh;}}

    @keyframes textslide{from {translate: 100vw -1vh;} to {translate: -1vw -1vh;}}

    @keyframes meaningslidename{from {translate: 100vw -1vh;} to {translate: 1vw -1vh;}}

    .items-middle-left:nth-child(7)::after{content: ""; background: none;position: absolute;bottom: 0;left: 0;height: 2px;width: 0%; animation: lineleft3 8s cubic-bezier(0.075, 0.82, 0.165, 1) 10s forwards;}

    @keyframes lineleft5{0%{width:0%;}100%{width: 150%;}}

    .items-middle-left:nth-child(9)::after{content: ""; background: black;position: absolute;bottom: 0;right: -45vw;height: 2px;width: 0%; animation: lineleft5 8s cubic-bezier(0.075, 0.82, 0.165, 1) 2s forwards;}

    @keyframes lineright1{0%{width:0%;}100%{width: 120%;}}

    .items-middle-right:nth-child(14)::after{content: ""; background: black;position: absolute;bottom: 0;right: 5vw;height: 2px;width: 0%; animation: lineright1 8s cubic-bezier(0.075, 0.82, 0.165, 1) 4s forwards;}

    .items-middle-left:nth-child(5)::after{content: ""; background: black;position: absolute;bottom: 0;left: 5vw;height: 2px;width: 0%; animation: lineleft1 4s cubic-bezier(0.075, 0.82, 0.165, 1) 12s forwards;}

    @keyframes linemobilebottom{0%{width:0%;}100%{width: 150%;}}

    .items-middle-right:nth-child(20)::after{content: ""; background: black;position: absolute;bottom: 0;right: 0vw;height: 2px;width: 0%; animation: linemobilebottom 4s cubic-bezier(0.075, 0.82, 0.165, 1) 1s forwards;}

    .items-middle-right:nth-child(18){grid-row: 4 / span 1;}

    .items-middle-right:nth-child(17){grid-row: 6 / span 1;}
}

@media screen and (max-width: 600px) {
    .griddler h1{
        font-size: 11vh;
    }


    @keyframes takeslide { from {translate: 100vw 2.8vh;} to {translate: 6vw 2.8vh;}}

    @keyframes pictureslide { from {translate: -100vw 2.8vh;} to {translate: -1vw 2.8vh;}}

    @keyframes withslide { from {translate: -100vw 2.8vh;} to {translate: 2vw 2.8vh;}}

    @keyframes threeslide{from {translate: 100vh -3.5vh;} to {translate: 2vh -3.5vh;}}

    @keyframes moreslide { from {translate: -100vw 2.8vh;} to {translate: -1vw 2.8vh;}}

    @keyframes meaningslide{ from {translate: -100vw  2.8vh;} to {translate: -3vw 2.8vh;}}

    @keyframes wordslideright{ from {translate: 100vw -3.5vh;} to {translate: 7vw -3.5vh;}}

    @keyframes wordslideleft{ from {translate: -100vw -3.5vh;} to {translate: -1vw -3.5vh;}}

    @keyframes meaningslideright{from {translate: 100vw -3.5vh;} to {translate: -3vw -3.5vh;}}

    @keyframes meaningslidename{from {translate: 100vw -1vh;} to {translate: 1vw -1vh;}}

    @keyframes linemobilebottom{0%{width:0%;}100%{width: 200%;}}

    .items-middle-right:nth-child(20)::after{content: ""; background: black;position: absolute;bottom: 0;right: 0vw;height: 2px;width: 0%; animation: linemobilebottom 4s cubic-bezier(0.075, 0.82, 0.165, 1) 1s forwards;}

    @keyframes lineleft4{0%{width:0%;}100%{width: 100%;}}

    .items-middle-left:nth-child(8)::after{content: ""; background: black;position: absolute;bottom: 0;left: 0;height: 2px;width: 0%; animation: lineleft4 8s cubic-bezier(0.075, 0.82, 0.165, 1) 9s forwards;}

    .items-middle-left:nth-child(9)::after{content: ""; background: black;position: absolute;bottom: 0;right: -50vw;height: 2px;width: 0%; animation: lineleft5 8s cubic-bezier(0.075, 0.82, 0.165, 1) 2s forwards;}

}