/* Animated Circle Script based on Alan Dunning's CodePen example at
https://codepen.io/alandunning/pen/bNNRvQ */

body {
    background: #000000 url("images/starsandnebula_d1.jpg") no-repeat;
    background-size: cover;
}

*, *:before, *:after {
    box-sizing: inherit;
}

h1,h2,h3,h4,h5,h6 {
    margin: 0 0 5px 0;
}

.the-grid {
    display:grid;
    grid-template-columns: 1fr 500px 1fr;
    gap: 150px;
}
/* ---------- Container for the orbiting circles animation ---------- */
#orbits-container {
  position: relative;
  top: 20px;
  left: 200px;
  min-height: 100px;
  min-width: 300px;
}


/* ---------- Inner orbit - This is the circles closest to the central point ---------- */

.orbits {
    position: absolute;
    border: 1px #dddddd dashed;
    border-radius: 100%;
}

#inner-orbit {
    top: 75px;
    left: 75px;
    width: 150px;
    height: 150px;
    animation: spin-right-planets 7s linear infinite;
}

#middle-orbit {
    top: 35px;
    left: 35px;
    width: 225px;
    height: 225px;
    animation: spin-right-planets 10s linear infinite;
}

/* ---------- Repeating styles for the inner orbiting circles ---------- */
.inner-orbit-planet {
  position: absolute;
  top: 62px;
  left: -6px;
  height: 10px;
  width: 10px;
  border-radius: 100%;
  background-color: #3d51ea;
}

/* ---------- Middle orbit - This is the circles second closest to the central point ---------- */

/* ---------- Repeating styles for the inner orbiting circles ---------- */
.middle-orbit-planet {
  position: absolute;
  top: 30px;
  left: 17px;
  height: 20px;
  width: 20px;
  border-radius: 100%;
  background-color: #a6330a;
}

/* ---------- Outer orbit - This is the circles furthest away from the central point ---------- */
#outer-orbit {
  position: absolute;
  top: 100px;
  left: 0;

}

/* ---------- Repeating styles for the outer orbiting circles ---------- */
.outer-orbit-xus {
  filter: drop-shadow(0 0 0.3rem rgb(252, 252, 0));  
  position: absolute;
  top: 0px;
  left: 125px;
  animation: orbit-xus 16s cubic-bezier(0.6, 0, 0.6, 1) infinite;
}

.outer-orbit-xdev {
    filter: drop-shadow(0 0 0.3rem rgb(252, 252, 0));  
    position: absolute;
    top: 0px;
    left: 125px;
    animation: orbit-xdev 16s cubic-bezier(0.6, 0, 0.6, 1) infinite;
}

.outer-orbit:hover {
    animation-play-state: paused;
}


/* ---------- Animation ---------- */

@keyframes 
    orbit-xus {

      0% {
        animation-timing-function: ease-in;
        transform: scale(1) translate(-250px, 0px);
        z-index:0;
      }
      7% {
        animation-timing-function: linear;
        z-index: -5;
      }
      25% {
        animation-timing-function: ease-out;
        transform: scale(0.70) translate(100px, -45px);
        z-index:-5;
      }
      
      50% {
        animation-timing-function: ease-in-out;
        transform: scale(1) translate(400px, 0px);
        z-index:-5;
      }
      51% {
        z-index:5;
      }
      75% {
        transform: scale(1.4) translate(-8px, 10px);
        z-index:5;
      }
      100% {
        animation-timing-function:ease-in-out;
        transform: scale(1) translate(-250px, 0px);
        z-index:5;
      }
      
    }

@keyframes 
    orbit-xdev {
    
      0% {
        animation-timing-function: ease-in-out;
        transform: scale(1) translate(400px, 0px);
        z-index:-5;
      }  
      1% {
        z-index:5;
      }
      25% {
        animation-timing-function:ease-in-out;
        transform: scale(1.4) translate(-8px, 10px);
        z-index:5;
      }
      50% {
        animation-timing-function: ease-in;
        transform: scale(1) translate(-250px, 0px);
        z-index:0;
      }
      75% {
        animation-timing-function: ease-out;
        transform: scale(0.70) translate(100px, -45px);
        z-index:-5;
      }
      93% {
        animation-timing-function: linear;
        z-index: -5;
      }
      100% {
        animation-timing-function: ease-in-out;
        transform: scale(1) translate(400px, 0px);
      }
    }

@keyframes 
    spin-right-planets {
      100% {
        transform: rotate(360deg);
      }
    }