body, html {
  padding: 0;
  margin: 0;
  background: #333;
  color: #EEE;
  font-family: 'Montserrat', sans-serif;
}
@media (prefers-reduced-motion: no-preference) {
  body, html, svg {
    transition: color 150ms linear, background-color 150ms linear;
  }
}
main {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
main.yaas {
  background: linear-gradient(135deg,
    rgba(255,0,0,0.4) 0%,
    rgba(255,154,0,0.4) 10%,
    rgba(208,222,33,0.4) 20%,
    rgba(79,220,74,0.4) 30%,
    rgba(63,218,216,0.4) 40%,
    rgba(47,201,226,0.4) 50%,
    rgba(28,127,238,0.4) 60%,
    rgba(95,21,242,0.4) 70%,
    rgba(186,12,248,0.4) 80%,
    rgba(251,7,217,0.4) 90%,
    rgba(255,0,0,0.4) 100%);
}
a {
  color: white;
}
a span {
  display: none;
}
p {
  text-align: center;
  padding-left: 1em;
  padding-right: 1em;
}
ul {
  margin: 10px 0 0;
  padding: 0;
}
li {
  list-style: none;
  display: inline-block;
}
li + li {
  margin-left: 10px;
}
#pi {
  position: fixed;
  bottom: 3px;
  right: 3px;
  cursor: pointer;
}
@media (max-width: 800px) {
  /* No sense showing the pi symbol on mobile devices that can't interact with it. */
  #pi { display: none; }
}