:root {
  font-family: Brandon, iconfont, sans-serif;
  background: var(--paper);
  color: var(--pen);
  scrollbar-width: thin;

  /* basic colors for text color and background colors. You can flip these to get a dark theme. */
  --pen: #195365;
  --paper: white;

  /* branding colors and their opposites */
  --primary: #C3DA46;
  --secondary: #A96BF1;
  --neutral: #6896A8;
  --background: #EAE9E3;
  --light-purple: #E8D4FF;
  --light-green: #E1F4AD;

  /* Signal colors: that communicate a situation */
  --danger: darkred;
  --warning: orange;
  --disabled: #7A7A7A;
  --success: lightgreen;
  --info: lightblue;

  /* fonts */
  --trenta: 700 42px/1.40 Brandon, iconfont, sans-serif;
  --venti: 700 32px/1.31 Brandon, iconfont sans-serif;
  --grande: 700 26px/1.38 Brandon, iconfont sans-serif;
  --tall: 400 22px/1.54 Brandon, iconfont sans-serif;
  --petit: 400 20px/1.45 Brandon, iconfont sans-serif;
  --short: 400 18px/auto Brandon, iconfont sans-serif;
  --demi: 700 14px/auto Brandon, iconfont sans-serif;

  /* layout */
  --max-width: 1440px;
}

body {
  font-family: Brandon, iconfont, sans-serif !important;
  color: var(--pen) !important;
  background-color: var(--paper) !important;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

.no-scroll {
  overflow-y: hidden;
}

a {
  display: inline-block;
  transition: .3s ease-in-out;
}

img {
  display: block;
}

/* h1 {
  font-weight: 700 !important;
  line-height: 1.35 !important;
  text-transform: uppercase;
} */

h2 {
  font: var(--venti)!important;
  text-transform: uppercase;
}

:focus-visible {
  outline: 2px solid currentColor !important;
  outline-offset: 1px !important;
}

.sr-only {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

@media (min-width: 651px) {
  :root {
    --offset-x: 80px;
    --offset-y: 80px;
    --gutter: 115px;
  }

  /* h1 {
    font-size: 51px !important;
  } */
}

@media (max-width: 650px) {
  :root {
    --offset-x: 20px;
    --offset-y: 60px;
    --gutter: 40px;
  }

  /* h1 {
    font-size: 34px !important;
  } */

  h2 {
    font-size: 28px !important;
  }
}

strong {
  font-weight: 500 !important;
}

em {
  font-style: italic !important;
}