@font-face {
  font-family: "Megrim-Regular";
  src: url('fonts/Megrim-Regular.ttf') format('truetype')
}

@font-face {
  font-family: "Quicksand-Regular";
  src: url('fonts/Quicksand-Regular.ttf') format('truetype')
}

html {
  font-size: 16px;
}

#outer-wrapper {
  margin: 5vw auto;
  max-width: 1200px;
  padding: 0 2vw 0 2vw;
}

#text-wrapper {
  display: flex;
  flex-direction: row;
}

#text-wrapper div {
  padding: 0 0 1rem 2rem;
}

#norwegian-wrapper {
  border-left: 1px solid hsl(0, 0%, 50%);
}

#english-wrapper p {
  padding-right: 1rem;
}

#contact-wrapper {
  text-align: center;
  margin: 2rem 2rem 1rem 2rem;
  padding-top: 2rem;
  border-top: 1px solid hsl(0, 0%, 50%);
}

h1 {
  text-align: center;
  margin-bottom: calc(0.5rem + 3vw);
  font-family: "Megrim-Regular", serif;
  font-size: calc(1rem + 1.5vw);
  font-weight: bold;
  color: hsl(350, 100%, 40%);
}

h2 {
  text-align: center;
  margin-bottom: calc(1rem + 1vw);
  font-family: "Megrim-Regular", serif;
  font-size: calc(0.8rem + 1vw);
  font-weight: bold;
  color: hsl(350, 100%, 40%);
}

h3 {
  font-family: "Quicksand-Regular", "Trebuchet MS", sans-serif;
  font-size: calc(1rem + 0.5vw);
  margin: 2vw 0 calc(0.8rem + 0.5vw) 0;
  color: hsl(0, 0%, 10%);
}

h6 {
  text-align: center;
  font-size: 1.5rem;
}

p {
  font-family: "Quicksand-Regular", "Trebuchet MS", sans-serif;
  font-size: calc(0.8rem + 0.3vw);
  line-height: 1.5;
  margin-bottom: calc(0.8rem + 0.5vw);
  color: hsl(0, 0%, 10%);
}

a {
  color: hsl(180, 100%, 30%);
}

#contact-wrapper p {
  margin-bottom: 0.5rem;
}

/* SMALL SCREENS */
@media screen and (max-width: 600px) {

  #text-wrapper {
    flex-direction: column;
  }

  #text-wrapper div {
    padding: 0 1rem 0 1rem;
  }

  #english-wrapper p {
    padding-right: 0;
  }

  #norwegian-wrapper {
    border-left: none;
    border-top: 1px solid hsl(0, 0%, 50%);
    margin-top: 1rem;
  }

  #norwegian-wrapper p:first-child {
    margin-top: 2rem;
  }

  #contact-wrapper {
    padding: 1rem;
  }

  #contact-wrapper p {
    margin: 0rem;
    padding-bottom: 0rem;
  }

}