#loading-screen {
    z-index: 1500;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

#loading-screen.slide-up {
    transform: translateY(-100%);
    transition: transform 0.5s ease-in-out;
}

#logo-container {
    position: relative;
    display: flex;
    justify-self: center;
    align-items: center;
    transform-origin: center center;
    will-change: transform;
    z-index: 1600;
}

#logo-no-border {
    z-index: 1;
    position: relative;
    width: calc(100vh/3);
    height: auto;
}

#white-border {
    z-index: 2;
    position: absolute;
    width: calc(100vh/3);
    height: auto;
    mix-blend-mode: screen;
    animation: progressBorder 1s linear forwards;
}

@keyframes progressBorder {
    0% {
        opacity: 1;
        clip-path: polygon(50% 50%, 50% 0%, 50% 0%, 50% 0%);
    }

    5% {
        clip-path: polygon(50% 50%, 50% 0%, 70% 0%, 70% 0%);
    }

    10% {
        clip-path: polygon(50% 50%, 50% 0%, 85% 0%, 85% 0%);
    }

    15% {
        clip-path: polygon(50% 50%, 50% 0%, 100% 0%, 100% 15%);
    }

    20% {
        clip-path: polygon(50% 50%, 50% 0%, 100% 0%, 100% 30%);
    }

    25% {
        clip-path: polygon(50% 50%, 50% 0%, 100% 0%, 100% 50%);
    }

    30% {
        clip-path: polygon(50% 50%, 50% 0%, 100% 0%, 100% 70%);
    }

    35% {
        clip-path: polygon(50% 50%, 50% 0%, 100% 0%, 100% 85%);
    }

    40% {
        clip-path: polygon(50% 50%, 50% 0%, 100% 0%, 100% 100%, 85% 100%);
    }

    45% {
        clip-path: polygon(50% 50%, 50% 0%, 100% 0%, 100% 100%, 70% 100%);
    }

    50% {
        clip-path: polygon(50% 50%, 50% 0%, 100% 0%, 100% 100%, 50% 100%);
    }

    55% {
        clip-path: polygon(50% 50%, 50% 0%, 100% 0%, 100% 100%, 30% 100%);
    }

    60% {
        clip-path: polygon(50% 50%, 50% 0%, 100% 0%, 100% 100%, 15% 100%);
    }

    65% {
        clip-path: polygon(50% 50%, 50% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 85%);
    }

    70% {
        clip-path: polygon(50% 50%, 50% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 70%);
    }

    75% {
        clip-path: polygon(50% 50%, 50% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 50%);
    }

    80% {
        clip-path: polygon(50% 50%, 50% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 30%);
    }

    85% {
        clip-path: polygon(50% 50%, 50% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 15%);
    }

    90% {
        clip-path: polygon(50% 50%, 50% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 0%, 15% 0%);
    }

    95% {
        clip-path: polygon(50% 50%, 50% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 0%, 30% 0%);
    }

    100% {
        opacity: 1;
        clip-path: polygon(50% 50%, 50% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 0%, 50% 0%);
    }
}

@media screen and (max-width: 768px) {
    #loading-screen {
        align-items: flex-start;
    }

    #logo-container {
        padding-top: calc(100vh / 3 - (100vh/3)/2);
    }

    #logo-no-border {
        width: calc(100vw/2);
        height: auto;
    }

    #white-border {
        width: calc(100vw/2);
        height: auto;
    }
}