@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: #0a253c;

  --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);
  font-size: 16px;
}

body {
  line-height: 1.25;
  margin: 0 auto;
  color: var(--color-white);
  width: 100%;
  min-width: 250px;
  background-color: var(--color-primary);
}

main {
  display: flex;
  flex-flow: column nowrap;
  justify-content: flex-start;
  align-items: center;
  max-width: 800px;
  height: 100vh;
  padding: 8rem 0 4rem;
  margin: 0 auto;
  text-align: center;
}

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;
}

h1 {
  font-family: var(--font-title);
  text-transform: uppercase;
  font-size: 5rem;
  margin: 0.5rem 0 0;
}

.subtitle {
  font-size: 1.8rem;
}

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

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

  h1 {
    font-size: 8rem;
  }

  .subtitle {
    font-size: 2.5rem;
  }

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