* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
}

.container {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  position: relative;
}

@keyframes aura {
  0% {
    transform: rotate(20deg);
  }
  20% {
    transform: translateY(100px) rotate(1deg);
  }
  40% {
    transform: rotate(-15deg);
  }
  60% {
    transform: rotate(-1deg);
  }
  80% {
    transform: translateY(-10px) rotate(16deg);
  }
  100% {
    transform: rotate(1deg);
  }
}

@keyframes northern {
  0% {
    transform: translate(5%, -2%);
  }
  25% {
    transform: translate(10%, 7%);
  }
  40% {
    transform: rotate(-10deg);
  }
  60% {
    transform: translate(7%, -2%);
  }
  85% {
    transform: translate(6%, 3%) rotate(12deg);
  }
  100% {
    transform: none;
  }
}

.auroral-agrabah {
  position: absolute;
  left: -50%;
  top: -50%;
  width: 200%;
  height: 200%;
  animation-name: aura;
  animation-duration: 2s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  background: linear-gradient(-20deg, rgba(26, 0, 192, 0.4) 40%, rgba(215, 0, 67, 0.4)), linear-gradient(60deg, #1a00c0 10%, #d70043);
}

.auroral-northern {
  position: absolute;
  left: -50%;
  top: -50%;
  width: 200%;
  height: 200%;
  animation-name: northern;
  animation-duration: 5s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  background: linear-gradient(10deg, #a1d9b4 20%, #32988a 40%, #000e3c 70%);
}

.auroral-northern-intense {
  position: absolute;
  left: -50%;
  top: -50%;
  width: 200%;
  height: 200%;
  animation-name: aura;
  animation-duration: 10s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  background: linear-gradient(10deg, #b7a841 20%, #a1006a 40%, #371d40 60%);
}

.auroral-northern-dimmed {
  position: absolute;
  left: -50%;
  top: -50%;
  width: 200%;
  height: 200%;
  animation-name: northern;
  animation-duration: 10s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  background: linear-gradient(-45deg, rgba(237, 124, 148, 0.3) 20%, rgba(35, 82, 154, 0.3) 70%), linear-gradient(10deg, #916b63 7%, #b8ba6f 20%, #ed7c94 40%, #23529a 60%);
}

.auroral-northern-dusk {
  position: absolute;
  left: -50%;
  top: -50%;
  width: 200%;
  height: 200%;
  animation-name: northern;
  animation-duration: 15s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  background: linear-gradient(-35deg, rgba(145, 107, 99, 0.5) 15%, rgba(184, 186, 111, 0.5) 25%, transparent 60%), linear-gradient(10deg, #916b63 9%, #b8ba6f 30%, #ed7c94 45%, #23529a 65%);
}

.auroral-northern-warm {
  position: absolute;
  left: -50%;
  top: -50%;
  width: 200%;
  height: 200%;
  animation-name: aura;
  animation-duration: 10s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  background: linear-gradient(5deg, transparent 70%, #da7712 95%), linear-gradient(160deg, #432c24 30%, #d96d7d 62%, #da7712 95%);
}

.auroral-stars {
  position: fixed;
  top: 0;
  left: 0;
  display: block;
  width: 1px;
  height: 1px;
  border-radius: 50%;
  background: white;
  box-shadow: 34vw 12vh 0 1px rgba(255, 255, 255, 0.7), 98vw 7vh 0 2px rgba(255, 255, 255, 0.7), 68vw 18vh 0 2px rgba(255, 255, 255, 0.7), 55vw 21vh 0 2px rgba(255, 255, 255, 0.7), 31vw 17vh 0 2px rgba(255, 255, 255, 0.7), 30vw 38vh 0 1px rgba(255, 255, 255, 0.7), 67vw 16vh 0 2px rgba(255, 255, 255, 0.7), 79vw 22vh 0 2px rgba(255, 255, 255, 0.7), 83vw 18vh 0 1px rgba(255, 255, 255, 0.7), 82vw 35vh 0 2px rgba(255, 255, 255, 0.7), 24vw 2vh 0 2px rgba(255, 255, 255, 0.7), 43vw 8vh 0 2px rgba(255, 255, 255, 0.7), 99vw 45vh 0 2px rgba(255, 255, 255, 0.7), 72vw 27vh 0 1px rgba(255, 255, 255, 0.7), 49vw 29vh 0 1px rgba(255, 255, 255, 0.7), 55vw 37vh 0 1px rgba(255, 255, 255, 0.7), 92vw 39vh 0 2px rgba(255, 255, 255, 0.7), 93vw 44vh 0 2px rgba(255, 255, 255, 0.7), 33vw 14vh 0 2px rgba(255, 255, 255, 0.7), 70vw 20vh 0 2px rgba(255, 255, 255, 0.7), 73vw 28vh 0 1px rgba(255, 255, 255, 0.7), 88vw 10vh 0 2px rgba(255, 255, 255, 0.7), 16vw 41vh 0 2px rgba(255, 255, 255, 0.7), 53vw 4vh 0 2px rgba(255, 255, 255, 0.7), 73vw 19vh 0 2px rgba(255, 255, 255, 0.7), 56vw 19vh 0 2px rgba(255, 255, 255, 0.7), 94vw 25vh 0 2px rgba(255, 255, 255, 0.7), 18vw 10vh 0 1px rgba(255, 255, 255, 0.7), 79vw 4vh 0 2px rgba(255, 255, 255, 0.7), 43vw 20vh 0 2px rgba(255, 255, 255, 0.7), 9vw 14vh 0 2px rgba(255, 255, 255, 0.7), 11vw 7vh 0 2px rgba(255, 255, 255, 0.7), 63vw 20vh 0 1px rgba(255, 255, 255, 0.7), 62vw 50vh 0 1px rgba(255, 255, 255, 0.7), 97vw 33vh 0 1px rgba(255, 255, 255, 0.7), 74vw 1vh 0 2px rgba(255, 255, 255, 0.7), 47vw 20vh 0 2px rgba(255, 255, 255, 0.7), 82vw 28vh 0 1px rgba(255, 255, 255, 0.7), 13vw 2vh 0 1px rgba(255, 255, 255, 0.7), 18vw 43vh 0 1px rgba(255, 255, 255, 0.7), 12vw 15vh 0 1px rgba(255, 255, 255, 0.7), 8vw 24vh 0 1px rgba(255, 255, 255, 0.7), 24vw 44vh 0 2px rgba(255, 255, 255, 0.7), 71vw 40vh 0 1px rgba(255, 255, 255, 0.7), 77vw 41vh 0 1px rgba(255, 255, 255, 0.7), 52vw 38vh 0 1px rgba(255, 255, 255, 0.7), 6vw 36vh 0 2px rgba(255, 255, 255, 0.7), 39vw 25vh 0 1px rgba(255, 255, 255, 0.7), 8vw 31vh 0 2px rgba(255, 255, 255, 0.7), 52vw 34vh 0 1px rgba(255, 255, 255, 0.7), 30vw 2vh 0 1px rgba(255, 255, 255, 0.7), 26vw 45vh 0 2px rgba(255, 255, 255, 0.7), 47vw 11vh 0 2px rgba(255, 255, 255, 0.7), 87vw 26vh 0 2px rgba(255, 255, 255, 0.7), 93vw 31vh 0 2px rgba(255, 255, 255, 0.7), 44vw 17vh 0 2px rgba(255, 255, 255, 0.7), 21vw 12vh 0 2px rgba(255, 255, 255, 0.7), 98vw 13vh 0 2px rgba(255, 255, 255, 0.7), 10vw 39vh 0 1px rgba(255, 255, 255, 0.7), 3vw 31vh 0 2px rgba(255, 255, 255, 0.7), 8vw 7vh 0 2px rgba(255, 255, 255, 0.7), 99vw 1vh 0 2px rgba(255, 255, 255, 0.7), 36vw 20vh 0 2px rgba(255, 255, 255, 0.7), 81vw 1vh 0 1px rgba(255, 255, 255, 0.7), 69vw 28vh 0 2px rgba(255, 255, 255, 0.7), 26vw 36vh 0 2px rgba(255, 255, 255, 0.7), 29vw 49vh 0 1px rgba(255, 255, 255, 0.7), 3vw 16vh 0 2px rgba(255, 255, 255, 0.7), 18vw 37vh 0 1px rgba(255, 255, 255, 0.7), 93vw 44vh 0 1px rgba(255, 255, 255, 0.7), 39vw 19vh 0 2px rgba(255, 255, 255, 0.7), 86vw 3vh 0 2px rgba(255, 255, 255, 0.7), 75vw 39vh 0 1px rgba(255, 255, 255, 0.7), 30vw 17vh 0 2px rgba(255, 255, 255, 0.7), 83vw 9vh 0 1px rgba(255, 255, 255, 0.7), 55vw 30vh 0 1px rgba(255, 255, 255, 0.7), 35vw 3vh 0 2px rgba(255, 255, 255, 0.7), 71vw 39vh 0 2px rgba(255, 255, 255, 0.7), 91vw 31vh 0 2px rgba(255, 255, 255, 0.7), 24vw 27vh 0 2px rgba(255, 255, 255, 0.7), 76vw 3vh 0 2px rgba(255, 255, 255, 0.7), 20vw 1vh 0 2px rgba(255, 255, 255, 0.7), 9vw 19vh 0 2px rgba(255, 255, 255, 0.7), 2vw 18vh 0 1px rgba(255, 255, 255, 0.7), 18vw 23vh 0 2px rgba(255, 255, 255, 0.7), 8vw 17vh 0 1px rgba(255, 255, 255, 0.7), 94vw 26vh 0 1px rgba(255, 255, 255, 0.7), 16vw 22vh 0 1px rgba(255, 255, 255, 0.7), 90vw 24vh 0 1px rgba(255, 255, 255, 0.7), 1vw 45vh 0 1px rgba(255, 255, 255, 0.7), 12vw 44vh 0 1px rgba(255, 255, 255, 0.7), 72vw 11vh 0 2px rgba(255, 255, 255, 0.7), 54vw 25vh 0 1px rgba(255, 255, 255, 0.7), 42vw 7vh 0 2px rgba(255, 255, 255, 0.7), 44vw 42vh 0 1px rgba(255, 255, 255, 0.7), 46vw 50vh 0 1px rgba(255, 255, 255, 0.7), 61vw 8vh 0 2px rgba(255, 255, 255, 0.7), 4vw 41vh 0 1px rgba(255, 255, 255, 0.7), 10vw 23vh 0 1px rgba(255, 255, 255, 0.7), 60vw 9vh 0 2px rgba(255, 255, 255, 0.7), 18vw 11vh 0 0 rgba(255, 255, 255, 0.9);
}

body {
  font-family: 'Lato', 'Helvetica', 'Arial', sans-serif;
  color: rgba(255, 255, 255, 0.8);
}

h1 {
  font-size: 1.25em;
}

@media screen and (min-width: 768px) {
  h1 {
    font-size: 2em;
  }
}

p {
  margin: 0;
}

a {
  color: rgba(255, 255, 255, 0.8);
}

.auroral-info {
  position: absolute;
  width: 100%;
  padding: 0 2em;
  text-align: center;
  z-index: 10;
}

footer {
  position: fixed;
  height: 4em;
  line-height: 2em;
  width: 100%;
  left: 0;
  bottom: 0;
  padding: 0 2em;
  text-align: center;
  z-index: 10;
}

/* Octocat styles https://github.com/tholman/github-corners */
.github-corner:hover .octo-arm {
  animation: octocat-wave 560ms ease-in-out;
}

@keyframes octocat-wave {
  0% {
    transform: rotate(0deg);
  }
  20% {
    transform: rotate(-25deg);
  }
  40% {
    transform: rotate(10deg);
  }
  60% {
    transform: rotate(-25deg);
  }
  80% {
    transform: rotate(10deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

@media (max-width: 500px) {
  .github-corner:hover .octo-arm {
    animation: none;
  }
  .github-corner .octo-arm {
    animation: octocat-wave 560ms ease-in-out;
  }
}

.filters-container {
  width: 100%;
  background: transparent;
  border: none;
}

@media screen and (min-width: 768px) {
  .filters-container {
    margin: 2em auto 6em;
  }
}

.filter-link {
  display: inline-block;
  margin-right: .25em;
  margin-bottom: .5em;
  padding: 0.25em 0.5em;
  border-radius: .25em;
  font-size: 1.1em;
  line-height: 1em;
  color: white;
  background-color: transparent;
  border: 2px solid white;
  cursor: pointer;
  opacity: .7;
  text-decoration: none;
}

.filter-link:hover {
  border: 2px solid white;
}

.auroral.auroral-northern {
  opacity: 1;
}

.auroral {
  opacity: 0;
}

.auroral:target {
  opacity: 1;
}

.center-text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 3rem;
  font-weight: 600;
  z-index: 10;
  pointer-events: none; /* keeps background fully non-interactive */
  text-align: center;
}