/* General crescent background effect */
.background-shape {
    position: absolute;
    transform: translate(-50%, -50%); /* Center each shape */
    opacity: 0;
    width: 80px; /* Shape width */
    height: 80px; /* Shape height */
    background-color: var(--square-color, #71c28bd5); /* Color of the shape */
    z-index: -1; /* Ensure shapes are behind other content */
    animation: moveDownLoop 9s linear infinite, fadeInOutRotate 20s ease-in-out infinite;
}

/* Keyframes for fade-in, fade-out, rotate, and move down the screen */
@keyframes fadeInOutRotate {
    0% {
        opacity: 0;
        transform: scale(0.2) rotate(0deg) translate(-50%, -50%);
    }

    50% {
        opacity: 1;
        transform: scale(0.7) rotate(180deg) translate(-50%, -50%);
    }
    100% {
        opacity: 0;
        transform: scale(1.4) rotate(360deg) translate(-50%, -50%);
    }
}

/* Keyframes for moving the shape down the screen */
@keyframes moveDownLoop {
    0% {
        top: -100px;
    }
    100% {
        top: 1000px; /* Move beyond the bottom of the screen */
    }
}

/* Positions for the shapes with reduced shape number for smaller screens */

@media (min-width: 600px) {
    .background-shape:nth-child(1) {
        left: -50%;
        animation-delay: 5s;
    }

    .background-shape:nth-child(2) {
        left: -11%;
        animation-delay: 1s;
    }

    .background-shape:nth-child(3) {
        left: 10%;
        top: -40%;
        animation-delay: 6s;
    }
}

.background-shape:nth-child(4) {
    left: 17%;
    animation-delay: 2.1s;
}

.background-shape:nth-child(5) {
    left: 35%;
    top: -50%;
    animation-delay: 4.4s;
}

.background-shape:nth-child(6) {
    left: 57%;
    animation-delay: 7.6s;
}

@media (min-width: 600px) {
    .background-shape:nth-child(7) {
        left: 64%;
        animation-delay: 3.1s;
    }
}

.background-shape:nth-child(8) {
    left: 72%;
    animation-delay: 13s;
}

@media (min-width: 600px) {
    .background-shape:nth-child(9) {
        left: 85%;
        top: -50%;
        animation-delay: 9s;
    }

    .background-shape:nth-child(10) {
        left: -60%;
        animation-delay: 1s;
    }
}