.white {
    position: fixed;
    inset: 0;

    width: 100vw;
    height: 100vh;

    overflow: hidden;

    z-index: 0;
}

.white::before {
    z-index: 1;
    content: "";

    position: absolute;
    top: 0;
    left: 0;
    right: 0;

    height: 60vh;

    background-image:
        linear-gradient(
            -180deg,
            #050505 0%,
            rgba(255, 255, 255, 0) 100%
        );
}

.white::after {
    z-index: 1;
    content: "";

    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;

    height: 20vh;

    background-image:
        linear-gradient(
            0deg,
            #000000 0%,
            rgba(235, 235, 235, 0) 100%
        );
}

.squares {
    height: 100%;

    display: flex;
    justify-content: space-around;

    overflow: hidden;
}

.square {
    align-self: flex-end;

    width: 1em;
    height: 1em;

    transform: translateY(100%);

    background: #1b94f7;

    animation:
        squares 9.5s linear infinite;
}

.square:nth-child(2) {
    height: 1.5em;
    width: 3em;

    animation-delay: 1s;
    animation-duration: 17s;

    filter: blur(5px);
}

.square:nth-child(3) {
    height: 2em;
    width: 1em;

    animation-delay: 1.5s;
    animation-duration: 8s;
}

.square:nth-child(4) {
    height: 1em;
    width: 1.5em;

    animation-delay: 0.5s;
    animation-duration: 13s;

    filter: blur(3px);
}

.square:nth-child(5) {
    height: 1.25em;
    width: 2em;

    animation-delay: 4s;
    animation-duration: 11s;

    filter: blur(2px);
}

.square:nth-child(6) {
    height: 2.5em;
    width: 2em;

    animation-delay: 2s;
    animation-duration: 9s;

    filter: blur(1px);
}

.square:nth-child(7) {
    height: 5em;
    width: 2em;

    animation-duration: 12s;

    filter: blur(2.5px);
}

.square:nth-child(8) {
    height: 1em;
    width: 3em;

    animation-delay: 5s;
    animation-duration: 18s;

    filter: blur(6px);
}

.square:nth-child(9) {
    height: 1.5em;
    width: 2em;

    animation-duration: 9s;

    filter: blur(0.5px);
}

.square:nth-child(10) {
    height: 3em;
    width: 2.4em;

    animation-delay: 6s;
    animation-duration: 12s;

    filter: blur(0.5px);
}
.square:nth-child(11) {
    height: 2em;
    width: 1.5em;
    animation-delay: 2.5s;
    animation-duration: 14s;
    filter: blur(1.5px);
}

.square:nth-child(12) {
    height: 3.5em;
    width: 2.5em;
    animation-delay: 4.5s;
    animation-duration: 16s;
    filter: blur(4px);
}

.square:nth-child(13) {
    height: 1.25em;
    width: 1em;
    animation-delay: 0.8s;
    animation-duration: 7s;
    filter: blur(0.5px);
}

.square:nth-child(14) {
    height: 4em;
    width: 1.75em;
    animation-delay: 3.2s;
    animation-duration: 15s;
    filter: blur(3px);
}

.square:nth-child(15) {
    height: 1.75em;
    width: 3.5em;
    animation-delay: 5.5s;
    animation-duration: 10s;
    filter: blur(2.5px);
}

@keyframes squares {
    from {
        transform:
            translateY(100%)
            rotate(-50deg);
    }

    to {
        transform:
            translateY(calc(-100vh - 100%))
            rotate(20deg);
    }
}