:root {
  --black: #0B0E0E;
  --white: #FBFFFF;
  --teal: #13a2a9;
  --gray: #202626;
  --whiteteal: #b4e9ec;

  --ts-huge: 96px;
  --ts-big: 56px;
  --ts-large: 48px;
  --ts-medium: 32px;
  --ts-em: 24px;
  --ts-regular: 14px;
  --ts-small: 12px;

  --tw-normal: normal;
  --tw-bold: 600;
}



@font-face {
    font-family: 'Avenir Next';
    src: local('Avenir Next Demi Bold'), local('AvenirNext-DemiBold'),
        url('/fonts/an-DemiBold.woff2') format('woff2'),
        url('/fonts/an-DemiBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Avenir Next';
    src: local('Avenir Next Regular'), local('AvenirNext-Regular'),
        url('/fonts/an-Regular.woff2') format('woff2'),
        url('/fonts/an-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}



html {
  background-color: var(--black);
  color: var(--white);
}
html, body {
  padding: 0;
  margin: 0;
}
body {
  font-family: 'Avenir Next', 'Arial', sans-serif;
  font-weight: var(--tw-normal);
  font-size: 16px;
}
a, a:visited {
  color: var(--whiteteal);
}
#alley {
  margin: 2em auto 4em auto;
  width: 48%;
}
#alley ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
#alley ul li {
  color: var(--whiteteal);
}
#alley ul.il li {
  display: inline;
}

h1, h2, .h2, h3, .h3 {
  margin: 1.5em 0 .5em 0;
  padding: 0;
  font-weight: var(--tw-bold);
  letter-spacing: -0.016em;
}
h1 {
  font-size: var(--ts-medium);
  line-height: 1;
  letter-spacing: -0.016em;
}
h3, .h3 {
  line-height: normal;
}

@media (min-width: 300px) {
  #alley {
    width: 84%;
    margin-top: 0;
  }

  h1 {
    font-size: var(--ts-large);
  }
  h2, .h2 {
    font-size: var(--ts-em);
  }
  h3, .h3 {
    font-size: var(--ts-regular);
  }
}
@media (min-width: 1000px) {
  #alley {
    width: 76%;
  }

  h1 {
    font-size: var(--ts-big);
  }
  h2, .h2 {
    font-size: var(--ts-large);
  }
  h3, .h3 {
    font-size: var(--ts-medium);
  }
}
@media (min-width: 1400px) {
  #alley {
    width: 60%;
  }

  h1 {
    font-size: var(--ts-huge);
  }
  h2, .h2 {
    font-size: var(--ts-big);
  }
  h3, .h3 {
    font-size: var(--ts-large);
  }
}