html5 {
}

body {
  background: url(IMG_1015.jpeg);
  background-size: 110vw;
  background-repeat: no-repeat;
  cursor: none !important;
}

* {
  cursor: none !important;
}

h1 {
  font-family: 'Courier New', Courier, monospace;
  text-align: right;
  font-size: 7vw;
}

h2 {
  font-family: 'Courier New', Courier, monospace;
  text-align: right;
  font-size: 5vw;
  position: absolute;
  top: 20vw;
  right: 2vw;
}

h3 {
  font-family: 'Courier New', Courier, monospace;
  text-align: left;
  font-size: 2.5vw;
  color: grey;
  position: absolute;
  top: 7vw;
}

#elementstairs {
  /* border: 1px solid black; */
  width: 35vw;
  height: 59vw;
  position: absolute;
  top: 62vw;
  left: 3vw;
  transform: perspective(95vw) rotateY(47deg) rotateZ(-3deg) rotateX(-3deg);
}
#elementorange {
  /* border: 1px solid red; */
  width: 17vw;
  height: 42vw;
  position: absolute;
  top: 65vw;
  left: 37vw;
  transform: perspective(95vw) rotateY(47deg) rotateZ(-3deg) rotateX(-3deg);
}

#elementpolaroid {
  /* border: 1px solid red; */
  width: 7vw;
  height: 32vw;
  position: absolute;
  top: 66vw;
  left: 56vw;
  perspective: 12vw;
  transform: perspective(21vw) rotateY(22deg) rotateZ(0deg) rotateX(4deg);
}

#elementtext {
  /* border: 1px solid green; */
  width: 34vw;
  height: 45vw;
  position: absolute;
  top: 8vw;
  left: 28vw;
  transform: perspective(657vw) rotateY(68deg) rotateZ(14deg) rotateX(5deg);
}
#elementplatte {
  /* border: 1px solid yellow; */
  width: 27vw;
  height: 34vw;
  position: absolute;
  top: 24vw;
  left: 45vw;
  transform: perspective(687vw) rotateY(72deg) rotateZ(14deg) rotateX(5deg);
}
#elementblume {
  /* border: 1px solid orchid; */
  width: 17vw;
  height: 28vw;
  position: absolute;
  top: 32vw;
  left: 59vw;
  transform: perspective(912vw) rotateY(72deg) rotateZ(14deg) rotateX(5deg);
}
#elementkabel {
  /* border: 1px solid blue; */
  width: 29vw;
  height: 17vw;
  position: absolute;
  top: 35vw;
  left: 76vw;
  transform: perspective(72vw) rotateY(-12deg) rotateZ(-2deg) rotateX(4deg);
}
#elementheft {
  /* border: 1px solid salmon; */
  width: 16vw;
  height: 40vw;
  position: absolute;
  top: 88vw;
  left: 77vw;
}
#elementinfo {
  /* border: 1px solid lightblue; */
  width: 44vw;
  height: 35vw;
  position: absolute;
  top: 120vw;
  left: 59vw;
  transform: perspective(169vw) rotateY(-28deg) rotateZ(10deg) rotateX(39deg);
}
#elementstairs {
  /* display: none */
  /* background-image: url(./pictures_treppe/Trepperunter_wand.jpg); */
}

#elementstairs-children {
  /* background-color: lavender; */
}

#hand {
  height: 50px;
  width: 50px;
  position: fixed;
  left: 50%;
  bottom: 0;
  /* transform: translate(-50%, -50%); */
  /* removed the cursor transformation so that the cursor position equals the finger tip */
  pointer-events: none;
  background-image: URL(hand.png);
  background-size: cover;
  /* background-color: lightblue;  */
}

/* img */
img {
  height: 80vh;
  position: fixed; /* position divs with imgs as fixed, so we don’t need the display: none property to position them all at the same position */
  left: 50%; /* center img */
  transform: translate(-50%); /* center img */
  top: 10vh;
}

#overlay div {
  transition: opacity 0.5s ease; /* add 500ms transition for opacity, e.g. if hidden */
}

.quer {
  width: 80vw;
  top: 10vh;
  height: auto;
}

.hidden {
  /* display: none; */
  opacity: 0; /* use opacity instead of display, to be able to transition it */
}

#overlay {
  text-align: center;
  pointer-events: none; /* make overlay images click-through so that mouseenter/-leave still work properly, when image is displayed */
}

h1 {
  position: absolute; /* set position to absolute to be able to use z-index */
  margin: 0 10px;
}

h1,
h2,
h3,
#hand {
  z-index: 1 !important; /* place titel / hand-cursor on top of image */
}