body {
  font-family: DejaVu Sans Mono, Noto Sans Mono, Hack, monospace;
  width: min(720px, 90%);
  margin: auto;
}

h1 {
  font-size: 4em;
  margin: 0;
  text-align: center;
}

h2 {
  text-align: center;
}

p {
  line-height: 1.75;
}

picture, img {
  display: block;
  max-width: 100%;
  margin: auto;
  border-radius: 5px;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  border: 1px solid #000000;
}

pre {
  font-size: 1.5em;
}

.logo {
  width: 35%;
}

.announcement {
  font-size: 2em;
  width: 75%;
  margin: auto;
  border-radius: 5px;
  text-align: center;
}

.members-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  gap: 32px 16px;
}

.members-container img {
  height: 48px;
  width: 48px;
}

.members-container a {
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: center;
  text-decoration: none;
}

.members-container a:hover {
  text-decoration: underline;
}

/* https://en.wikipedia.org/wiki/ANSI_escape_code#Colors */
.gray {
  color: #7F7F7F;
}

.red {
  color: #CD0000;
}

.green {
  color: #00CD00;
}

.yellow {
  color: #CDCD00;
}

.blue {
  color: #0000CD;
}

.magenta {
  color: #CD00CD;
}

.cyan {
  color: #00CDCD;
}

.shade {
  background-color: #2AFC7B;
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
  body {
    background-color: #111111;
    color: #CCCCCC;
  }

  a:link {
    color: skyblue;
  }

  a:visited {
    color: pink;
  }

  th, td {
    border: 1px solid #CCCCCC;
  }

  .shade {
    background-color: #328748;
  }
}