@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'); }

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

.svg{
    height: 100%;
    translate: 2vw 0;
}

p{
    font-family: AkzidenzGrotesk-Black;
    font-size: 2.5vmin;
    translate: -100vw 3.3vh;
    animation: wordslideleft 4s cubic-bezier(0.075, 0.82, 0.165, 1) forwards;
}

p:nth-child(even){
    translate: 100vw 3.3vh;
    animation: wordslideright 4s cubic-bezier(0.075, 0.82, 0.165, 1) forwards;
}

h1{
    font-family: AkzidenzGrotesk;
    font-weight: 100;
    font-size: 23vh;
    translate: -100vw -0.2vh;
    animation: wordslideleft 4s cubic-bezier(0.075, 0.82, 0.165, 1) forwards;
}

h1:nth-child(even){
    translate: 100vw 3.3vh;
    animation: wordslideright 4s cubic-bezier(0.075, 0.82, 0.165, 1) forwards;
}

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

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

@keyframes meaningslide{
    from {translate: -100vw -0.2vh;}
    to {translate: 19vw -0.2vh;}
}

@keyframes meaningslideright{
    from {translate: 100vw -0.2vh;}
    to {translate: 19vw -0.2vh;}
}

@keyframes meaningslidename{
    from {translate: 100vw 2vh;}
    to {translate: 8.3vw 2vh;}
}

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

.items-middle-left:nth-child(10) h1{translate: -100vw -0.1vh; animation: meaningslide 4s cubic-bezier(0.075, 0.82, 0.165, 1) forwards;}
.items-middle-left:nth-child(10) p{translate: -100vw 3.3vh; animation: meaningslideright 4s cubic-bezier(0.075, 0.82, 0.165, 1) forwards;}
.items-middle-left:nth-child(10) .daplug{animation: meaningslidename 4s cubic-bezier(0.075, 0.82, 0.165, 1) forwards; padding-right: 1vw;}

#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;
}

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

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

.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;
}

.griddler:has(.balken-links-oben:nth-child(1):hover){
    grid-template-columns: 9vw 44vw 44vw 3vw;
}

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

.items-middle-left{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){justify-content: start;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){justify-content: start;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;}


@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%;}}

.items-middle-right{
    display: flex;
    justify-content: center;
    align-items: center;
    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;justify-content: start;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; justify-content: end;}
.items-middle-right:nth-child(19){grid-row: 6 / span 1;}
.items-middle-right:nth-child(20){grid-row: 7 / span 1;}
.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;}

@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%;}}

.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(23){}
.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;}