body {
  margin: 0 !important;
  font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
}
.body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.header {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  padding: 20px 30px 10px 30px;
}
a {
  text-decoration: none;
}
.brand a,
.brand a:hover {
  margin-right: 2rem;
  font-size: 48px;
  font-weight: 900;
}
.menu {
  font-weight: 700;
}
.main {
  padding: 0 30px 0 30px;
}
.footer {
  margin-top: auto;
  padding: 6px 30px 8px 30px;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
}

/*
  light mode base
*/
body {
  color: #3b3c42;
  background-color: #fafafa;
}
.header {
  background-color: #f0f0f0;
}
h1, h2, h3, p {
  color: #202124;
}
a {
  color: #0078ad;
}
a:hover {
  color: #39a7d9;
}
.brand a,
.brand a:hover {
  color: #a2a4af;
}
.footer {
  color: #a2a4af;
  background-color: #f0f0f0;
}
.footer a {
  color: #202124;
}
.footer a:hover {
  color: #a2a4af;
}

@media (prefers-color-scheme: dark) {
  body {
    color: #bdc1c6;
    background-color: #202124;
  }
  .header {
    background-color: #24252a;
  }
  h1, h2, h3, p {
    color: #bdc1c6;
  }
  a {
    color: #00B7FF;
  }
  a:hover {
    color: #60d1ff;
  }
  .brand a,
  .brand a:hover {
    color: #616269;
  }
  .footer {
    color: #616269;
    background-color: #24252a;
  }
  .footer a {
    color: #bdc1c6;
  }
  .footer a:hover {
    color: #a2a4af;
  }
}