body {
  font-family: system-ui, sans-serif;
  font-size: 16px;
  color: #333;
  background-color: #FAFAFA;
  margin: 0;
  overflow-y: auto;
  display: flex;
  height: 100vh;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  align-content: stretch; }
  body.home {
    background-color: #006783;
    color: white; }

h1 {
  font-size: 2rem; }

h2 {
  font-size: 1.3rem; }

code {
  font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace; }

header {
  flex: 0;
  background-color: #006783;
  color: white; }
  header > section {
    min-height: 4.5rem;
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 1rem;
    max-width: 45rem;
    margin-left: auto;
    margin-right: auto;
    padding-top: 0.5rem;
    padding-bottom: 1rem; }
  header .site-logo {
    text-align: center; }
    header .site-logo img {
      width: 60%;
      height: auto; }
  header .site-small-logo {
    align-self: flex-start;
    position: absolute;
    left: -5.5rem; }
    header .site-small-logo img {
      height: 5rem;
      width: auto; }
  header .site-slogan {
    font-style: italic; }
  header a,
  header a:link,
  header a:visited {
    color: #fff317;
    text-decoration: none; }
  header a:active,
  header a:hover {
    color: #fff317;
    text-decoration: underline; }
  header h1 {
    font-size: 2rem !important;
    margin: 0;
    padding: 0; }

main {
  flex: 1;
  max-width: 45rem;
  margin-left: auto;
  margin-right: auto; }
  main a,
  main a:link,
  main a:visited {
    font-weight: bold;
    color: #005faf;
    text-decoration: none; }
  main a:active,
  main a:hover {
    color: #005faf;
    text-decoration: underline; }
  body.home main {
    background-color: #006783;
    color: white; }
    body.home main a,
    body.home main a:link,
    body.home main a:visited {
      color: #fff317;
      text-decoration: none; }
    body.home main a:active,
    body.home main a:hover {
      color: #fff317;
      text-decoration: underline; }
  main h1 {
    font-size: 2rem; }
  main h2 {
    font-size: 1.6rem; }
  main h3 {
    font-size: 1.1rem;
    margin-bottom: 0.2rem; }

footer {
  background-color: #006783;
  color: white; }
  footer a,
  footer a:link,
  footer a:visited {
    color: #fff317;
    font-weight: bold;
    text-decoration: none; }
  footer a:active,
  footer a:hover {
    color: #fff317;
    font-weight: bold;
    text-decoration: underline; }
  footer > section {
    max-width: 45rem;
    margin-left: auto;
    margin-right: auto;
    padding-top: 0.7rem;
    padding-bottom: 0.7rem;
    text-align: center; }

img[src$='#screenshot-right'] {
  float: right;
  width: 40%;
  background-color: #333;
  padding: 1rem;
  border-radius: 0.8rem; }

@media (max-width: 60rem) {
  main {
    margin-left: 5rem; }
  header > section {
    margin-left: 5rem; }
  header > section .site-small-logo {
    left: -4rem; }
    header > section .site-small-logo img {
      height: 3.5rem; } }

@media (max-width: 47rem) {
  main {
    margin-left: 3rem;
    margin-right: 1rem; }
  header > section {
    margin-left: 3rem;
    margin-right: 1rem; }
  header > section .site-small-logo {
    left: -2.9rem; }
    header > section .site-small-logo img {
      height: 2.8rem; } }