.splashscreen {
    position: fixed;
    width: 100%;
    height: 100vh;
    height: calc(var(--mobile_vh, 1vh) * 100);
    z-index: 999;
    left: 0;
    top: 0;
    background-color: var(--light-grey);
    transition: 1s;
}

.splashscreen_logo {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    height: calc(var(--mobile_vh, 1vh) * 100);
    color: var(--black);
}

.svg_splashscreen {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    height: calc(var(--mobile_vh, 1vh) * 100);
    color: var(--black);
}

.svg_splashscreen svg {
    width: 100px;
    height: 100px;
    opacity: 0.5;
}

.splashscreen_logo h2 {
    position: relative;
    width: 100%;
    height: 100vh;
    height: calc(var(--mobile_vh, 1vh) * 100);
}

.splashscreen_logo .splashscreen_letter {
    position: absolute;
    display: inline-block;
    top: 50%;
    left: 50%;
    margin-top: -64px;
    margin-left: -41px;
    width: calc(100% - 50px);
    height: calc(100vh - 50px);
    height: calc((var(--mobile_vh, 1vh) * 100) - 50px);
    opacity: 0;
    font-size: 69px;
    font-style: normal;
    font-family: 'noah_grotesqueextrabold';
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 200;
}

.splashscreen_logo .splashscreen_letter:last-of-type {
    margin-top: -12px;
    margin-left: -5px;
}

.splashscreen_logo .splashscreen_letter.active {
    margin-top: -84px;
    margin-left: -41px;
    opacity: 1;
    transition: ease-in-out 0.5s;
}

.splashscreen_logo .splashscreen_letter.active:last-of-type {
    margin-top: -32px;
    margin-left: -5px;
    opacity: 1;
    transition: ease-in-out 0.5s;
}

.splashscreen_logo .splashscreen_letter.fade {
    transform: translate(-50%, -50%);
    margin-top: -35px;
    margin-left: 0px;
    opacity: 1;
    transition: ease-in-out 0.5s;
}

.splashscreen_logo .splashscreen_letter.fade:last-of-type {
    transform: translate(50%, 50%);
    margin-top: -81px;
    margin-left: -45px;
    opacity: 1;
    transition: ease-in-out 0.5s;
}

@media (max-width: 800px) {
    .splashscreen_logo .splashscreen_letter {
        margin-top: -64px;
        margin-left: -41px;
        width: calc(100% - 40px);
        height: calc(100vh - 40px);
        height: calc((var(--mobile_vh, 1vh) * 100) - 40px);
    }

    .splashscreen_logo .splashscreen_letter:last-of-type {
        margin-top: -12px;
        margin-left: -5px;
    }
    
    .splashscreen_logo .splashscreen_letter.active {
        margin-top: -84px;
        margin-left: -41px;
    }
    
    .splashscreen_logo .splashscreen_letter.active:last-of-type {
        margin-top: -32px;
        margin-left: -5px;
    }
    
    .splashscreen_logo .splashscreen_letter.fade {
        margin-top: -35px;
        margin-left: 0px;
    }
    
    .splashscreen_logo .splashscreen_letter.fade:last-of-type {
        margin-top: -81px;
        margin-left: -45px;
    }
}