body {
  font-family: Open Sans, Helvetica, sans-serif;
  margin: 0;
  min-height: 100vh;
  background: linear-gradient(180deg, #221F20 180px, #fcfcfc 180px);
  font-size: 14px;
  line-height: 1.5;
  color: rgb(27 27 27);

  display: grid;
  grid-template-rows: auto 1fr;
  grid-template-columns: minmax(40px, 1fr) minmax(auto, 700px) minmax(40px, 1fr);
}

* {box-sizing: border-box;}

header {
  grid-column: 2 / -1;
  height: 180px;
  background-image: url(../images/logo-large.svg);
  background-repeat: no-repeat;
  background-size: 662px; /* This is the native image width. */
  background-position-y: 15px;
}
header * {
  display: none;
}

main {
  grid-column: 2;
  margin-bottom: 75px;
}

h1 {
  font-size: 36px;
  font-stretch: semi-condensed;
  line-height: 1.2;
  margin-block-start: 1em;
  margin-block-end:  1em;
}
h2 {
  font-size: 22px;
  line-height: 1.2;
  margin-block-start: 1em;
  margin-block-end:  1em;
}

a:any-link {
  color: rgb(167 119 16);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

p {
  margin-bottom: 0;
}

ol, ul {
  margin: 0;
  padding-left: 2em;
}

li {
  margin: 0.3em 0;
}

.footer {
  display: flex;
  justify-content: space-between;
  gap: 46px;
  font-size: 13px;
  color: #434343;
  margin-top: 13px;
}
.footer a {
  text-decoration: none;
}
@media (max-width: 800px) {
  .footer {
    gap:30px;
  }
}


/*** SEMI-RESPONSIVENESS ***/
/* JUST to handle narrow browser windows. */
@media (max-width: 780px) {
  body {
    background: linear-gradient(180deg, #221F20 calc(180/780 * 100vw), #fcfcfc calc(180/780 * 100vw));
  }
  header {
    height: calc(180/780 * 100vw);
    background-position-y: 15px;
    background-size: calc(662/780 * 100vw);
  }
}


/*** DARK MODE ***/
@media (prefers-color-scheme: dark) {
  body, .main {
    background: #221F20;
    color: rgb(240 240 240);
  }
  h1, h2 {
    color: #fff;
  }
  h1:first-of-type {
    margin-block-start: 0.5em;
  }
  a:any-link {
    color: #ffcc01;
  }
}