* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  min-height: 100%;
}

body {
  background: #000;
  overflow-x: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  font-family: "Open Sans", Arial, sans-serif;
}

#site {
  position: relative;
  width: 1024px;
  height: 768px;
  flex: 0 0 auto;
  background: url("images/bg.jpg") center center / 1024px 768px no-repeat;
  transform-origin: center center;
}

#content {
  position: absolute;
  left: 50%;
  top: 200px;
  transform: translateX(-50%);
  width: 708px;
  height: 262px;
  background: url("images/content.png") center center / 708px 262px no-repeat;
}

#german-goals,
#brazil-goals {
  position: absolute;
  top: 205px;
  width: 300px;
  height: 40px;
  margin: 0;
  font-size: 41px;
  line-height: 40px;
  color: #000;
  text-align: center;
  display: inline-block;
}

#german-goals {
  left: 7px;
}

#brazil-goals {
  left: 393px;
}

/* Preserve the original 1024×768 composition on large screens,
   while scaling the whole canvas proportionally on small screens. */
@media (max-width: 1023px), (max-height: 767px) {
  #site {
    width: min(1024px, 100vw);
    height: min(768px, 75vw);
    max-height: 100vh;
    background-size: 100% 100%;
  }

  #content {
    top: 26.0416667%;
    width: 69.140625%;
    height: 34.1145833%;
    background-size: 100% 100%;
  }

  #german-goals,
  #brazil-goals {
    top: 78.2442748%;
    width: 42.3728814%;
    height: 15.2671756%;
    font-size: clamp(16px, 4vw, 41px);
    line-height: 1;
  }

  #german-goals {
    left: 0.98870056%;
  }

  #brazil-goals {
    left: 55.5084746%;
  }
}