/*spinning elements*/
#spinning-wrapper-1 {
    left: 30px;
    top: 125px;
    min-width: 150px;
    max-width: 200px;
    width: 20%;
    animation-name: spin-right;
    animation-duration: 5s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

#spinning-circle-square-1 {
    background-image: linear-gradient(to left, var(--pigment-green), var(--cornell-red));
    aspect-ratio: 1/1;
    border-radius: 20px;
}

#spinning-circle-1 {
    background-image: linear-gradient(to right, var(--duke-blue), var(--selective-yellow));
    min-width: 150px;
    max-width: 230px;
    width: 25%;
    aspect-ratio: 1/1;
    right: 20px;
    bottom: 50px;
    animation-name: spin-left;
    animation-duration: 4s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

/*animations*/
@keyframes spin-right {
    from {
        transform: rotate(0deg);
        /*left: -200px;*/
    }
    to {
        transform: rotate(360deg);
        /* left: 100vw; */
    }
}

@keyframes spin-left {
    to {
        transform: rotate(-360deg);
        /* right: 100vw; */
    }
    from {
        transform: rotate(0deg);
        /* right: -230px; */
    }
}

@media (prefers-reduced-motion) {
    #spinning-wrapper-1 {
        transform: rotate(60deg);
        left: 50px;
    }
}