body {
  transition: all ease-in-out 0.5s;
  scroll-behavior: smooth;
}

header#landing {
  width: 96vw;
  height: 95vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

main#beginning {
  scroll-behavior: smooth;
}

#ball1a {
  background-color: rgba(0,0,0,0);
  border: 2vh solid rgba(11, 11, 11, 0.9);
  opacity: .99;
  border-right: 2vh solid rgba(0,0,0,0);
  border-left: 2vh solid rgba(0,0,0,0);
  border-radius: 90vh;
  box-shadow: 0 0 15vh rgb(114, 62, 197);
  width: 90vh;
  height: 90vh;
  margin: 0 auto;
  animation: spinPulse 8s infinite ease-in-out;
  position: absolute;
  top: 5vh;
}

#ball1aa {
  opacity: .99;
  border-radius: 90vh;
  box-shadow: 0 0 15vh rgb(114, 62, 197);
  width: 90vh;
  height: 90vh;
  margin: 0 auto;
  position: absolute;
  top: 5vh;
}

#ball1b {
  background-color: rgba(0,0,0,0);
  border: 2vh solid rgba(255,122,0,0.9);
  opacity: .9;
  border-left: 2vh solid rgba(0,0,0,0);
  border-right: 2vh solid rgba(0,0,0,0);
  border-radius: 70vh;
  box-shadow: 0 0 20vh #ff0000;
  width: 70vh;
  height: 70vh;
  margin: 0 auto;
  position: absolute;
  top: 15vh;
  animation: spinoffPulse 8s infinite linear;
}

#ball1c {
  background-color: rgba(0,0,0,0);
  border: 2vh solid rgba(125, 0, 125, 0.9);
  opacity: .9;
  border-top: 2vh solid rgba(0,0,0,0);
  border-bottom: 2vh solid rgba(0,0,0,0);
  border-radius: 40vh;
  box-shadow: 0 0 15vh #f0f;
  width: 40vh;
  height: 40vh;
  margin: 0 auto;
  position: absolute;
  top: 30vh;
  animation: spinoffPulse2 8s infinite ease-in-out;
}

#ball1d {    
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50vh;
  height: 50vh;
  position: absolute;
  top: 25vh;
  font-size: 5vh;
  text-align: center;
  z-index: 2;
  animation: spinSlow 120s infinite linear;
}

img#logo {
    height: 35vh;
    width: auto;
    border: none;
    box-shadow: none;
    border-radius: 0.5vw;
    margin: 0;
  }

@keyframes spinPulse {
  0% {
      transform: rotate(160deg);
      opacity: 0;
      box-shadow: 0 0 1px #2187e7;
  }

  50% {
      transform: rotate(145deg);
      opacity: 1;
  }

  100% {
      transform: rotate(-320deg);
      opacity: 0;
  };
}

@keyframes spinoffPulse {
  0% {
      transform: rotate(0deg);
  }

  100% {
      transform: rotate(360deg);
  };
}

@keyframes spinoffPulse2 {
  0% {
    transform: rotate(0deg);
    opacity: 0;
}
  25% {
    opacity: 1;
}
  50% {
    transform: rotate(-90deg);
}
  75% {
    opacity: 1;
}
  100% {
    transform: rotate(-360deg);
    opacity: 0;
  };
}

@keyframes spinSlow {
  0% {
      transform: rotate(0deg);
  }

  100% {
      transform: rotate(360deg);
  };
}

@media (orientation:portrait) {

  #ball1a {
    border: 2vw solid rgba(11, 11, 11, 0.9);
    border-right: 2vw solid rgba(0,0,0,0);
    border-left: 2vw solid rgba(0,0,0,0);
    border-radius: 90vw;
    box-shadow: 0 0 15vw rgb(114, 62, 197);
    width: 90vw;
    height: 90vw;
    top: 5vw;
    }
  
  #ball1aa {
    border-radius: 90vw;
    box-shadow: 0 0 15vw rgb(114, 62, 197);
    width: 90vw;
    height: 90vw;
    top: 5vw;
  }
  
  #ball1b {
    border-left: 2vw solid rgba(0,0,0,0);
    border-right: 2vw solid rgba(0,0,0,0);
    border-radius: 70vw;
    box-shadow: 0 0 20vw #ff0000;
    width: 70vw;
    height: 70vw;
    top: 15vw;
  }
  
  #ball1c {
    border: 2vw solid rgba(125, 0, 125, 0.9);
    border-top: 2vw solid rgba(0,0,0,0);
    border-bottom: 2vw solid rgba(0,0,0,0);
    border-radius: 40vw;
    box-shadow: 0 0 15vw #f0f;
    width: 40vw;
    height: 40vw;
    top: 30vw;
  }
  
  #ball1d {
    width: 50vw;
    height: 50vw;
    top: 25vw;
    text-align: center;
    z-index: 5;
  }
  
}