/*shapes*/
#spinning-wrapper-1 {
  left: 50%;
  right: 50%;
  top: 50%;
  bottom: 50%;
  transform: translateX(-50%) translateY(-50%);
}

#spinning-circle-square-1 {
  min-width: 150px;
  border-radius: 35px;
  aspect-ratio: 1 / 1;
  background-image: linear-gradient(to bottom, var(--cornell-red), var(--duke-blue), var(--honolulu-blue));
  animation-name: grow-spin;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  opacity: 0.9;
}

/*animations*/
@keyframes grow-spin {
  0% {
    transform: rotate(0deg);
    min-width: 150px;
  }
  50% {
    transform: rotate(180deg);
    min-width: 250px;
  }
  100% {
    transform: rotate(360deg);
    min-width: 150px;
  }
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion) {
  * {
    animation-duration: 0s !important;
    animation-iteration-count: 0;
  }

  #spinning-circle-square-1, #spinning-square-1 {
    rotate: 45deg;
    min-width: 200px;
  }
}