@layer layouts {
  navigation-menu {
    --text-color: white;
    --signup-button-color: white;
    --signup-button-text-color: black;
    --signup-button-hover-color: rgb(255 255 255 / 90%);
  }

  #hero {
    color: white;
    background: linear-gradient(210deg, #13244b, #0c152b);
    h1 {
      margin: 1.5em 0 0;
      font-size: clamp(2rem, 4vw + .8rem, 4rem);
    }
  }

  #content {
    padding-inline: max((100% - 1000px) / 2 + 2rem, 2rem);
    h2 { font-size: clamp(1.5rem, 2vw + .9rem, 2.5rem); }
    h3 { font-size: clamp(1.2rem, 1.6vw + .7rem, 2rem); }
    h4 { font-size: clamp(1.1rem, 1vw + .8rem, 1.6rem); }
    h2, h3, h4, h5 {
      margin: 2em 0 .5em;
    }
    a {
      color: #1e6bff;
      text-decoration: none;
      &:hover { text-decoration: underline; }
    }
    .table-scroller {
      width: 100%;
      overflow-x: auto;
    }
    table { border-collapse: collapse; }
    th, td {
      padding: 1rem;
      border: 1px solid #dae0e3;
      vertical-align: top;
      text-align: left;
    }
    th { background-color: #f7f9fa; }
  }
}