global.css

*, *:before, *:after {
  box-sizing: inherit;
}

:root {
  --blue-0: hsla(215, 64%, 35%, 1);
  --blue-1: hsla(215, 64%, 50%, 1);
  --blue-2: hsla(215, 64%, 65%, 1);
  --blue-3: hsla(215, 64%, 80%, 1);
  --green-0: hsla(180, 100%, 20%, 1);
  --green-1: hsla(180, 100%, 30%, 1);
  --background-1: hsla(210, 38%, 90%, 1);
  --background-2: hsla(210, 38%, 95%, 1);
  --thickness: 8px;
  --thickness-2: 4px;
  --dim-hue: 265;
  --half-dim-hue: 255;
  --min-hue: 225;
  --dom-hue: 10;
  --maj-hue: 23;
  --aug-hue: 39;
  --keep-it-100: 100%;
  --dim: hsla(var(--dim-hue), var(--keep-it-100), 50%, 1);
  --half-dim: hsla(var(--half-dim-hue), var(--keep-it-100), 50%, 1);
  --min: hsla(var(--min-hue), var(--keep-it-100), 50%, 1);
  --dom: hsla(var(--dom-hue), var(--keep-it-100), 50%, 1);
  --maj: hsla(var(--maj-hue), var(--keep-it-100), 45%, 1);
  --aug: hsla(var(--aug-hue), var(--keep-it-100), 45%, 1);
  --heading-font: 'montserrat', sans-serif;
  --text-font: 'open sans', sans-serif;
}

html, body {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  width: 100vw;
  height: 100vh;
  height: calc(var(--vh, 1vh) * 100);
  /* height: calc(var(--vh) * 100); */
  overflow: hidden;
  overscroll-behavior: none;
  color: black;
  /* background: var(--background-1); */
  background: white;
  font-family: var(--text-font);
}

body {
	display: grid;
	grid-template-columns: 1fr;
  grid-template-rows: 1fr;
}

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

button {
  flex: 0 1 auto;
  margin-bottom: 2rem;
  padding: 16px 24px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background-color: #2B6BC2;
  box-shadow: 0px 0px 16px 0px rgba(0,0,0,0.1);
  font-family: var(--fonts);
  font-size: calc(10px + (14 - 10) * ((100vw - 300px) / (1600 - 300)));
  line-height: 1;
  font-weight: 400;
  color: #fff;
  text-transform: uppercase;
  transition: background-color 100ms ease, color 100ms ease;
}