body {
    background: #1d1f20;
    overflow: hidden;
    max-width: 100vw;
  }
  
  
  
  main {
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    height: 100vh;
    overflow: hidden;
  }
  
  h1 {
    font-family: monospace, "Inconsolata", Consolas, system-ui;
    font-size: 4em;
    color: #d7b94c;
  }
  
  h2 {
    font-family: monospace, "Inconsolata", Consolas, system-ui;
    font-size: 2em;
    color: #d7b94c;
  }
  
  h3 {
    font-family: monospace, "Inconsolata", Consolas, system-ui;
    font-size: 1em;
    color: #d7b94c;
  }
  
  .center {
    opacity: 0;
    animation-name: fadeIn;
    animation-duration: 2s;
    animation-delay: 0.5s;
    animation-fill-mode: forwards;
  }
  
  @keyframes fadeIn {
    from {
      opacity: 0;
    }
  
    to {
      opacity: 1;
    }
  }
  
  .planets-container {
    width: 32vh;
    height: 32vh;
    border-radius: 50%;
    transform: scaleX(5);
  }
  
  .sun {
    position: absolute;
    width: 32vh;
    height: 32vh;
    max-width: 100vw;
    max-height: 100vw;
    border-radius: 50%;
    background-color: #f5af19;
    filter: blur(10px);
    transform: scaleX(0.2);
    animation: gradient 12s ease-in-out infinite;
  }
  
  
  
  @keyframes gradient {
    0% {
      background: #f5af19;
    }
  
    20% {
      background: #FBD786;
    }
  
    40% {
      background: #c471ed;
    }
  
    60% {
      background: #6be585;
    }
  
    80% {
      background: #f12711;
    }
  
    100% {
      background: #fcb045;
    }
  }
  
  .planet {
    border-radius: 50%;
    transform: scaleX(0.2);
  }
  
  /* makes all the planets different colors */
  #first {
    width: 1vh;
    height: 1vh;
    background: linear-gradient(to left, aqua, navy);
  }
  
  #second {
    width: 2vh;
    height: 2vh;
    background-color: lavender;
  }
  
  #third {
    width: 1.6vh;
    height: 1.6vh;
    background: linear-gradient(indianred, yellow);
  }
  
  /* establishes the route the planets take */
  
  .orbit {
    width: 100%;
    height: 100%;
    animation: rotate 12s infinite linear;
    position: absolute;
  }
  
  .planet-container {
    animation: correct 12s infinite linear;
    position: absolute;
  }
  
  /* changes the starting positions for each planet */
  #first-planet-container {
    left: 10px;
  }
  
  #second-planet-container {
    left: 75px;
  }
  
  #third-planet-container {
    left: 45px;
    top: 100px;
  }
  
  .planet-index {
    width: 100%;
    height: 100%;
    position: absolute;
  }
  
  #first-planet-index {
    animation: hideFirstPlanet 12s infinite;
  }
  
  #second-planet-index {
    animation: hideSecondPlanet 12s infinite;
  }
  
  #third-planet-index {
    animation: hideThirdPlanet 12s infinite;
  }
  
  /* definitions for our correct and rotate commands */
  /* makes the planets rotate around the planet-container */
  @keyframes rotate {
    0% {
      transform: rotateZ(0deg);
    }
  
    100% {
      transform: rotateZ(360deg);
    }
  }
  
  /* makes it so that the planets aren't being stretched as they rotate
  by undoing what rotate does on an individual level. */
  @keyframes correct {
    0% {
      transform: rotateZ(360deg)
    }
  
    100% {
      transform: rotateZ(0deg)
    }
  }
  
  @keyframes hideFirstPlanet {
    0% {
      z-index: 999;
      transform: scale(0.9)
    }
  
    25% {
      z-index: -999;
      transform: scale(0.8)
    }
  
    50% {
      transform: scale(0.9)
    }
  
    75% {
      transform: scale(1.1);
    }
  
    100% {
      z-index: 999;
      transform: scale(0.9)
    }
  }
  
  @keyframes hideSecondPlanet {
    0% {
      z-index: -999;
      transform: scale(0.95);
    }
  
    50% {
      z-index: 999;
      transform: scale(1.1)
    }
  
    75% {
      transform: scale(1)
    }
  
    90% {
      transform: scale(0.9)
    }
  
    100% {
      z-index: -999;
      transform: scale(0.95);
    }
  }
  
  
  @keyframes hideThirdPlanet {
    0% {
      z-index: 999;
      transform: scale(1.1);
    }
  
    50% {
      z-index: -999;
      transform: scale(0.8)
    }
  
    100% {
      z-index: 999;
      transform: scale(1.1);
    }
  }
  
  
  .typing {
    position: fixed;
    bottom: 12vh;
  }
  
  /*
  .typing::after {
    content: "|";
    position: absolute;
    right: 0;
    width: 100%;
    color: white;
    background: #1d1f20;
    -webkit-animation: typing 2s steps(16) forwards, caret 1s infinite;
    animation: typing 2s steps(16) forwards, caret 1s infinite;
  }
  
  @-webkit-keyframes typing {
    to {
      width: 0;
    }
  }
  
  @keyframes typing {
    to {
      width: 0;
    }
  }
  
  @-webkit-keyframes caret {
    50% {
      color: transparent;
    }
  }
  
  @keyframes caret {
    50% {
      color: transparent;
    }
  }
  */
  
  /*footer in page center*/
  footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    color: wheat;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: system-ui;
    font-size: 1.5vh;
  }
  
  footer a {
    color: antiquewhite;
  }