.shapes {
    z-index: -10;
}

.shape1 {
    margin-top: 100pt;
    border: 1px solid #707070;
    opacity: 0.5;
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    background-color: #707070;
}

.background-pattern {
    height: 75vh;
    width: 100vw;

    background-image: radial-gradient(
    rgba(2255, 255, 255, 0.08) 9%,
    transparent 1%
    );
    background-position: 0% 0%;
    background-size: 13vmin 13vmin;
    backdrop-filter: blur(5px);

    left: 0;
    top: 0;
    position: absolute;
    z-index: -10;

    transition: opacity 1.2s cubic-bezier(0.2, 0.8, 0.2, 1), background-size 1.2s cubic-bezier(0.2, 0.8, 0.2, 1);
    animation: pattern-opacity-animation 4s cubic-bezier(0.2, 0.8, 0.2, 1) infinite, pattern-size-animation 6s cubic-bezier(0.2, 0.8, 0.2, 1) infinite;
}

a:hover ~ .background-pattern {
    background-size: 12vmin 12vmin;
    opacity: 0.6;
}

@keyframes pattern-opacity-animation {
    0% {
        opacity: 0.3;
    }

    30% {
        opacity: 0.5;
    }

    60% {
        opacity: 0.5;
    }

    100% {
        opacity: 0.35;
    }
}

@keyframes pattern-size-animation {
    0% {
        background-size: 13vmin 13vmin;
    }

    25% {
        background-size: 13.15vmin 13vmin;
    }

    50% {
        background-size: 13vmin 13.15vmin;
    }

    75% {
        background-size: 13.15vmin 13vmin;
    }

    100% {
        background-size: 13vmin 13vmin;
    }
}

@media (max-height: 550px) {
    .background-pattern {
        height: 90vh;
    }
}

@media (max-width: 500px) {
    .background-pattern {
        height: 75vh;
    }
}