body {
  overflow: hidden;
}

#canvas {
  position: fixed;
  width: 100vw;
  height: 80svh;
  inset: 20vh 0 0 0;
  padding: 0 1rem;
}

#impressum {
  position: fixed;
}


#reservation {
  grid-area: res;
  place-self: center;
}

#slogan {
  grid-area: slogan;
  place-self: center;
  max-height: 100%;
}

#pic {
  grid-area: pic;
  place-self: center;
  height: 100%;
}

.welcome-size {
  font-size: calc(1.4rem + 0.8vw);
}

.indoor-size {
  font-size: calc(0.6rem + 0.8vw);
}

.welcome-indent1 {
  margin-left: 5vw;
}

.welcome-indent2 {
  margin-left: 10vw;
}

img {
  height: 100%;
}

/* desktop */
@media (min-aspect-ratio: 1/1) {
  .grid-container {
    width: 100%;
    height: 80svh;
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-template-rows: 5fr 1fr 0.5fr;
    grid-template-areas:
      "pic slogan"
      "pic res"
      ". .";
  }
}

/* mobile */
@media (max-aspect-ratio: 1/1) {
  .grid-container {
    width: 100%;
    height: 80svh;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 4fr 5fr 2fr 1fr;
    grid-template-areas:
      "slogan"
      "pic"
      "res"
      ".";
  }

  #slogan {
    text-align: center;
  }
}