/* RESET */
*,
::after,
::before {
  box-sizing: border-box
}

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

body {
  background-color: #fff;
  font-family: Poppins, sans-serif;
  font-size: 1rem
}

h1,
h2,
h3,
h4 {
  line-height: 1.2;
  font-weight: 700
}

h1 {
  font-size: 2.0736rem
}

h2 {
  font-size: 1.728rem
}

h3 {
  font-size: 1.25rem
}

h4 {
  font-size: 1.2rem
}

button {
  background-color: transparent;
  border-radius: 0;
  color: inherit;
  line-height: inherit;
  appearance: none
}

a {
  color: var(--moeller-blue)
}

svg {
  display: block;
  max-width: 100%
}

@media (min-width:64rem) {
  body {
    font-size: 1.25rem
  }

  h1 {
    font-size: 3.051rem
  }

  h2 {
    font-size: 2.44rem
  }

  h3 {
    font-size: 1.75rem
  }

  h4 {
    font-size: 1.5625rem
  }
}

:root {
  /* Farver vars */
  --moeller-blue: #2E294E;
  --moeller-green: #47E199;
  --accent-blue: #235E9E;
  --accent-green: #D8F6F0;
  --bg-gray: #F6F6F6;
  --white: #fff;
  --black: #000;


  /* Layout vars */
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1.25rem;
  --space-3xl: 9rem;

  --text-xl: 1.728rem;
  --text-base: 1rem;
  --text-sm: 0.833rem;

  /* Interaktive Variabler */
  --total-pages: 0
}

body {
  background-color: var(--bg-gray);
}

/* Farve classes */
.color-blue {
  color: var(--moeller-blue)
}

.color-green {
  color: var(--moeller-green)
}

.color-accent-blue {
  color: var(--accent-blue)
}

.color-accent-green {
  color: var(--accent-green)
}

.color-white {
  color: var(--white)
}

.color-black {
  color: var(--black)
}

.bg-green {
  background-color: var(--moeller-green)
}

.bg-blue {
  background-color: var(--moeller-blue)
}

.bg-accent-green {
  background-color: var(--accent-green)
}

.bg-accent-blue {
  background-color: var(--accent-blue)
}

.bg-gray {
  background-color: var(--bg-gray)
}

.text-sm {
  line-height: 1.1;
  margin-bottom: var(--space-xs);
  font-size: var(--text-sm)
}

.text-xl {
  font-size: var(--text-xl)
}

.flex-center {
  justify-content: center;
  align-items: center
}

.flex-grow {
  flex-grow: 1
}

.flex {
  display: flex
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Responsive */
@media (min-width:64rem) {
  :root {
    --space-xs: 0.75rem;
    --space-sm: 1.125rem;
    --space-md: 2rem;
    --text-xl: 2.44rem;
    --text-sm: 1rem;
  }

  .flex-grow {
    flex-grow: 0
  }

  .justify {
    justify-content: flex-end
  }

  .hide {
    display: none !important
  }
}