/* Стили для фона и квадратиков */
.background {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* Отключаем взаимодействие с фоном */
    z-index: -1; /* Отправляем фон за все элементы интерфейса */
    overflow: hidden; /* Убираем выход за границы экрана */
}

.square {
    position: absolute;
    background-color: rgba(255, 255, 255, 0.5); /* Полупрозрачные квадраты */
    animation: fly 20s linear infinite; /* Анимация движения */
    width: 20px; /* Базовый размер квадрата */
    height: 20px;
    border-radius: 30%;


    filter: blur(5px);
    box-shadow: 34px -10px 87px 0 rgba(209, 209, 209, 0.69), inset -1px 2px 32px -18px #fbfbfb, inset 2px 14px 84px 5px #828282;
    background: #3a1559;
    transform: rotate(-45deg);
}

@keyframes fly {
    from {
        transform: translate(100vw, 0); /* Квадрат появляется справа */
    }
    to {
        transform: translate(-120vw, 100vh); /* Летит влево вниз за экран */
    }
}