:root {
  --site-background-color: #111;
  --site-text-color: #ddd;
  --site-accent-color: rgb(192, 0, 0);

  --site-max-width: 99.2rem;
  --standard-spacing: 6rem;
  --round: 0.5rem;
}

@font-face {
  font-family: sb;
  font-weight: normal;
  font-display: swap;
  src: url("../fonts/sb-light.woff") format("woff");
}

@font-face {
  font-family: sb;
  font-weight: bold;
  font-display: swap;
  src: url("../fonts/sb-bold.woff") format("woff");
}

@layer reset, defaults, layout, components, utilities, overrides;

@layer reset {
  :where(*, *::before, *::after) {
    box-sizing: border-box;
  }

  :where(a) {
    color: inherit;
  }

  :where(img, iframe, button, svg) {
    display: block;
  }

  :where(img) {
    max-width: 100%;
    height: auto;
  }

  :where(figure) {
    margin: 0;
    padding: 0;
  }

  :where(button) {
    font-family: inherit;
    min-height: 2.4rem;
    min-width: 2.4rem;
  }

  :where(h1, h2, h3, h4, h5, h6) {
    font-weight: inherit;
    font-size: inherit;
    margin-block: 0;
  }

  :where(h1, h2, h3, h4, h5, h6):has(+ :where(p)) {
    margin-block-end: 0;
  }

  :where(p) {
    margin-block-start: 0;
  }
}

@layer defaults {
  ::selection {
    color: var(--site-background-color);
    background-color: var(--site-text-color);
  }

  *:focus-visible {
    outline: 5px dotted var(--site-accent-color);
    outline-offset: 8px;
  }

  html {
    font-size: 10px;
    font-family: sb, system-ui, sans-serif;
    background-color: var(--site-background-color);
    overscroll-behavior: none;
  }

  body {
    font-size: 2rem;
    color: var(--site-text-color);
    margin: 0;
    width: 100vw;
    overflow-x: hidden;
  }

  :where(main) {
    padding-inline: 0.5;
    margin-block-end: 20vh;
  }

  :where(h1, h2, h3, h4, h5, h6) {
    font-weight: bold;
    text-wrap: balance;
    line-height: 1;
  }

  :where(section):has(> :where(h2, h3, h4, h5, h6)) {
    margin-block-start: 5rem;

    > :where(h2, h3, h4, h5, h6) {
      font-size: 3rem;
      text-align: center;
      margin-block-end: 1.2rem;
    }
  }

  :where(h1) {
    text-align: center;
    font-size: 3rem;
  }

  :is(ul[class], ul[id]) {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  :where(ul) {
    padding-inline-start: 2rem;
  }

  :where(main > article) {
    margin: 0 auto;
    max-width: 58rem;
  }

  :where(p) {
    text-wrap: pretty;
  }

  :where(main > article p) {
    text-align: justify;
    font-size: 2.2rem;
    line-height: 1.25;
  }

  .page-width {
    padding-inline: 0.5rem;
    margin-inline: auto;
    max-width: var(--site-max-width);

    @media (min-width: 992px) {
      padding-inline: 0;
    }
  }

  :where(button) {
    padding-inline: 2rem;
    padding-block: 1rem;
    border: none;
    border-radius: var(--round);
    font-size: 2.5rem;
    font-weight: bold;
    color: var(--site-background-color);
    background-color: #fff;
    cursor: pointer;
  }

  :where(button[disabled]) {
    opacity: 0.35;
    cursor: default;
  }

  :where(footer) {
    height: 20rem;
  }
}

@layer components {
  sb-hero {
    height: 50rem;
  }

  #sponsor-section {
    max-width: 80rem;
    margin-inline: auto;

    ul {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      column-gap: 2rem;
      row-gap: 1rem;
      list-style: none;
      padding-inline: 1rem;

      li {
        white-space: nowrap;
        font-size: 1.75rem;
      }
    }
  }
}

@layer utilities {
  .flex {
    display: flex;
  }

  .justify-content-center {
    justify-content: center;
  }

  .align-items-center {
    align-items: center;
  }

  .jake-blaze-filter {
    filter: blur(5px);
  }
}

@layer overrides {
  .sr-only {
    display: block;
    width: 0;
    height: 0;
    white-space: nowrap;
    position: absolute;
    overflow: hidden;
  }
}

.hide {
  display: none;
}

/* Media Breakpoints. Mobile first. */

@media (min-width: 576px) {
}

@media (min-width: 768px) {
}

@media (min-width: 992px) {
  /* This is maximum content width */
  :where(main) {
    padding-inline: 0;
  }
}

@media (min-width: 1200px) {
}

@media (min-width: 1440px) {
}