@font-face {
  font-family: "Athletics";
  src: url("./fonts/Athletics-Medium.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: optional;
}

/*---------- CSS variables  ----------*/

:root {
  --body-font: "Space Mono", monospace;
  --primary: #6c4aa3;
  --secondary: #1eff96;
  --white: #ffffff;
  --light: #ddb8fc;
}

/*----------  Global (Based on Andy Bells reset)  ----------*/

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

* {
  margin: 0;
  padding: 0;
  font: inherit;
}

ul,
ol {
  list-style: none;
}

/* Set core root defaults */
html:focus-within {
  scroll-behavior: smooth;
}

body {
  height: 100%;
  min-height: 100vh;

  overflow-x: hidden;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
  position: relative;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  -webkit-text-decoration-skip: ink;
  text-decoration-skip-ink: auto;
}

/* Make images easier to work with */
img,
picture,
svg {
  width: 100%;
  height: auto;
}

/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    -webkit-animation-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    -webkit-animation-iteration-count: 1 !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/*----------  Generalt ----------*/

body {
  background-image: url("../assets/img/om-bg.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  font-family: var(--body-font);
  color: var(--light);
  font-size: 16px;
}

.container {
  padding: 0 2rem;
}

.hide-on-mobile {
  display: none;
}

h1 {
  color: var(--secondary);
  text-align: center;
  font-family: "Athletics";
  font-size: calc(50px + 0.08125 * (100vw - 320px));
}

header,
footer {
  color: var(--white);
  display: flex;
  justify-content: center;
  align-items: center;
  height: 10svh;
}

main {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 80svh;
}

main .info {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}

main .info .logo {
  max-width: 70vw;
  margin-bottom: 1rem;
}

main .info p {
  font-size: 1.25rem;
  text-align: center;
}

@media (min-width: 960px) {
  main .info .logo {
    max-width: 40vw;
  }

  main .info p {
    font-size: 1.5rem;
  }

  .hide-on-mobile {
    display: block;
  }
}