:root {
  --paper: #ffffff;
  --pen: #000000;
  --teal: #195365;
  --slate: #6896A8;
  --pale-slate: #F4F9FB;
  --subtle-slate: #F0FAFE;
  --lime: #AFD700;
  --subtle-lime: #E6F3AE;
  --pale-lime: #F7FBE3;
  --subtle-purple: #EBD9FC;

  --big: 400 3.75rem/1.06 'Inter', sans-serif; /* 60px */
  --huge: 400 3.313rem/1.17 'Inter', sans-serif; /* 53px */
  --venti: 400 1.875rem/1.19 'Inter', sans-serif; /* 30px */
  --grande: 400 1.375rem/1.25 'Inter', sans-serif; /* 22px */
  --common: 400 1rem/1.5 'Inter', sans-serif; /* 16px */
  --petite: 400 0.885rem/1.55 'Inter', sans-serif; /* 14px */
  --tiny: 400 0.813rem/1.308 'Inter', sans-serif; /* 13px */
  --bit: 600 0.688rem/1.67 'Inter', sans-serif; /* 11px */

  --xl-width: 1440px;
  --xs-width: 860px;

  --xl-gap-x: 70px;
  --xl-gap-y: 70px;
  --gap: 30px;
  --xs-gap: 15px;  

  @media (max-width: 768px) {
    --huge: 400 2rem/1.19 'Inter', sans-serif; /* 32px */

    --xl-gap-x: 15px;
  }

}

body {
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  background-color: white;
}

main {
  padding: var(--heady-height) 0 0 0;
}

img {
  max-width: 100%;
  height: auto;
}

h1 {
  font: var(--big);
}

h2 {
  font: var(--venti);
  color: var(--teal);
  margin: 0;
  @media (max-width: 768px) {
    font-size: 1.475rem;
  }
}

h3 {
  font-size: 1.625rem;
  line-height: 1.462;
  color: var(--teal);
}

h4 {
  font: var(--grande);
  color: var(--teal);
}

a {
  display: inline-block;
}

a:hover {
  color: inherit;
  text-decoration: none;
}

p,
ul {
  margin: 1rem 0;
}

.noscroll {
  overflow-y: hidden;
  position: relative;
}

.noscroll::after {
  content: '';
  display: block;
  position: absolute;
  inset: 0;
  width: 100vw;
  height: 100vh;
  transition: .25s ease-in-out;
  background-color: rgba(17,36,57,.5);
  z-index: 0;
}