[data-bs-toggle="collapse"] > a > svg {
  display: inline-block;
  float: right;
  width: 1em;
  height: 1em;
}

@media (prefers-reduced-motion: no-preference) {
  [data-bs-toggle="collapse"] > a > svg {
    transition: transform 0.2s;
  }
}

[data-bs-toggle="collapse"].collapsed > a > svg {
  transform: rotate(180deg);
}

@media (min-width: 1200px) {
  .collapse.open-on-xl {
    display: block;
    height: auto;
    visibility: visible;
  }
}

#jumbotron {
  flex-shrink: 0;
  padding: 2rem 0;
  margin-bottom: 1rem;
}

@media (min-width: 576px) {
  #jumbotron {
    padding: 4rem 0;
  }
}

#jumbotron-content {
  position: relative;
  z-index: 1;
}

#jumbotron-text {
  text-shadow: 0 0 5px #f8f9fa;
}

#versions {
  font-size: small;
  margin-top: 1rem;
  list-style: none;
  padding-left: 0;
}

#versions a:any-link {
  color: inherit;
}

#gears-container {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  max-height: 100%;
  z-index: 0;
  height: 100%;
}

svg#gears {
  opacity: 0.25;
  float: right;
  height: 100%;
  transform: scale(1.75);
}

@media (min-width: 576px)  {
  svg#gears {
    transform: scale(2);
  }
}

@media (min-width: 768px)  {
  svg#gears {
    transform: translateX(-75%) scale(2.5);
  }
}

#jumbotron .cog {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  #jumbotron:hover .cog {
    animation-play-state: running;
  }
}

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

.cog {
  animation-name: spin;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

.red {
  animation-duration: 5.142857s;
  animation-direction: reverse;
}

.green,
.blue {
  animation-duration: 2.5714285s;
}

.dark-only {
  display: none;
}

[data-bs-theme="dark"] .dark-only {
  display: block;
}

[data-bs-theme="dark"] .light-only {
  display: none;
}