.preloader{
    position: fixed;
    left: 0;
    top: 0;

    width: 100%;
    height: 100vh;

    background-color: lightskyblue;

    z-index: 1000000;
}

.preloader_display_none{
    display: none;
}

.preloader__img{
    width: 300px;
    position: absolute;
    left: 50%;
    top: 50%;

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

    animation: shadow  3s infinite ease-in-out;
}

@keyframes shadow {
    from {
        -webkit-filter: drop-shadow(3px 3px 3px #000000);
        filter: drop-shadow(3px 3px 3px  #000000);
        width: 300px;
    }
    50% {
        -webkit-filter: drop-shadow(20px 20px 20px #000000);
        filter: drop-shadow(20px 20px 20px  #000000);
        width: 350px;
    }
    to {
        --webkit-filter: drop-shadow(3px 3px 3px #000000);
        filter: drop-shadow(3px 3px 3px  #000000);
        width: 300px;
    }
}

@keyframes shadow-2 {
    from {
        -webkit-filter: drop-shadow(3px 3px 3px #000000);
        filter: drop-shadow(3px 3px 3px  #000000);
        width: 200px;
    }
    50% {
        -webkit-filter: drop-shadow(20px 20px 20px #000000);
        filter: drop-shadow(20px 20px 20px  #000000);
        width: 270px;
    }
    to {
        --webkit-filter: drop-shadow(3px 3px 3px #000000);
        filter: drop-shadow(3px 3px 3px  #000000);
        width: 200px;
    }
}

@media (max-width: 900px) {
    .preloader__img{
        width: 200px;
        animation: shadow-2  3s infinite ease-in-out;
    }
}