/**
 * @file
 * Global rules
 *
 * Theme global rules.
 */

* {
  box-sizing: border-box;
}
html {
  height: 100%;
  font-size: 15px;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  line-height: 1.5;
}
html, body {
  position: relative;
  font-family: Montserrat, sans-serif;
  color: var(--color-primary--1);
}
body {
  overflow-x: hidden;
}
@media (min-width: 800px) {
  html {
    font-size: 16px;
  }
}

/**
 * Image
 */

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


/**
 * Text
 */

p, h1, h2, h3, h4 {
  position: relative;
}
h1, h2, h3 {
  font-family: 'DepotNew', sans-serif;
  font-weight: 700;
  margin: 1rem 0;
}
h4 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
}
h1 {
  font-size: var(--heading-size-extra-large);
}
h2 {
  font-size: var(--heading-size-large);
}
h3 {
  font-size: var(--heading-size);
}
h4 {
  font-size: var(--heading-size-small);
}
p {
  font-size: var(--paragraph-size);
}
::selection {
  background-color: var(--color-primary--1);
  color: var(--color-neutral);
}


/**
 * Links
 */

a {
  color: var(--color-primary--2);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
a:focus, button:focus, div:focus, input:focus, textarea:focus, select:focus {
  outline: 2px solid var(--color-primary--2);
}