:root {
  font-family: Rubik, sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 27px;
  scrollbar-width: thin;
  scroll-snap-type: y proximity;
  -webkit-font-smoothing: antialiased;
  scroll-behavior: smooth;
  background-color: var(--paper);
  color: var(--pen);

  --huge: 400 71px/87px Rubik, sans-serif;
  --trenta: 300 48px/58px Rubik, sans-serif;
  --venti: 600 40px/1.21 Rubik, sans-serif;
  --grande: 400 35px/46px Rubik, sans-serif;
  --tall: 300 22px/33px Rubik, sans-serif;
  --short: 400 20px/28px Rubik, sans-serif;
  --demi: 400 16px/24px Rubik, sans-serif;
  --mini: 400 14px/21px Rubik, sans-serif;

  --paper: white;
  --pen: black;
  --primary: #003066;
  --secondary: #0EAFDB;
  --background: #F5F5F5;

  --max-width: 1440px;
  --xs-width: 856px;
  --offset-x: 80px;
  --offset-y: 80px;

  @media (max-width: 768px) {
    --offset-x: 60px;
    --offset-y: 30px;
  }
}

h1 {
  font: var(--huge);
  @media (max-width: 1024px) {
    font: var(--trenta);
    font-weight: 400;
  }
}

h2 {
  font: var(--trenta);
  @media (max-width: 767px) {
    font: var(--grande);
  }
}

h3 {
  font: var(--grande);
}

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