/* ==================================================================
  CSS Boilerplate v2.0.2
  The Unlicense <https://unlicense.org>
  https://github.com/MattMcAdams/CSS-Boilerplate
================================================================== */
/* =================================================================
/* SECTION Tokens
================================================================= */

:root {
    padding: .5em;
    padding-left: 2.5em;
    /* Spacing */
    --space_05: 0.25rem; /* 4px   - utility to substitute 0 margins */
    --space_1: 0.5rem;   /* 8px   - utility for tight paddings etc */
    --space_2: 1rem;     /* 16px  - 1/2 line height, for closely related elements */
    --space_4: 2rem;     /* 32px  - 1 line height, for related elements */
    --space_8: 4rem;     /* 64px  - 2 line heights, for loosely related elements */
    --space_16: 8rem;    /* 128px - 4 line heights, for unrelated elements */
  
    /* Semantic Space */
    --space_flow: var(--space_4);
    --space_gutter: var(--space_2);
    --space_section: var(--space_8);
    --space_grid-gap: var(--space_4);
    --space_flex-gap: var(--space_2);
    --space_layout-gap: var(--space_4);
  
    /* Layout Widths */
    --width_content: 60rem; /* 960px + gutters */
    --width_sidebar: 20rem; /* 320px + gutters */
    --width_wide: calc(
      var(--width_content) +
      var(--width_sidebar) +
      var(--space_layout-gap)
    );
    /* Total wide width: 60rem + 20rem + 2rem = 82rem */
  
    /* Colors */
    --color_text--default: #18181b;
    --color_text--subtle: #71717a;
    --color_text--link: #6366f1;
    --color_text--link-alt: #4f46e5;
    --color_text--accent: var(--color_text--link);
    --color_background--surface: white;
    --color_background--element: #f4f4f5;
    --color_background--chip: #e4e4e7;
    --color_accent: var(--color_text--link);
  
    /* Font Families */
    --font_body: noto-serif, sans-serif;
    --font_head: noto-serif;
    --font_mono: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
  
    /* Font Weights */
    --font_weight--thin: 100;
    --font_weight--extralight: 200;
    --font_weight--light: 300;
    --font_weight--normal: 400;
    --font_weight--medium: 500;
    --font_weight--semibold: 600;
    --font_weight--bold: 700;
    --font_weight--extrabold: 800;
    --font_weight--black: 900;
  
    /* Font Sizes & Line Heights */
    /* Based on a modular scale 1.125 by 1.2 */
    /* Exact values have been refined to be a whole pixel value */
    --font_size--small: 0.9375rem;    /* 15px */
    --font_size--normal: 1.125rem;    /* 18px */
    --font_size--medium: 1.375rem;    /* 22px */
    --font_size--large: 1.625rem;     /* 26px */
    --font_size--xlarge: 1.9375rem;   /* 31px */
    --font_size--xxlarge: 2.3125rem;  /* 37px */
    --font_size--xxxlarge: 2.8125rem; /* 45px */
  
    /* Line heights */
    --font_height--small: 1.2;
    --font_height--normal: 1.8;
    --font_height--medium: 1.5;
    --font_height--large: 1.3;
    --font_height--xlarge: 1.2;
    --font_height--xxlarge: 1.1;
    --font_height--xxxlarge: 1;
  }
  
  /* Medium font sizes */
  /* Based on a modular scale 1.125 by 1.25 */
  /* Exact values have been refined to be a whole pixel value */
  @media (min-width: 30rem) {
    :root {
      --font_size--small: 0.875rem;     /* 14px */
      --font_size--medium: 1.4375rem;   /* 23px */
      --font_size--large: 1.75rem;      /* 28px */
      --font_size--xlarge: 2.1875rem;   /* 35px */
      --font_size--xxlarge: 2.75rem;    /* 44px */
      --font_size--xxxlarge: 3.4375rem; /* 55px */
    }
  }
  
  /* Large font sizes */
  /* Based on a modular scale 1.125 by 1.3 */
  /* Exact values have been refined to be a whole pixel value */
  @media (min-width: 60em) {
    :root {
      --font_size--large: 1.875rem;     /* 30px */
      --font_size--xlarge: 2.5rem;      /* 40px */
      --font_size--xxlarge: 3.1875rem;  /* 51px */
      --font_size--xxxlarge: 4.1875rem; /* 67px */
    }
  }
  
  del {
    --color_background--element: #fdebeb;
  }
  
  ins {
    --color_background--element: #e3fcec;
  }
  
  /* !SECTION Tokens */
  /* =================================================================
  /* SECTION Reset
  ** http://meyerweb.com/eric/tools/css/reset/
  ** v2.0 | 20110126 * License: none (public domain)
  ** Modified by Matt McAdams
  ================================================================= */
  
  * {
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  
  html, body, div, span, applet, object, iframe,
  h1, h2, h3, h4, h5, h6, p, blockquote, pre,
  a, abbr, acronym, address, big, cite, code,
  del, dfn, em, img, ins, kbd, q, s, samp,
  small, strike, strong, sub, sup, tt, var,
  b, u, i, center,
  dl, dt, dd, ol, ul, li,
  fieldset, form, label, legend,
  table, caption, tbody, tfoot, thead, tr, th, td,
  article, aside, canvas, details, embed,
  figure, figcaption, footer, header, hgroup,
  menu, nav, output, ruby, section, summary,
  time, mark, audio, video, hr {
    margin: 0;
    padding: 0;
    border: 0;
    font: inherit;
    font-size: 100%;
    vertical-align: baseline;
  }
  
  /* HTML5 display-role reset for older browsers */
  
  article, aside, details, figcaption, figure,
  footer, header, hgroup, menu, nav, section {
    display: block;
  }
  
  body {
    line-height: 1;
  }
  
  ol, ul {
    list-style: none;
  }
  
  blockquote, q {
    quotes: none;
  }
  
  blockquote::before,
  blockquote::after,
  q::before,
  q::after {
    content: '';
    content: none;
  }
  
  table {
    border-collapse: collapse;
    border-spacing: 0;
  }
  
  /* END !SECTION Reset */
  /* =================================================================
  /* SECTION Core
  ================================================================= */
  
  /* Links that point to a location on the same page will scroll
   * smoothly down to that location. */
  
  @media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
  }
  
  /* Hide content visually, but allow screen readers to read the
   * content. Note that for Accessibility guidelines, this content
   * must become visible if toggled over using a keyboard. */
  
  .visually-hidden:not(:focus):not(:active) {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
  }
  
  /* Give the hidden attribute most priority - fixes issue where
   * an html element can be marked as hidden but is still visible.
   * Use aria-hidden="true" to hide visual elements from
   * screen readers. */
  
  [hidden] {
    display: none !important;
  }
  
  /* Ensures disabled elements do not accept events */
  
  [disabled] {
    pointer-events: none !important;
    cursor: not-allowed !important;
  }
  
  /* Use primary color for focus styles */
  
  :focus-visible {
    outline-color: var(--color_accent);
    outline-offset: 3px;
    outline-width: 2px;
  }
  
  /* Adds a margin above an element when it is the target of an ID link */
  
  * {
    scroll-margin-top: var(--space_flow);
    scroll-margin-bottom: var(--space_flow);
  }
  
  /* ::selection {
    background-color: var(--color-primary-100);
  } */
  
  /* ==============================
  /* SECTION Typography
  ============================== */
  
  /* Set the document's default font, color, size, and line height */
  
  body {
    font-family: var(--font_body);
    font-size: var(--font_size--normal);
    line-height: var(--font_height--normal);
    color: var(--color_text--default);
    background: var(--color_background--surface);
    accent-color: var(--color_accent);
  }
  
  /* Heading typography */
  
  h1, h2, h3, h4, h5 {
    font-family: var(--font_head);
    font-weight: var(--font_weight--bold);
  }
  
  h1,
  .util_txt--h1 {
    font-size: var(--font_size--xxxlarge);
    line-height: var(--font_height--xxxlarge);
  }
  
  h2,
  .util_txt--h2 {
    font-size: var(--font_size--xxlarge);
    line-height: var(--font_height--xxlarge);
  }
  
  h3,
  .util_txt--h3 {
    font-size: var(--font_size--xlarge);
    line-height: var(--font_height--xlarge);
  }
  
  h4,
  .util_txt--h4 {
    font-size: var(--font_size--large);
    line-height: var(--font_height--large);
  }
  
  h5 {
    font-size: var(--font_size--medium);
    line-height: var(--font_height--medium);
  }
  
  /* Set typography for small text */
  
  small,
  .util_txt--small {
    font-size: var(--font_size--small);
    line-height: var(--font_height--small);
  }
  
  /* Basic styles for inline semantics */
  
  strong, b { font-weight: bold; }
  em, cite, i, q { font-style: italic; }
  s { text-decoration: line-through; }
  u { text-decoration: underline; font-style: normal; }
  
  /* Basic style for subscript and superscript text */
  
  sub, sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
  }
  
  sup { top: -0.5em; }
  sub { bottom: -0.25em; }
  
  del {
    background: var(--color_background--element);
    text-decoration: line-through;
    padding: 0.1em 0.3em;
  }
  
  ins {
    background: var(--color_background--element);
    text-decoration: underline;
    padding: 0.1em 0.3em;
  }
  
  /* Mark styles - see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/mark */
  
  mark {
    background: var(--color_text--accent);
    color: var(--color_background--surface);
    padding: 0.1em 0.3em;
  }
  
  /* Basic styles for abbreviation. Only style differently when
   * a title is present. */
  
  abbr { text-decoration: none; }
  abbr[title] {
    cursor: help;
    text-decoration: underline;
    text-decoration-style: dotted;
  }
  
  
  /* !SECTION Typography */
  /* ==============================
  /* SECTION Links
  ** :not([class]) is so that the styles won't need to be overridden
  ** in special use cases like navigation / buttons
  ============================== */
  
  a:not([class]) {
    color: var(--color_text--link);
    text-decoration: none;
    font-weight: bold;
  }
  
  /* a:not([class]):visited { } */
  
  a:not([class]):hover,
  a:not([class]):focus {
    text-decoration: underline;
    text-decoration-color: var(--color_text--link-alt);
    text-decoration-thickness: 2px;
  }
  
  /* OPTIONAL STYLES - Add an icon for special links */
  
  /* a:not([class])[target="_blank"]::after,
  a:not([class])[data-link-type="external"] {
    content: '';
    padding-inline-start: 0.1em;
  } */
  
  /* a:not([class])[href$='.pdf']::after,
  a:not([class])[data-link-type='document']::after {
    content: '';
    padding-inline-start: 0.1em;
  } */
  
  /* a:not([class])[href^="tel:"]::before,
  a:not([class])[data-link-type="telephone"]::before {
    content: '';
    padding-inline-end: 0.1em;
  } */
  
  /* a:not([class])[href^="mailto:"]::before,
  a:not([class])[data-link-type="email"]::before {
    content: '';
    padding-inline-end: 0.1em;
  } */
  
  /* !SECTION Links */
  /* ==============================
  /* SECTION Blockquote
  ============================== */
  
  blockquote {
    border-left: 5px solid var(--color_accent);
    padding: var(--space_2) var(--space_4);
    font-weight: var(--font_weight--semibold);
  }
  
  blockquote footer,
  blockquote cite {
    font-size: var(--font_size--small);
    line-height: var(--font_height--small);
    font-weight: var(--font_weight--normal);
  }
  
  blockquote cite {
    font-style: italic;
  }
  
  blockquote > cite,
  blockquote > footer {
    display: block;
    margin-block-start: calc(var(--space_flow) / 2);
  }
  
  /* !SECTION Blockquote */
  /* ==============================
  /* SECTION Lists
  ** :not([class]) is so that the styles won't need to be overridden
  ** in special use cases. For example, when list markup might need
  ** to be paired with a grid layout
  ============================== */
  
  /* Set nested unordered list styles */
  
  ul:not([class]) { list-style-type: disc; }
  ul:not([class]) ul:not([class]) { list-style-type: circle; }
  ul:not([class]) ul:not([class]) ul:not([class]) { list-style-type: square; }
  
  /* Set nested ordered list styles */
  
  ol:not([class]) { list-style-type: decimal; }
  ol:not([class]) ol:not([class]) { list-style-type: upper-alpha; }
  ol:not([class]) ol:not([class]) ol:not([class]) { list-style-type: lower-roman; }
  
  /* Set indention and flow spacing for lists */
  
  ol:not([class]) li,
  ul:not([class]) li {
    margin-block-end: var(--space_1);
    margin-inline-start: var(--space_4);
  }
  
  /* Add basic styles for definition lists */
  
  dt { font-weight: bold; }
  dd { padding-inline-start: var(--space_2); }
  
  /* !SECTION Lists */
  /* ==============================
  /* SECTION Media
  ============================== */
  
  /* Allow media to sit correctly in content flow */
  
  img,
  figure,
  video,
  .aspect-ratio,
  .embed-wrapper {
    display: block;
    width: 100%;
  }
  
  img {
    max-width: 100%;
    width: auto;
    height: auto;
  }
  
  /* Add placeholder background for video */
  
  video:not(:has(source)) {
    background: var(--color_background--element);
  }
  
  /* Basic style for figcaption */
  
  figcaption {
    display: block;
    font-style: italic;
  }
  
  /* Allow audio to sit correctly in content flow,
   * Adjust border radius to allow consistency across browsers */
  
  audio {
    display: block;
    width: 100%;
    max-width: 100%;
    border-radius: 900px;
  }
  
  /* Setup media wrappers */
  
  .aspect-ratio,
  .embed-wrapper {
    --aspect-ratio: 16/9;
    width: 100%;
    padding-block-start: calc(100%/(var(--aspect-ratio)));
    position: relative;
  }
  
  /* Position inner elements in media wrappers */
  
  .embed-wrapper > iframe,
  .embed-wrapper > embed,
  .embed-wrapper > object,
  .aspect-ratio > iframe,
  .aspect-ratio > embed,
  .aspect-ratio > object,
  .aspect-ratio > img {
    position: absolute;
    inset: 0;
    height: 100%;
    width: 100%;
  }
  
  /* Allow img to crop to avoid being stretched */
  
  .aspect-ratio > img {
    object-fit: cover;
  }
  
  /* Wrapper to allow horizontal overflow,
   * Useful for tables and other wide content */
  
  .overflow-x,
  .table-wrapper {
    overflow-x: auto;
  }
  
  /* !SECTION Media */
  /* ==============================
  /* SECTION Rules
  ============================== */
  
  hr {
    border: none;
    border-block-end: 1px solid var(--color_text--subtle);
    width: 100%;
  }
  
  hr.spacer {
    --spacer-height: calc(var(--space_flow) * 2);
    border: none;
    margin-block-start: var(--spacer-height) 0;
  }
  
  /* !SECTION Rules*/
  /* ==============================
  /* SECTION Tables
  ============================== */
  
  table {
    width: 100%;
  }
  
  caption {
    font-size: inherit;
    line-height: inherit;
    text-align: start;
    margin-block-end: var(--space_2);
  }
  
  thead {
    background-color: var(--color_text--default);
    color: var(--color_background--surface);
  }
  
  th, td {
    font-size: var(--font_size--small);
    line-height: var(--font_height--small);
    padding: var(--space_2);
    text-align: start;
  }
  
  th { font-weight: bold; }
  
  tr {
    border-block-end: 0.5px solid var(--color_text--subtle);
  }
  
  tbody tr:hover {
    background-color: var(--color_background--element);
  }
  
  tfoot {
    background-color: var(--color_background--chip);
  }
  
  /* !SECTION Tables */
  /* ==============================
  /* SECTION Code
  ============================== */
  
  code, samp, kbd, var {
    font-family: var(--font_mono);
    padding: 0.1em 0.3em;
  }
  
  code, samp {
    background-color: var(--color_background--element);
  }
  
  var {
    font-style: italic;
    font-weight: bold;
  }
  
  kbd {
    background-color: var(--color_text--default);
    color: var(--color_background--surface);
    border-radius: 5px;
  }
  
  pre code,
  pre samp {
    display: block;
    padding: var(--space_2);
    overflow: auto;
    font-family: var(--font_mono);
    font-size: var(--font_size--small);
    line-height: var(--font_height--small);
  }
  
  /* !SECTION Code */
  /* ==============================
  /* SECTION Details
  ============================== */
  
  /* Display:block removes Firefox's marker
   * ::webkit-details-marker removed Chrome & Safair's marker */
  
  details {
    display: block;
    position: relative;
  }
  
  summary::-webkit-details-marker {
    display: none;
  }
  
  summary {
    display: block;
    cursor: pointer;
    color: var(--color_text--default);
    font-weight: var(--font_weight--bold);
    font-weight: bold;
  }
  
  summary::before {
    content: "+";
    box-sizing: border-box;
    text-align: center;
    display: inline-block;
    font-size: 1em;
    width: 1em;
    margin-inline-end: 0.5em;
    will-change: transform;
    transition: transform 300ms ease;
  }
  
  summary:focus::before {
    color: var(--color_accent);
  }
  
  summary + * {
    margin-block-start: calc(var(--space_flow) / 2);
  }
  
  details[open] > summary::before {
    transform: rotate(45deg);
  }
  
  details {
    background: var(--color_background--element);
    padding: var(--space_2);
  }
  
  /* !SECTION Details */
  /* ==============================
  /* SECTION Meter
  ============================== */
  
  meter {
    --meter-color_track: var(--color_background--element);
    --meter-color_optimum: #15803d;
    --meter-color_sub-optimum: #f59e0b;
    --meter-color_sub-sub-optimum: #dc2626;
  
    display: block;
    width: 100%;
    height: 1rem;
  
    -webkit-appearance: none;
    border-radius: 0;
    background: none;
    background-color: var(--meter-color_track);
  }
  
  /* Set the track color for webkit browsers */
  
  meter::-webkit-meter-bar {
    background: var(--meter-color_track);
  }
  
  /* Set the optimum color */
  
  meter::-webkit-meter-optimum-value {
    background: var(--meter-color_optimum);
  }
  
  meter:-moz-meter-optimum::-moz-meter-bar {
    background: var(--meter-color_optimum);
  }
  
  /* Set the sub optimum color */
  
  meter:-moz-meter-sub-optimum::-moz-meter-bar {
    background: var(--meter-color_sub-optimum);
  }
  
  meter::-webkit-meter-suboptimum-value {
    background: var(--meter-color_sub-optimum);
  }
  
  /* Set the sub sub optimum color */
  
  meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
    background: var(--meter-color_sub-sub-optimum);
  }
  
  /* The red (even less good) bar in Chrome etc. */
  meter::-webkit-meter-even-less-good-value {
    background: var(--meter-color_sub-sub-optimum);
  }
  
  /* !SECTION Meter */
  /* ==============================
  /* SECTION Progress
  ============================== */
  
  progress[value] {
    --progress-color_track: var(--color_background--element);
    --progress-color_fill: var(--color_accent);
  
    display: block;
    width: 100%;
    height: 0.25rem;
  
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: none;
    border-radius: 0;
  
    background: var(--progress-color_track);
  }
  
  progress[value]::-webkit-progress-bar {
    background: var(--progress-color_track);
  }
  
  progress[value]::-webkit-progress-value {
    background: var(--progress-color_fill);
  }
  
  progress[value]::-moz-progress-bar {
    background: var(--progress-color_fill);
  }
  
  /* !SECTION Progress */
  /* !SECTION Core */
  /* =================================================================
  /* SECTION Forms
  ** File uploads are not styled, you're better off implementing
  ** something with JS.
  ** Date & Color inputs are not styled, they're far too complicated
  ** for the scope of this project.
  ================================================================= */
  
  /* Setup form specific styles and variables  */
  
  form {
    --form_invalid-color: #dc2626;
  }
  
  /* Add required input notice if required fields exist */
  
  form:has(.form-field input[required])::after {
    content: "* indicates a required field";
    color: var(--form_invalid-color);
    margin-block-start: var(--space_flow);
    display: block;
  }
  
  /* Standardize labels */
  
  label, legend {
    background-color: transparent;
    font: inherit;
  }
  
  /* Standard styles for normal inputs */
  
  input:not([type="checkbox"], [type="radio"], [type="color"]),
  select,
  textarea,
  button {
    font: inherit;
    padding: var(--space_1);
    display: block;
    width: 100%;
    border: 1px solid var(--color_text--subtle);
    line-height: inherit;
    box-sizing: border-box;
    background: transparent;
  }
  
  /* Remove border and padding for file inputs */
  
  input[type="file"] {
    padding: var(--space_1) 0;
    border: none;
  }
  
  /* Set textarea default height and restrict resize to vertical */
  
  textarea {
    resize: vertical;
    min-height: 10rem;
    font-family: var(--font_mono);
    font-size: var(--font_size--small);
    line-height: var(--font_height--small);
  }
  
  /* ==============================
  /* SECTION Form field class
  ============================== */
  
  .form-field label {
    display: block;
  }
  
  /* Add required marker to labels if their input is required */
  
  .form-field:has(input[required]) label::after {
    content: " *";
    color: var(--form_invalid-color);
  }
  
  /* !SECTION Form field class */
  /* ==============================
  /* SECTION Radio & Checkbox
  ============================== */
  
  ul:has(input[type="checkbox"]),
  ul:has(input[type="radio"]),
  ol:has(input[type="checkbox"]),
  ol:has(input[type="radio"]) {
    list-style: none;
  }
  
  ul:has(input[type="checkbox"]) li,
  ul:has(input[type="radio"]) li,
  ol:has(input[type="checkbox"]) li,
  ol:has(input[type="radio"]) li {
    margin: 0;
  }
  
  /* !SECTION Radio & Checkbox */
  /* ==============================
  /* SECTION Range
  ============================== */
  
  input[type="range"],
  input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    font-size: 1rem;
    height: 1rem;
    padding: 0;
    border: none;
  }
  
  /* Track Styles */
  input[type="range"]::-webkit-slider-runnable-track {
    border: none;
    height: 5px;
    border-radius: 0;
    background-color: var(--color_background--element);
  }
  
  input[type="range"]::-moz-range-track {
    height: 5px;
    border: none;
    border-radius: 0;
    background-color: var(--color_background--element);
  }
  
  input[type="range"]::-moz-range-progress{
    background-color: var(--color_accent);
    height: 5px;
  }
  
  /* Thumb Styles */
  input[type="range"]::-webkit-slider-thumb {
    margin-block-start: calc((1.2rem / -2) + 2.5px);
    width: 1.2rem;
    height: 1.2rem;
    border: 2px solid var(--color_background--surface);
    border-radius: 1000rem;
    background: var(--color_accent);
  }
  
  input[type="range"]::-moz-range-thumb {
    border: 2px solid var(--color_background--surface);
    border-radius: 1000rem;
    font-size: 1.2rem;
    background: var(--color_accent);
  }
  
  /* !SECTION Range */
  /* ==============================
  /* SECTION Buttons
  ============================== */
  
  .button,
  .button--secondary,
  button,
  input[type="submit"],
  input[type="reset"],
  input[type="button"] {
    display: inline-block;
    width: auto;
    text-align: center;
    white-space: nowrap;
    text-decoration: none;
    background-color: var(--color_text--link);
    cursor: pointer;
    box-sizing: border-box;
    color: var(--color_background--surface);
    border: 2px solid var(--color_text--link);
    padding-inline: var(--space_4);
    padding-block: var(--space_1);
  }
  
  a.button:hover,
  a.button--secondary:hover,
  button:hover,
  input[type="submit"]:hover,
  input[type="reset"]:hover,
  input[type="button"]:hover,
  a.button:focus,
  a.button--secondary:focus,
  button:focus,
  input[type="submit"]:focus,
  input[type="reset"]:focus,
  input[type="button"]:focus {
    border-color: var(--color_text--link-alt);
    background-color: var(--color_text--link-alt);
  }
  
  .button--secondary,
  button[type="reset"],
  input[type="reset"] {
    background-color: var(--color_background--surface);
    color: var(--color_text--link);
    border-color: var(--color_text--link);
  }
  
  a.button--secondary:hover,
  button[type="reset"]:hover,
  input[type="reset"]:hover,
  a.button--secondary:focus,
  button[type="reset"]:focus,
  input[type="reset"]:focus {
    background-color: var(--color_background--surface);
    color: var(--color_text--link-alt);
    border-color: var(--color_text--link-alt);
  }
  
  span.button,
  button[disabled],
  input[type="submit"][disabled],
  input[type="reset"][disabled],
  input[type="button"][disabled] {
    cursor: auto;
    background-color: var(--color_background--chip);
    color: var(--color_text--subtle);
    border-color: var(--color_background--chip);
  }
  
  span.button--secondary,
  input[type="reset"][disabled],
  button[type="reset"][disabled] {
    cursor: auto;
    background-color: var(--color_background--surface);
    color: var(--color_background--chip);
    border-color: var(--color_background--chip);
  }
  
  /* !SECTION Buttons */
  /* !SECTION Forms */
  /* =================================================================
  /* SECTION Layout
  ================================================================= */
  /* ==============================
  /* SECTION Container System
  ** Containers allow for a robust and flexible layout system by
  ** applying the gutter padding and max width to the container itself.
  ** Containers can be nested as needed.
  ============================== */
  
  /* Setup containers */
  
  .container {
    margin-inline: auto;
    padding-inline: var(--space_gutter);
    max-width: var(--width_content);
  }
  
  .container--wide {
    margin-inline: auto;
    padding-inline: var(--space_gutter);
    max-width: var(--width_wide);
  }
  
  .container--full {
    margin-inline: auto;
    padding-inline: var(--space_gutter);
  }
  
  /* Allow nested containers wider than parent */
  
  .container > .container--wide {
    max-width: var(--width_wide);
    margin-inline: calc(
      min(
        calc(100vw - 100%),
        calc(var(--width_wide) - 100%)
      ) / -2
    );
  }
  
  .container > .container--full,
  .container--wide > .container--full {
    max-width: 100vw;
    margin-inline: calc((100vw - 100%) / -2);
  }
  
  /* Remove duplicate gutters from nested containers the same size as parent */
  
  .container > .container,
  .container--wide > .container--wide,
  .container--full > .container--full {
    margin-inline: calc(var(--space_gutter) * -1);
  }
  
  /* Account for containers smaller than parent */
  
  .container--wide > .container,
  .container--full > .container {
    margin-inline: max(
      calc(var(--space_gutter) * -1),
      calc((100% - var(--width_content)) / 2)
    );
  }
  
  .container--full > .container--wide {
    margin-inline: max(
      calc(var(--space_gutter) * -1),
      calc((100% - var(--width_wide)) / 2)
    );
  }
  
  /* !SECTION Containers */
  /* ==============================
  /* SECTION Flow Spacing
  ** Flow spacing is the space between elements in a vertical flow.
  ** The .section class is provided for larger gaps between sections.
  ** Flow spacing can be applied to a individual container using the .layout--flow class. or to the entire document using the .global--flow class. The implementation is different for each method, so consider how you want the spacing to be applied.
  ============================== */
  
  .layout--flow > * + *,
  blockquote > * + *,
  details > * + * {
    margin-block-start: var(--space_flow);
  }
  
  .layout--flow-double > * + * {
    margin-block-start: calc(var(--space_flow) * 2);
  }
  
  .layout--flow-half > * + * {
    margin-block-start: calc(var(--space_flow) / 2);
  }
  
  .layout--flow > * + h1,
  .layout--flow > * + h2,
  .layout--flow > * + h3,
  .layout--flow > * + h4,
  .layout--flow > * + h5,
  .layout--flow > * + h6 {
    margin-block-start: calc(var(--space_flow) * 2);
  }
  
  .layout--flow > h1 + h2,
  .layout--flow > h2 + h3,
  .layout--flow > h3 + h4,
  .layout--flow > h4 + h5,
  .layout--flow > h5 + h6 {
    margin-block-start: calc(var(--space_flow) / 2);
  }
  
  .section {
    margin-block-start: var(--space_section);
  }
  
  /* !SECTION Flow Spacing */
  /* ==============================
  /* SECTION Level
  ** Creates a bar with content vertically aligned on both sides
  ** Good for split navigation bars etc.
  ============================== */
  
  .layout--level {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-content: center;
    gap: var(--space_gutter);
  }
  
  /* !SECTION Level */
  /* ==============================
  /* SECTION Grid
  ** The grid layout creates a responsive grid with a fluid number of columns.
  ** You can define the number of columns to allow as well as the minimum
  ** width of each grid item. Just be aware that if you set the minimum width
  ** too high, the grid may not fit on viewports smaller than the minimum width.
  ============================== */
  
  .layout--grid {
    --grid-column--count: 6;
    --grid-gap--width: var(--space_grid-gap);
    --grid-gap--count: calc(var(--grid-column--count) - 1);
    --grid-gap--total: calc(var(--grid-gap--width) * var(--grid-gap--count));
    --grid-item--min-width: 14rem;
    --grid-item--max-width: calc((100% - var(--grid-gap--total)) / var(--grid-column--count));
  
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(max(var(--grid-item--min-width), var(--grid-item--max-width)), 1fr));
    gap: var(--grid-gap--width);
  }
  
  /* Stabilize height of components that are side by side */
  
  .layout--grid > div > :only-child,
  .layout--grid > li > :only-child {
    display: flex;
    align-items: stretch;
    height: 100%;
  }
  
  .layout--grid > div > :only-child > *,
  .layout--grid > li > :only-child > * {
    flex: 1;
  }
  
  /* !SECTION Grid */
  /* ==============================
  /* SECTION App
  ** The app wrapper ensures the the site footer sticks to the
  ** bottom of the viewport on short pages.
  ** Structure should be as follows:
  ** <div id="app">
  **   <header></header>
  **   <main></main>
  **   <footer></footer>
  ** </div>
  ** No other elements should be present in the app div.
  ============================== */
  
  #app {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    max-width: 100vw;
  }
  
  #app > :nth-child(2) {
    width: 100%;
    flex: 1 0 auto;
    place-content: start center;
  }
  
  /* !SECTION App */
  /* ==============================
  /* SECTION Page Layout
  ** The page layout provides grid areas for a hero, content, and sidebar.
  ** It arranges the grid areas responsively based on the presence of a sidebar.
  ** Inside the <main class="page"> tag, the structure should follow:
  ** <div class="page_header"> (optional, may use header element)
  ** <div class="page_content"> (may use article element)
  ** <div class="page_sidebar"> (optional, may use aside or nav elements)
  ============================== */
  
  .page {
    display: grid;
    grid-template-areas:
      "header"
      "content"
      "sidebar";
    grid-template-columns: 1fr;
    column-gap: var(--space_layout-gap);
    max-width: var(--width_wide);
    margin-inline: auto;
  }
  
  /* Fix for x overflow elements breaking layout */
  
  .page > * {
    min-width: 0;
  }
  
  /* Page areas */
  
  .page__header {
    grid-area: header;
  }
  
  .page__content {
    grid-area: content;
    margin-block: var(--space_section);
  }
  
  .page__sidebar {
    grid-area: sidebar;
    margin-block-end: var(--space_section);
  }
  
  /* Layout fixes */
  
  .page:has(.page__sidebar) .container > .container--wide,
  .page:has(.page__sidebar) .container > .container--full,
  .page:has(.page__sidebar) .container--wide > .container,
  .page:has(.page__sidebar) .container--wide > .container--full,
  .page:has(.page__sidebar) .container--full > .container,
  .page:has(.page__sidebar) .container--full > .container--wide {
    margin-inline: calc(var(--space_gutter) * -1);
  }
  
  .page:not(:has(.page__sidebar)) .width--full,
  .page:not(:has(.page__sidebar)) .container--full {
    width: 100vw;
    max-width: 100vw;
    margin-inline: calc((100vw - 100%) / -2);
  }
  
  /* Enable sidebar */
  
  @media (min-width: 60rem) {
    .page:has(.page__sidebar) {
      grid-template-areas:
        "header header"
        "sidebar content";
      grid-template-columns:
        minmax(calc(25% - (var(--space_layout-gap) / 2)), var(--width_sidebar))
        min(calc(75% - (var(--space_layout-gap) / 2)), var(--width_content));
    }
    .page__sidebar {
      margin-block-start: var(--space_section);
    }
  }

p {
    width: 30em;
    padding-bottom: 1em;
}

body {
    background-color: #F2F3F4;
}
  
  /* !SECTION Page Layout */
  /* !SECTION Layout */