: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: #000;
  --paper: white;

  /* branding colors and their opposites */
  --primary: #1F6DFF;
  --secondary: #185365;

  --orange: #E5695B;
  --lila: #93A2C9;
  --pink: #C8AAC8;
  --brown: #ACA48A;

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

  /* layout */
  --max-width: 100rem;
}

@media (min-width: 651px) {
  :root {
    /* fonts */
    --trenta: 700 4.375rem/4.6875rem Brandon, iconfont, sans-serif;
    --venti: 700 2.5rem/2.8125rem Brandon, iconfont sans-serif;
    --grande: 700 1.5625rem/1.875rem Brandon, iconfont sans-serif;
    --tall: 400 1rem/1.1875rem Brandon, iconfont sans-serif;
    --petit: 400 1rem/1.375rem Brandon, iconfont sans-serif;
    --demi: 700 .875rem/1.1875rem Brandon, iconfont sans-serif;

    /* gaps */
    --g-blue: 7.5rem;
    --g-pink: 5rem;
    --g-yellow: 3.75rem;
    --g-red: 1.875rem;
    --g-green: .9375rem;
    
    --g-side: 6.25rem;
  }
}

@media (max-width: 1024px) {
  :root {
    /* fonts */
    --trenta: 700 3.125rem/3.75rem Brandon, iconfont, sans-serif;
    --venti: 700 1.5625rem/1.875rem Brandon, iconfont sans-serif;
    --grande: 700 1.25rem/1.5rem Brandon, iconfont sans-serif;
    --tall: 400 1rem/1.1875rem Brandon, iconfont sans-serif;
    --petit: 400 1rem/1.375rem Brandon, iconfont sans-serif;
    --demi: 700 .875rem/1.1875rem Brandon, iconfont sans-serif;

    /* gaps */
    --g-blue: 4.6875rem;
    --g-pink: 3.125rem;
    --g-yellow: 2.3125rem;
    --g-red: 1.25rem;
    --g-green: .625rem;

    --g-side: 1.25rem;
  }
}

body {
  font: var(--petit) !important;
  color: var(--pen) !important;
  background-color: var(--paper) !important;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

h1 {
  font: var(--trenta) !important;
}

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

h3 {
  font: var(--grande) !important
}

strong {
  font-family: Brandon, iconfont, sans-serif !important;
  font-size: 100% !important;
  line-height: 100% !important;
  font-weight: 700 !important;
}

em {
  font-style: italic !important;
}

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