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

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

p{
    font-family: AkzidenzGrotesk;
    font-size: 6vmin;
    padding: 10px;
}



h1{
    font-family: AkzidenzGrotesk;
    font-weight: 100;
    font-size: 11.2vmax;
    translate: 3vw -0.15vh;
}


.items-middle-left:nth-child(10) h1{translate: 19vw -0.15vh}

#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{
    width: 100vw;
    height: 100vh;
    background-size: cover;
    background-position: 0 -8.3vh;
    background-image: url('images/moliets-background.jpg');
    /* overflow: hidden; */
}

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

.griddler:has(.balken-links-oben:nth-child(1):hover){
    grid-template-columns: 9vw 44vw 44vw 3vw;
    transition: all 300ms ease-in-out;
}

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

.items-middle-left:nth-child(5){position: relative;}
.items-middle-left:nth-child(5)::after{content: ""; background: black;position: absolute;bottom: 0;left: 32%;height: 2px;width: 47%;}
.items-middle-left:nth-child(6){position: relative;}
.items-middle-left:nth-child(6)::after{content: ""; background: black;position: absolute;bottom: 0;left: 0;height: 2px;width: 85%;}
.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: 32%;}
.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: 65%;}
.items-middle-left:nth-child(9){position: relative;}
.items-middle-left:nth-child(9)::after{content: ""; background: black;position: absolute;bottom: 0;right: -17vw;height: 2px;width: 90%;}
.items-middle-left:nth-child(10){position: relative;}
.items-middle-left:nth-child(10)::after{content: ""; background: black;position: absolute;bottom: 0;left: 0;height: 2px;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: 59%;}
.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: 95%;}
.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: 75%;}
.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: 71%;}
.items-middle-right:nth-child(18){grid-row: 5 / span 1;}
.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;}

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