@font-face {
  font-family: OpenSans;
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(open-sans/300.woff2) format('woff2');
}

@font-face {
  font-family: OpenSans;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(open-sans/400.woff2) format('woff2');
}

@font-face {
  font-family: OpenSans;
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(open-sans/600.woff2) format('woff2');
}

:root {
  font: 400 15px/1.6 Loomicons, OpenSans, basic, sans-serif;
  
  --trenta: 400 36px/1.29 Loomicons, OpenSans, basic, sans-serif;
  --venti: 400 26px/1.3 Loomicons, OpenSans, basic, sans-serif;
  --grande: 400 24px/1.33 Loomicons, OpenSans, basic, sans-serif;
  --tall: 400 20px/1.5 Loomicons, OpenSans, basic, sans-serif;
  --short: 400 18px/1.2 Loomicons, OpenSans, basic, sans-serif;
  --demi: 400 15px/1.6 Loomicons, OpenSans, basic, sans-serif;
  --mini: 400 12px/1.2 Loomicons, OpenSans, basic, sans-serif;
}

a {
  text-decoration: none;
}

h1 {
  font: var(--venti);
  margin: 0;
  text-transform: uppercase;
}

h2 {
  font: var(--grande);
  margin: 0;
  text-transform: uppercase;
}

h3 {
  font: var(--tall);
  margin: 0;
  text-transform: uppercase;
}

.title {
  margin: var(--comp-space);
}