:root {
  --page-padding: 0.625rem; /* 10px */
  --grid-gutter: 0.625rem; /* 10px */
  --border-radius: 3px;
  --header-height: 3rem;

  --font-size-xxs: 0.625rem; /* 10px */
  --font-size-xs: 0.875rem; /* 14px */
  --font-size-s: 1.125rem; /* 18px */
  --font-size-m: 1.75rem; /* 28px */
  --font-size-l: 2.5rem; /* 40px */
  --font-size-xl: 3.75rem; /* 60px */
  --font-size-xxl: 5rem; /* 80px */

  --font-family-default: "Monument Grotesk", Arial, Helvetica, sans-serif;
  --font-family-title: "Gravity", Arial, Helvetica, sans-serif;

  --color-black: #000;
  --color-white: #fff;
  --color-gray: #e7e8eb;
  --color-gray-dark: #1c1c1c;
  --color-accent: #001eff;

  --bezier-ease: cubic-bezier(0.28, 0.76, 0.44, 0.96);
}

@media screen and (min-width: 700px) {
  :root {
    --header-height: 5.5rem;
    --font-size-m: 2.1875rem; /* 35px */
  }
}

@media screen and (min-width: 1024px) {
  :root {
  }
}

@media screen and (min-width: 1920px) {
  :root {
    --font-size-s: 1.25rem; /* 18px */
    --font-size-m: 3rem; /* 28px */
    --font-size-l: 3rem; /* 40px */
    --font-size-xxl: 8rem; /* 80px */
  }
}

::-moz-selection {
  /* Code for Firefox */
  color: var(--color-white);
  background: var(--color-accent);
}

::selection {
  color: var(--color-white);
  background: var(--color-accent);
}

body {
  font-family: var(--font-family-default);
  font-size: var(--font-size-s);
  line-height: 1.1;
  color: var(--color-black);
  background-color: var(--color-gray);
  min-height: var(--vh-100);
  display: flex;
  flex-direction: column;
}

.error {
  padding: var(--page-padding);
  border: 10px solid red;
  color: red;
  font-size: var(--font-size-l);
  font-weight: bold;
}

.main {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.container {
  /*max-width: 1920px;*/
  margin: 0 auto;
}

.will-appear {
  opacity: 0;
  transition: opacity 100ms ease, transform 100ms ease;
}

.will-appear--move {
  transform: translate3d(0, 20px, 0);
}

.did-appear {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition: opacity 800ms ease, transform 800ms ease;
}

@media screen and (min-width: 700px) {
  .will-appear--move {
    transform: translate3d(0, 40px, 0);
  }

  .did-appear {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

/* Link Underline Hover */

.link-hover {
  position: relative;

  &::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 0;
    border-bottom: 1px solid;
    transition: width 300ms ease;
  }

  @media (hover: hover) {
    &:hover::after {
      width: 100%;
    }
  }
}

.link-hover--underline {
  &::after {
    width: 100%;
  }

  @media (hover: hover) {
    &:hover::after {
      width: 0;
    }
  }
}

/* Crosses */

.cross {
  width: var(--page-padding);
  height: var(--page-padding);
  display: block;
  background-image: url(/images/cross.svg);
  background-size: cover;
  position: absolute;
}

.cross--white {
  background-image: url(/images/cross-white.svg);
}

.cross--tl {
  top: 0;
  left: 0;
}

.cross--tr {
  top: 0;
  right: 0;
}

.cross--bl {
  bottom: 0;
  left: 0;
}

.cross--br {
  bottom: 0;
  right: 0;
}

/* Scrollbar */

.scrolling-container {
  height: var(--vh-100);
  width: 100vw;
  overflow: hidden;
  position: absolute !important;
}

.scrollbar-track {
  background-color: transparent !important;
}

.state--modal-open .scrollbar-track {
  display: none !important;
  pointer-events: none !important;
}

.scrollbar-thumb {
  left: -2px !important;
}