@font-face {
  font-family: 'star-trek-future';
  src: url('/assets/fonts/star-trek-future.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'star-next';
  src: url('/assets/fonts/star-next.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
body {
  margin-top: 50px;
  padding: 10px;
  text-align: left;
  color: white;
  min-height: 100vh;

  background-color: #01030a;

  background-image:
    radial-gradient(circle at 20% 25%, rgba(45, 90, 180, 0.18), transparent 30%),
    radial-gradient(circle at 80% 75%, rgba(120, 50, 160, 0.12), transparent 30%),
    radial-gradient(circle at 50% 100%, rgba(20, 70, 140, 0.10), transparent 35%);
}
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  pointer-events: none;

  background-image:
    /* Tiny distant stars */
    radial-gradient(1px 1px at 5% 10%, white, transparent),
    radial-gradient(1px 1px at 15% 35%, white, transparent),
    radial-gradient(1px 1px at 25% 70%, white, transparent),
    radial-gradient(1px 1px at 35% 15%, white, transparent),
    radial-gradient(1px 1px at 45% 55%, white, transparent),
    radial-gradient(1px 1px at 55% 85%, white, transparent),
    radial-gradient(1px 1px at 65% 25%, white, transparent),
    radial-gradient(1px 1px at 75% 65%, white, transparent),
    radial-gradient(1px 1px at 85% 15%, white, transparent),
    radial-gradient(1px 1px at 95% 45%, white, transparent),

    /* Slightly brighter stars */
    radial-gradient(1.5px 1.5px at 12% 80%, #d8ecff, transparent),
    radial-gradient(1.5px 1.5px at 28% 40%, #ffffff, transparent),
    radial-gradient(1.5px 1.5px at 48% 20%, #d8ecff, transparent),
    radial-gradient(1.5px 1.5px at 68% 75%, #ffffff, transparent),
    radial-gradient(1.5px 1.5px at 88% 55%, #d8ecff, transparent),

    /* A few prominent stars */
    radial-gradient(2px 2px at 18% 60%, #ffffff, transparent),
    radial-gradient(2px 2px at 52% 45%, #d8ecff, transparent),
    radial-gradient(2px 2px at 82% 25%, #ffffff, transparent);

  opacity: 0.8;
  animation: twinkle 8s ease-in-out infinite alternate;
}
body::after {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  pointer-events: none;

  background-image:
    radial-gradient(1px 1px at 8% 12%, white, transparent),
    radial-gradient(1px 1px at 22% 48%, white, transparent),
    radial-gradient(1px 1px at 41% 72%, white, transparent),
    radial-gradient(1px 1px at 63% 18%, white, transparent),
    radial-gradient(1px 1px at 79% 82%, white, transparent),
    radial-gradient(1px 1px at 94% 35%, white, transparent);

  background-size: 180px 180px;
  opacity: 0.35;

  animation:
    twinkle 12s ease-in-out infinite alternate,
    starDrift 90s linear infinite;
}
#Content {
  max-width: 315px;
  margin: auto;
}
#Nav {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-bottom: 5px;
}

#Nav a {
  font-family: 'Orbitron', sans-serif;
  color: #FFC72C;
  text-decoration: none;
  font-size: 0.9em;
}

#Nav a:hover {
  color: pink;
}
#Main {
  margin-top: 0px;
  font-size: 1em;
  position: relative; /* Makes text selection hug text column. */
}
ul li:before {
  content: '\2014';
  position: absolute;
  margin-left: -20px;
}
h1 {
  color: #FFC72C;
  font-style: italic;
  padding: 0px;
  font-family: 'star-trek-future';
  font-size: 7.5em;
  font-weight: normal;
  word-spacing: -.4em;
  line-height: 1em;
  margin-top: 5px;
  margin-bottom: 5px;
}
h1 a:link {
  color: #FFC72C;
  text-decoration: none;
}
h1 a:visited {
  color: #FFC72C;
  text-decoration: none;
}
h1 a:hover {
  color: pink;
  text-decoration: none;
}
h2 {
  color: #32A9DB;
  font-family: 'Orbitron', sans-serif;
  margin: 0;
  font-size: 2.6em;
}
h3 {
  color: #FF0D00;
  font-family: 'Orbitron', sans-serif;
  font-size: 1.3em;
}
h4 {
  color: #FFC72C;
  font-family: 'Exo 2', Helvetica, Arial, sans-serif;
  margin: 0;
}
p {
  font-family: 'Exo 2', Helvetica, Arial, sans-serif;
  color: white;
  text-align: justify;
  line-height: 1.6;
  margin-bottom: 1.2em;  
}
p a:link {
  color: #FFC72C;
  text-decoration: underline;
}
p a:visited {
  color: #FFC72C;
  text-decoration: none;
}
p a:hover {
  color: pink;
  text-decoration: none;
  background-color: none;
}
#Main ul {
  list-style-type: none;
  text-align: justify;
  font-family: 'Exo 2', Helvetica, Arial, sans-serif;
  width: auto;
  float: none;
  padding-left: 22px;
  margin: 14px 0;
  line-height: 1.2;
}
#footer {
  clear: both;
  margin-top: 30px;
  padding-top: -10px;
  padding-left: 10px;
  border-top: thin solid #ddd;
  color: red;
  font-size: 0.9em;
}
#footer p {
  color: #666;
}
@keyframes twinkle {
  0% {
    opacity: 0.55;
  }

  50% {
    opacity: 0.85;
  }

  100% {
    opacity: 0.65;
  }
}
@keyframes starDrift {
  from {
    transform: translate(0, 0);
  }

  to {
    transform: translate(-180px, -180px);
  }
}