.loading {
    position: fixed;
    z-index: 10;
    width: 100%;
    height: 100%;
    background-color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: div 1s forwards;
}

.loading img {
    width: 75%;
    background-color: transparent;
    animation: img 1s ease forwards;
}

@keyframes img {
    0% {
        width: 75%;
        opacity: 1;
    }

    50% {
        width: 40%;
        opacity: 1;
    }

    90% {
        width: 40%;
        opacity: 1;
    }

    100% {
        width: 40%;
        opacity: 0;
    }
}

@keyframes div {
    25% {
        background-color: white;
        backdrop-filter: none;
        visibility: visible;
        opacity: 1;
    }

    80% {
        background-color: transparent;
        backdrop-filter: blur(10px);
        visibility: visible;
        opacity: 1;
    }

    100% {
        background-color: transparent;
        backdrop-filter: blur(10px);
        visibility: hidden;
        opacity: 0;
    }
}