.loading-screen {
    display: flex;
    justify-content: center;
    align-items: center;

    background-color: #69142e;
    
    position: fixed;
    inset: 0;
    z-index: 10;
    animation: fadeOut 1s ease 3s forwards;

    h1 {
    position: absolute;

    color: white;
    font-size: clamp(40px, 8vw, 80px);

    opacity: 0;
    filter: blur(20px);
    transform: translateX(-100px);

    animation: revealName 2s ease forwards;

    z-index: 2;
    }

}

.loading-lips {
    width: min(300px, 70vw);
    height: auto;

    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%);

    z-index: 1;
    animation: rotate 10s linear infinite;
}

@keyframes revealName {
    from{
        opacity: 0;
        filter: blur(20px);
        transform: translateX(-100px);
    }

    to {
        opacity: 1;
        filter: blur(0);
        transform: translateX(0);
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
        visibility: hidden;
    }
}


/* ROTATION */

@keyframes rotate {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }

}