:root {
  /* USWDS 3.13.0: color palette specifications */

  /* primary color */
  --blue-warm-60:      rgb(var(--blue-warm-60_rgb));
  --blue-warm-60_rgb:   52  93 150; /* hex equivalent #345d96 */
  /* primary tints */
  --blue-warm-5:       rgb(var(--blue-warm-5_rgb));
  --blue-warm-5_rgb:   236 241 247; /* hex equivalent #ECF1F7 */
  --blue-warm-20:      rgb(var(--blue-warm-20_rgb));
  --blue-warm-20_rgb:  187 202 228; /* hex equivalent #BBCAE4 */
  --blue-warm-40:      rgb(var(--blue-warm-40_rgb));
  --blue-warm-40_rgb:  114 146 199; /* hex equivalent #7292C7 */
  /* primary shades */
  --blue-warm-70:      rgb(var(--blue-warm-70_rgb));
  --blue-warm-70_rgb:   47  70 104; /* hex equivalent #2F4668 */

  /* secondary color */
  --gray-warm-90:      rgb(var(--gray-warm-90_rgb));
  --gray-warm-90_rgb:   23  23  22; /* hex equivalent #171716 */
  /* secondary tints */
  --gray-10:           rgb(var(--gray-10_rgb));
  --gray-10_rgb:       230 230 230; /* hex equivalent #E6E6E6 */
  --gray-30:           rgb(var(--gray-30_rgb));
  --gray-30_rgb:       173 173 173; /* hex equivalent #ADADAD */
  --gray-50:           rgb(var(--gray-50_rgb));
  --gray-50_rgb:       117 117 117; /* hex equivalent #757575 */
  --gray-80:           rgb(var(--gray-80_rgb));
  --gray-80_rgb:        46  46  46; /* hex equivalent #2E2E2E */

  /* Unused, but here because we're required to have it. */
  --blue-warm-80v:     rgb(var(--blue-warm-80v_rgb));
  --blue-warm-80v_rgb:  22  46  81; /* hex equivalent #162E51 */


  /* SHARED : USWDS 3.13.0: color palette specifications */
  --yellow-20v_rgb: 250 206   0;
  --gray-20_rgb:    201 201 201;

  --yellow-20v: rgb(var(--yellow-20v_rgb));
  --gray-20:    rgb(var(--gray-20_rgb));



  --body_bg-color_rgb: 226 226 226;
  --body_bg-color: rgb(var(--body_bg-color_rgb));

  --body_font_color_rgb: 27 27 27;
  --body_font_color: rgb(var(--body_font_color_rgb));
}

body {
  font-family: Open Sans, Helvetica, sans-serif;
  margin: 0;
  min-height: 100vh;
  background: linear-gradient(180deg, var(--blue-warm-60) 180px, #fcfcfc 180px);
  font-size: 14px;
  line-height: 1.5;
  color: var(--body_font_color);

  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: 725px; /* This is the native image width. */
  background-position-y: 53px;
  margin-left: -25px;
}
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(16 61 167);
  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) {
  /*
   * Can't use typed arithmetic in browsers yet.  So we're getting ratio of some
   * dimension to the width of the center track (700 px) by dividing unitless
   * numbers.
   *
   * The ACTUAL middle track width in pixels is calculated as 100vw - 80px.
   * 80px = left track width (40px) + right track width (40px).
   */
  body {
    background: linear-gradient(180deg, var(--blue-warm-60) calc(180/700 * (100vw - 80px)), #fcfcfc calc(180/700 * (100vw - 80px)));
  }
  header {
    height: calc(180/700 * (100vw - 80px));
    background-position-y: calc(53/700 * (100vw - 80px));
    background-size: calc(725/700 * (100vw - 80px));
    margin-left: calc(-25/700 * (100vw - 80px));
  }
}


/*** DARK MODE ***/
@media (prefers-color-scheme: dark) {
  body, .main {
    background: rgb(30 46 71);
    color: rgb(255 255 255 / 0.8);
  }
  h1, h2 {
    color: #fff;
  }
  h1:first-of-type {
    margin-block-start: 0.5em;
  }
  a:any-link {
    color: rgb(132 189 255);
  }
}