.left-right-split {
    position: absolute;
    display: flex;
    flex-direction: column;
    height: 100vh;
    width: 100vw;
}
@media (min-width: 50rem) {
    .left-right-split {
        flex-direction: row;
    }
}

/* Blurred overlay */
.left-right-split-blur {
    position: absolute;

    width: 100%;
    height: 100%;
    backdrop-filter: blur(5px);
    background: rgba(0, 0, 0, 0.01); /* Light transparent tint */
}

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

@font-face {
    font-family: 'Slacker';
    src: url('/fonts/Slacker.woff2') format('woff2'),
         url('/fonts/Slacker.woff')  format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'rough typewriter';
    src: url('/fonts/rough_typewriter.woff2') format('woff2'),
         url('/fonts/rough_typewriter.woff')  format('woff');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Noto Sans';
    src: url('/fonts/NotoSans-Regular.woff2') format('woff2'),
         url('/fonts/NotoSans-Regular.woff')  format('woff');
    font-weight: normal;
    font-style: normal;
}

/* ------------ TEXT  ------------- */

.matthias-text h1 {
    position: absolute;
    transform: translateX(-50%);
    left: 50%;
    top: 13vh;
    font-family: 'rough typewriter';

    font-size: 3vw;
    color: rgb(var(--mw-txt-color-white-grey));
}
@media (max-width: 50rem) {
    .matthias-text h1 {
        font-size: 1.2rem;
    }
}
@media (min-width: 50rem) {
    .matthias-text h1 {
        top: 23vh;
    }
}
@media (min-width: 1568px) {
    .matthias-text h1 {
        font-size: 3rem;
    }
}

.half-screen {
    flex: 1;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    justify-content: center;
}


.left-panel {
    background-position: top center;
    background-image: url('/img/paintings.jpg');
}

.paintings-text {
    position: absolute;
    top: 31vh;
    font-family: 'Slacker';
    font-size: 8vw;
    color: rgb(var(--mw-txt-color-red));
}
@media (max-width: 50rem) {
    .paintings-text {
        font-size: 3rem;
    }
}
@media (min-width: 50rem) {
    .paintings-text {
        top: 48vh;
    }
}
@media (min-width: 1568px) {
    .paintings-text {
        font-size: 8rem;
    }
}

.right-panel {
    background-image: url('/img/who_i_am_and_what_i_want.jpg');
}

.films-text {
    position: absolute;
    top: 70vh;
    font-family: 'Noto Sans';
    font-size: 7.5vw;
    font-style: italic;
    font-weight: bold;
    color: rgb(var(--mw-txt-color-yellow-orange));
}
@media (max-width: 50rem) {
    .films-text {
        font-size: 3rem;
    }
}
@media (min-width: 50rem) {
    .films-text {
        top: 47vh;
    }
}
@media (min-width: 1568px) {
    .films-text {
        font-size: 8rem;
    }
}