:root {
  --selective-yellow: rgb(251, 175, 0);
  --cornell-red: rgb(184, 0, 28);
  --duke-blue: rgb(57, 0, 153);
  --honolulu-blue: rgb(0, 124, 190);
  --pigment-green: rgb(0, 175, 84);
}

main {
  z-index: 2;
  color: white;
  background-color: rgba(16, 16, 16, 0.3);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 5px solid white;
  border-radius: 8px;
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: 10px;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  width: 70%;
  height: 36%;
}

main h1 {
  font-size: 40px;
}

main h2 {
  font-size: 30px;
}

main :is(h1, h2) {
  text-align: center;
}

main :is(.left, .right) {
  width: 45%;
  min-width: 45%;
}

.right p {
  font-size: 20px;
  text-align: justify;
}

/*spinning elements*/
.spinning-square-wrapper {
  position: fixed;
  left: 50%;
  right: 50%;
  top: 50%;
  bottom: 50%;
  transform: translateX(-50%) translateY(-50%);
  height: fit-content;
  width: fit-content;
}

.spinning-circle-wrapper {
  position: fixed;
  left: 50%;
  right: 50%;
  top: 50%;
  bottom: 50%;
  transform: translateX(-50%) translateY(-50%);
  height: fit-content;
  width: fit-content;
}

.spinning-circle-square {
  position: fixed;
}

#spinning-circle-1 {
  left: 15%;
  top: 5%;
  background-image: linear-gradient(to bottom, var(--cornell-red), var(--selective-yellow));
  width: 25%;
  min-width: 176px;
  aspect-ratio: 1 / 1;
  /*animation*/
  animation-name: spin;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

#spinning-circle-2 {
  right:10%;
  top: 5%;
  background-image: linear-gradient(to bottom, var(--pigment-green), var(--duke-blue));
  width: 15%;
  min-width: 119px;
  aspect-ratio: 1 / 1;
  /*animation*/
  animation-name: spin;
  animation-delay: 0.2s;
  animation-duration: 2.5s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

#spinning-circle-3 {
  border-radius: 100%;
  background-image: linear-gradient(to bottom, var(--cornell-red), var(--duke-blue));
  aspect-ratio: 1 / 1;
  animation-name: spin;
  animation-duration: 4s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
/*linked to circle 3*/
#spinning-circle-wrapper-1 {
  width: 20%;
  min-width: 135px;
  
}

#spinning-circle-4 {
  top: 60%;
  left: 10%;
  width: 15%;
  min-width: 150px;
  aspect-ratio: 1 / 1;
  background-image: linear-gradient(to bottom, var(--pigment-green), var(--honolulu-blue));
  animation-name: spin;
  animation-duration: 4s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

#spinning-square-1 {
  border: 2px solid white;
  aspect-ratio: 1 / 1;
  /*animation*/
  animation-name: spin;
  animation-duration: 7s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

#spinning-square-wrapper-1 {
  width: 30%;
  min-width: 200px;
}

#spinning-square-2 {
  border: 2px solid white;
  aspect-ratio: 1 / 1;
  /*animation*/
  animation-name: spin-reverse;
  animation-duration: 6s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

#spinning-square-wrapper-2 {
  width: 21%;
  min-width: 135px;
}

#spinning-circle-square-1 {
  top: 70%;
  right: 10%;
  width: 18%;
  min-width: 150px;
  border-radius: 20px;
  aspect-ratio: 1 / 1;
  background-image: linear-gradient(to bottom, var(--cornell-red), var(--duke-blue));
  animation-name: spin;
  animation-duration: 4s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  opacity: 0.9;
}

/*display scaling*/
@media screen and (max-width: 655px) {
  main {
    flex-direction: column;
    align-items: center;
    height: fit-content;
  }

  main :is(.left, .right) {
    width: 95%;
  }

  .right p {
    text-align: center;
  }
}

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

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

@media (prefers-reduced-motion) {
  #spinning-circle-square-1, #spinning-square-1 {
    rotate: 45deg;
  }

  #spinning-square-2 {
    rotate: 90deg;
  }
}