.background {
  background: rgba(255, 255, 255, .7);
  margin-left: auto;
  margin-right: auto;
  width: min-content;
  height: 100vh;
  box-shadow: 0 0 10px 0 rgba(0%, 0%, 0%, .75);
}

.poster {
  background: url("../assets/img/poster.webp") no-repeat center;
  height: 100vh;
  width: 70.7vh;
  position: relative;
  background-size: cover;
}

.poster-link, #title {
  position: absolute;
  right: 6.7%;
  text-decoration: none;
  display: block;
  transform: rotate(-17deg);
  transform-origin: right bottom;
}

.poster-link > span, #title {
  font-size: 3.1vh;
  letter-spacing: 0.054vh;
  color: black;
}

.poster-link > span > img {
  height: 3.1vh;
  width: auto;
}

.transition {
  /*transition: font-size 0.2s;*/
}

.transition:hover {
  font-size: 3.3vh;
}

.transition:hover img {
  height: 3.3vh;
}

/* Make title larger than other elements */
#title {
  top: 18.7%;
  font-size: 3.6vh;
}

#ueber-uns-link {
  top: 28.7%;
}

#von-uns-link {
  top: 38.7%
}

#mit-uns-link {
  top: 48.7%
}

#an-uns-link {
  top: 58.7%
}

/*Behaviour in normal desktop mode*/
@media (min-aspect-ratio: 1/1) {
  .background {
    margin-left: 20vw;
  }
}

/* If width is smaller than height for poster, use vw as reference instead of vh */
@media (max-aspect-ratio: 707/1000) {
  .poster {
    width: 100vw;
    height: calc(100vw / 707 * 1000); /* Equals 100% height of the background image in the aspect ratio */
  }

  .poster-link > span, #title {
    font-size: calc(100vw / 707 * 1000 / 100 * 3.3);
    letter-spacing: calc(100vw / 707 * 1000 / 100 * 0.054);
  }

  /* Make title larger than other elements */
  #title > span {
    font-size: calc(100vw / 707 * 1000 / 100 * 3.6);
  }

  .transition:hover {
    font-size: calc(100vw / 707 * 1000 / 100 * 3.3);
  }

  .poster {
    position: relative;
    top: calc((100vh - (100vw / 707 * 1000)) / 2); /* place in middle vertically */
  }
}