
body {
  display: flex;
  flex-direction: column;

  margin: 0;
  height: 100vh;
}

#header {
  display: grid;
  grid-template-rows: 1fr;
  grid-template-columns: 1fr min(600px, 50%) min(600px, 50%) 1fr;

  background-color: #FFFFFF;
  min-height: 80px;
  padding: 0 16px;

  z-index: 1;
  box-shadow: 0px 4px 6px -1px #00000026;
}

#header > .header-left {
  display: flex;
  flex-direction: row;
  align-items: center;

  grid-column: 2;
}

#header > .header-right {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;

  grid-column: 3;
}

#header .language-link {
  text-decoration: none;
  margin: 0 8px;
}

#body-blobs {
  position: relative;

  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 20px;

  background-color: #FAFBF8;
  flex: 1 1 100px;
  overflow: hidden;
}

#body-legal {
  display: flex;
  flex-direction: column;
  padding: 0 20px;

  background-color: #FAFBF8;
  flex: 1 1 100px;
}

#blob-1 {
  position: absolute;

  bottom: -100px;
  right: -100px;
}

#blob-2 {
  position: absolute;

  top: -100px;
  left: -50px;
}

#specks {
  position: absolute;

  bottom: -100px;
  right: 50px;
  scale: 0.75;
}

#page-title {
  font-family: "marcellus", sans-serif;
  font-size: 48px;
  font-weight: normal;
  text-align: center;
  z-index: 1;
  margin: 0;
}

#page-subtitle {
  font-family: "euclid-circular", sans-serif;
  font-weight: normal;
  text-align: center;
  z-index: 1;
  margin: 8px auto 32px auto;
  max-width: 600pt;
}

#footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: 16px;

  background-color: #365D62;
  min-height: 88px;
  padding-top: 24px;
}

#footer > .footer-links {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  column-gap: 16px;
  justify-content: center;
}

@media (max-width: 480px) {
  #page-title {
    font-size: 24px;
  }
  #specks {
    display: none
  }
}

@media (max-width: 955px) {
  #blob-1 {
    scale: 0.5;
    bottom: -200px;
    right: -200px;
  }

  #page-title {
    font-size: 36px;
  }

  #blob-2 {
    scale: 0.5;
    top: -180px;
    left: -190px;
  }

  #specks {
    scale: 0.5;
    bottom: -180px;
    right: -50px;
  }
}
