/* reset */
/* strips most styling from many elements to normalize behaviour */
@layer reset {
    
  :root {
    interpolate-size: allow-keywords;
  }

  *,
  *::before,
  *::after {
      /* Box sizing rules */
      box-sizing: border-box;
      /* remove margin/padding */
      margin:0;
      padding:0;
      /* child elements should copy parent's font choices */
      font: inherit;
  }

  html {
    /* Prevent font size inflation */
    -moz-text-size-adjust: none;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
    /* prevent layout shift caused by scrollbar */
    scrollbar-gutter: stable;
  }

  /* Set core body defaults */
  body {
    /* min-height: 100vh; */
    line-height: 1.5;
    /* -webkit-font-smoothing: antialiased; */
    width:100%;
  }


  :is(ul, ol) {
    /* list-style: none; */
  }


  /* Set shorter line heights on headings and interactive elements */
  h1, h2, h3, h4, h5, h6, button, input, label {
    line-height: 1.1;
  }

  /* Balance text wrapping on headings */
  h1, h2, h3, h4, h5, h6 {
    /* text-wrap: balance; */
    text-wrap: pretty;
  }

  /* Make images easier to work with */
  img, picture, video, canvas, svg {
    max-width: 100%;
    display: block;
    height: auto;
  }

  /* force SVGs to be as wide as possible */
  img[src$='.svg'], svg {
    width: 100%;
  }

  /* image alt text styling */
  img {
    font-style: italic;
    font-size: 1rem;
    line-height: 1.1;
  }


  /* Make sure textareas without a rows attribute are not tiny */
  textarea:not([rows]) {
    min-height: 10em;
  }

  /* Anything that has been anchored to should have extra scroll margin */
  :target {
    scroll-margin-block: 5ex;
  }

  button {
    cursor: pointer;
  }

  html{
    /* smooth scrolling */
    scroll-behavior: smooth;
    /* compensate for fixed top navigation */
    /* scroll-padding-top: 100px; */
  }

  table {
    border-spacing: 0;
    border-collapse: collapse;
  }

  strong {
    font-weight: bold;
  }

  em {
    font-style: italic;
  }

  p {
    text-wrap: pretty;
  }

  small {
    font-size: 0.8rem;
  }

  dialog {
    /* dialog uses margin to self center */
    margin: auto;
  }





  /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */


  h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
    font-family: "Gabarito", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    line-height: 1.1;
  }
  h1, .h1 { font-size: 2.5rem; }
  h2, .h2 { font-size: 2rem; font-weight: 500; }
  h3, .h3 { font-size: 1.5rem; }
  h4, .h4 { font-size: 1.25rem; font-weight: 500; }
  h5, .h5 { font-size: 1rem; font-weight: 500; }
  h6, .h6 { font-size: 1rem; font-weight: bold; }

  /* larger headings on desktop */
  @media (min-width: 50rem){
    h1, .h1 { font-size: 3.5rem; }
    h2, .h2 { font-size: 2.75rem; }
    h3, .h3 { font-size: 2.0rem; }
    h4, .h4 { font-size: 1.75rem; }
    h5, .h5 { font-size: 1.5rem; }
    h6, .h6 { font-size: 1.125rem; }
  }


  a {
    color: var(--link-color);
    text-decoration: none;
  }

  a:hover, a:focus-visible {
    color: var(--link-focus-color);
    text-decoration: underline;
  }

  a:active {
    color: var(--link-active-color);
  }

  a.accessible {
    color: #999;
    text-decoration: none;
    font-size: 0.8rem;
  }

}