body > .bg-dark {
  background:var(--flex-dark) url(img/bg-body.webp) no-repeat top
}

.navbar-toggler { 
  border: 0;
  width: 48px;
  height: 48px;
  display: flex;
  gap: .375rem;
  flex-direction: column;
  justify-content: center;
  font-size: 100%;
  padding: .75rem .5rem }

header .nav-link { 
  color: currentColor;
  opacity: 1 !important;
  font-weight: bold }

@media(min-width:1200px){
  header { height: 120px }

  header .nav-link:hover { color: var(--flex-primary) }
}

@media(max-width:1199.98px){
  header .navbar-brand img {
    max-width: 60vw;
    max-height: calc(2.5rem + 1.75vw) }
}
  
@media(max-width:991.98px){
    header [class*="container"] { padding-right: 1rem  !important }
  
    header .navbar-collapse { 
      background: var(--flex-dark);
      width: 100%;
      position: fixed;
      z-index: 100000;
      top: 0;
      left: 0  }
  
    header .navbar-nav {
      justify-content: center;
      width: 100%;
      height: 100vh }  
  
    header .nav-link { 
      text-align: center;
      color: #FFF;
      opacity:.5;
      padding: .75rem 3rem !important; 
      width: 100%;
      font-size: 120% }
  
    header .nav-link.active,
    header .nav-link:hover,
    header .nav-link:active,
    header .nav-link:focus { 
      opacity:1;
      color: var(--flex-primary) !important }
  
    header .btn { 
      margin: 0 3rem;
      font-size: 120% }
}

#hero .hero-cover {
  filter: contrast(10) grayscale(1);
  height: 100%;
  width: 100%;
  object-fit: cover;
  opacity: .075 }

.galaxy {
  position: relative;
  width: 100%;
  height: 100% }

@media(max-width:767.98px){
  .galaxy { 
    height: 500px;
    transform:scale(.9) }
}

.sun, 
.planet {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1em;
  height: 1em;
  margin-top: -0.5em;
  margin-left: -0.5em;
  border-radius: 50% }

.sun { background-color: #FFF }

.sun img { z-index: 1 }

.planet {
  background-color: #FFF;
  background-repeat: no-repeat;
  background-size: cover;
  animation-iteration-count: infinite;
  animation-timing-function: linear }

.orbit {
  position: absolute;
  top: 50%;
  left: 50%;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  animation-name: orbit;
  animation-iteration-count: infinite;
  animation-timing-function: linear }

/* Animations */
@keyframes orbit {
  0%   { transform: rotateZ(0deg); }
  100% { transform: rotateZ(-360deg); } 
}

/* Orbit sizes */
.p1.orbit,
.p2.orbit {
  width: 2.9em;
  height: 2.9em;
  margin-top: -1.45em;
  margin-left: -1.45em }

.p3.orbit,
.p4.orbit {
  width: 4.2em;
  height: 4.2em;
  margin-top: -2.1em;
  margin-left: -2.1em }

.p5.orbit,
.p6.orbit {
  width: 5.4em;
  height: 5.4em;
  margin-top: -2.7em;
  margin-left: -2.7em }

.p7.orbit {
  border: 1px solid rgba(255, 255, 255, 0.05);
  width: 6.6em;
  height: 6.6em;
  margin-top: -3.3em;
  margin-left: -3.3em }

/* Planet starting positions */
.p1 img { left: 30%; top: 2% } 
.p2 img { left: 102%; top: 50% } 
.p3 img { left: 3%; top: 35% } 
.p4 img { left: 50%; top: 100% } 
.p5 img { left: 30%; top: 3% } 
.p6 img { left: 30%; top: 95% } 

/* Planet animation durations */
.p1.orbit { animation-duration: 15s }
.p2.orbit { animation-duration: 25s }
.p3.orbit { animation-duration: 30s }
.p4.orbit { animation-duration: 40s }
.p5.orbit { animation-duration: 60s }
.p6.orbit { animation-duration: 50s }
  
/* Planet sizes */
.sun { font-size: 10em }
.orbit { font-size: 5.5em }

.planet { 
  width:5.5rem;
  height:5.5rem;
  position: absolute;
  top: 50%;
  left: 50%;
  animation-name: planetLabel;
  animation-iteration-count: infinite;
  animation-timing-function: linear  } 

.p1 .planet { animation-duration: 15s }
.p2 .planet { animation-duration: 25s }
.p3 .planet { animation-duration: 30s }
.p4 .planet { animation-duration: 40s }
.p5 .planet { animation-duration: 60s }
.p6 .planet { animation-duration: 50s }

/* Animations */
@keyframes planetLabel {
  0%   { transform: rotateZ(0deg); }
  100% { transform: rotateZ(360deg); } 
}

.btn { 
  font-weight: bold;
  padding: 1rem 1.5rem }

ul.mb-0 { padding-left: 1rem }
ul.mb-0 li:not(:last-child) { margin-bottom: .5rem }

.btn-outline-primary:hover,
.btn-outline-secondary:hover { color: #FFF !important }