:root {
  --color-olive-gray: #919E92;
  --color-brown: #767660;
  --color-brown-2: #C2C2A9;
  --color-green-acid: #D5EF8A;
  --color-green-pale: #D5FFC1;
  --color-green-olive: #A5B479;
  --color-green-olive-2: #BFCD97;
  --color-green-dark-1: #3C4C48;
  --color-green-dark-2: #405A53;
  --color-yellow: #EFE6B1;
  --color-peach: #F2A594;
  --color-peach-2: #FFD3A3;
  --color-navy: #222D40;
  --color-gray: #F8F8F8;
  --color-gray-0: #BDBDBD;
  --color-gray-1: #999B93;
  --color-gray-2: #919E92;
  --color-blue-1: #B0E3E3;
  --color-blue-2: #57868E;
  --color-blue-3: #224251;
}

@font-face {
  font-family: 'PolySans';
  src: url('../assets/fonts/PolySans-Neutral.woff2') format('woff2');
  font-style: normal;
  font-weight: normal;
}

@font-face {
  font-family: 'PolySans';
  src: url('../assets/fonts/PolySans-Median.woff2') format('woff2');
  font-style: normal;
  font-weight: 500; /* Medium weight */
}

@font-face {
  font-family: 'PolySans';
  src: url('../assets/fonts/PolySans-Slim.woff2') format('woff2');
  font-style: normal;
  font-weight: 300;
}

@font-face {
  font-family: 'SelfModern';
  src: url('../assets/fonts/self-modern_semibold_web.woff2') format('woff2');
  font-style: normal;
  font-weight: 600;
}

button {
  background-color: initial;
  border: none;
  color: unset;
  text-align: left;
  padding: 0;
  font: unset;
}
body, html {
  margin: 0;
  font-family: 'PolySans';
}
html * {
  box-sizing: border-box;
  margin: 0;
}

body.locked {
  overflow: hidden;
}

a, button, input[type="submit"] {
  cursor: pointer;
  transition: opacity 0.2s ease-in-out;
}
a:hover, button:hover {
  opacity: 0.6;
}

.bold {
  font-weight: 800;
}

h1 {
  font-size: 64px;
}


@media screen and (min-width: 768px) {
  h1 {
    font-size: 120px;
  }
}

@media screen and (min-width: 1024px) {
  h1 {
    font-size: 160px;
  }
}

h2, h3 {
  font-weight: normal;
}

p {
  font-size: 16px;
  text-wrap: pretty;
}

@media screen and (min-width: 768px) {
  p {
    font-size: 18px;
    font-weight: 300;
  }
}

h2 {
  font-size: 28px;
  padding: 32px 16px;
}

@media screen and (min-width: 768px) {
  h2 {
    font-size: 48px;
    padding: 136px 24px 32px;
  }
}

h3 {
  font-size: 20px;
  padding: 16px 0 8px;
}

@media screen and (min-width: 768px) {
  h3 {
    font-size: 28px;
    padding: 32px 0 12px;
  }
}

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

.font-selfmodern {
  font-family: 'SelfModern';
  font-weight: 600;
}

input {
  transition: opacity 0.4s ease;
}

input:disabled {
  opacity: 0.6;
}