:root {
  --fade-time: 2s;
}

body {
  overflow: hidden;
  margin: 5vh;
  padding: 0;
  font-family: "Space Mono", monospace;
}

@font-face {
  font-family: "Space Mono";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

.sky {
  background-color: #020f24;
  color: white;
}

table tr td:first-child {
  text-align: center;
}

table tr td:nth-child(2) {
  padding-left: 0.5em;
  padding-right: 0.5em;
}

/* Thanks https://cesque.com/gaydient/ ! */
.pride-nb {
  background: linear-gradient(
    rgb(253, 219, 0),
    rgb(238, 212, 143),
    rgb(255, 255, 255) 30%,
    rgb(255, 255, 255),
    rgb(255, 255, 255) 36%,
    rgb(212, 181, 222),
    rgb(156, 92, 212),
    rgb(88, 50, 96),
    rgb(0, 0, 0)
  ) no-repeat fixed;
  color: #222020;
}

.pride-trans {
  background: linear-gradient(
    rgb(85, 205, 252),
    rgb(179, 157, 233),
    rgb(247, 168, 184),
    rgb(246, 216, 221),
    rgb(255, 255, 255),
    rgb(246, 216, 221),
    rgb(247, 168, 184),
    rgb(179, 157, 233),
    rgb(85, 205, 252)
  ) no-repeat fixed;
  color: #222020;
}

.pride-bi {
  background: linear-gradient(
    rgb(255, 0, 128),
    rgb(200, 37, 157),
    rgb(140, 71, 153),
    rgb(68, 46, 159),
    rgb(0, 50, 160)
  ) no-repeat fixed;
  color: whitesmoke;
}

.pride-pan {
  background: linear-gradient(
    rgb(255, 30, 140) 10%,
    rgb(255, 102, 57),
    rgb(255, 230, 29) 40%,
    rgb(255, 230, 29),
    rgb(255, 230, 29) 60%,
    rgb(87, 229, 98),
    rgb(31, 179, 253) 85%,
    rgb(31, 179, 253),
    rgb(31, 179, 253)
  ) no-repeat fixed;
  color: #222020;
}

.pride-gen {
  background: linear-gradient(
    rgb(237, 34, 36),
    rgb(243, 91, 34),
    rgb(249, 150, 33),
    rgb(245, 193, 30),
    rgb(241, 235, 27) 27%,
    rgb(241, 235, 27),
    rgb(241, 235, 27) 33%,
    rgb(99, 199, 32),
    rgb(12, 155, 73),
    rgb(33, 135, 141),
    rgb(57, 84, 165),
    rgb(97, 55, 155),
    rgb(147, 40, 142)
  ) no-repeat fixed;
  color: #222020;
}

ul {
  list-style-type: none;
  margin: 0;
  padding-left: 5px;
}

ul li:before {
  margin-left: -1em
}

a:link {
  color: inherit
}

a:visited {
  color: inherit
}

#container {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
}

.title {
  text-align: center;
  font-size: 3em;
}

.subtitle {
  font-size: 1.5em;
}

.star {
  background: radial-gradient(
    #cef8f8 3%,
    rgb(177, 184, 210, .5) 10%,
    rgba(33, 66, 104, 0.3)40%,
    transparent 60%
  );
  position: absolute;
  animation: fade var(--fade-time) linear infinite;
}

@keyframes fade {
  0%, 100% { opacity: 0 }
  50% { opacity: 1 }
}