@font-face {
  font-family: "SquadaOne";
  src: url("/fonts/SquadaOne-Regular.woff2") format("woff2");
  font-display: swap;
}

@font-face {
  font-family: 'Oswald';
  src: url('/fonts/Oswald-VariableFont.woff2');
}

:root {
  --color-white: #fcfcfc;
  --color-black: #212529;
  --color-black-hover: #000;

  --color-primary-050: #e7e9ec;
  --color-primary-100: #ced3d8;
  --color-primary-200: #9da8b1;
  --color-primary-300: #6c7c8a;
  --color-primary-400: #3b5163;
  --color-primary: #0a253c;
  --color-primary-600: #081e30;
  --color-primary-700: #061624;
  --color-primary-800: #040f18;
  --color-primary-900: #02070c;

  --color-grey-050: #f6f6f6;
  --color-grey-100: #ededed;
  --color-grey-200: #dadada;
  --color-grey-300: #c8c8c8;
  --color-grey-400: #b5b5b5;
  --color-grey-500: #a3a3a3;
  --color-grey-600: #828282;
  --color-grey-700: #626262;
  --color-grey-800: #414141;
  --color-grey-900: #212121;

  --color-link: #1338be;
  --color-link-hover: #08164c;

  --content-max-width: 1200px;
  --content-max-width-narrow: 800px;
  --content-max-width-form: 600px;

  --font-title: "SquadaOne",sans-serif;
  --font-paragraph: "Oswald",sans-serif;
}

*,
*:before,
*:after {
  box-sizing: border-box;
  outline: none;
}

html {
  font-family: var(--font-paragraph), sans-serif;
  font-size: 16px;
}

.home {
  display: flex;
  flex-flow: column nowrap;
  justify-content: flex-start;
  align-items: center;
  text-align: center;
  width: 100%;
  min-width: 250px;
  height: 100vh;
  padding: 8rem 0 4rem;
  margin: 0 auto;
  background-color: var(--color-primary);
  color: var(--color-white);
  line-height: 1.25;
}

.home svg {
  width: 75px;
  height: auto;
  vertical-align: middle;
  margin: 0;
  fill: var(--color-white);
  stroke: var(--color-white);
  flex-shrink: 0;
  flex-grow: 0;
  line-height: 1;
}

.home h1 {
  font-family: var(--font-title), sans-serif;
  text-transform: uppercase;
  font-size: 5rem;
  margin: 0.5rem 0 0;
  line-height: 1;
}

.home .soon {
  margin-top: 10rem;
  font-size: 1rem;
  font-weight: 300;
}

@media screen and (min-width: 800px) {
  .home svg {
    width: 100px;
  }

  .home h1 {
    font-size: 8rem;
  }

  .home .subtitle {
    font-size: 2.5rem;
  }

  .home .soon {
    font-size: 1.5rem;
  }
}