/**
 * index.scss
 * - Add any styles you want here!
 */
html {
  overflow: hidden;
}

body {
  background: #f5f5f5;
  margin: 0;
  width: 100%;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  background: linear-gradient(#6db2ff, #d5e7f3);
}

.hidden {
  display: none !important;
}

.start {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

h1 {
  font-size: 4vmax;
}

.start button {
  background: yellowgreen;
  font-size: 3vmax;
  font-weight: bold;
  padding: 0.5vmax 1.2vmax;
  border: #444 solid 0.4vmax;
  color: #444;
  cursor: pointer;
}

:root {
  --canvas-width: 4000vh;
}

.world {
  height: 100vh;
  width: var(--canvas-width);
  position: relative;
  transition: filter .2s ease-in-out;
}

body.driving .world {
  transition: transform 2s ease-in;
}

body.popup-open .world {
  filter: blur(0.5rem);
}

.figur {
  height: 50vh;
  width: auto;
  position: fixed;
  transform: translateX(calc(10vh));
  bottom: 8vh;
}

.figur img {
  object-fit: cover;
  object-position: 0px 0px;
  height: 50vh;
  width: calc(50vh * 311 / 493);
}

.figur.right img {
  transform: scaleX(1);
}

.figur.left img {
  transform: scaleX(-1);
}

.floor {
  position: absolute;
  bottom: 0;
  height: 50vh;
  width: calc(var(--canvas-width) + 40vh);
  left: -20vh;
  background-image: url("/assets/TexturesCom_FloorsRegular0181_1_seamless_S.jpg");
  transform: rotateX(70deg) skewX(-15deg);
  transform-origin: bottom;
  background-size: 50vh;
}

body.isLevel2 .floor {
  background-image: url("/assets/TexturesCom_SandPebbles0091_1_seamless_S.jpg");
}

.grass {
  position: absolute;
  bottom: 0;
  height: 13vh;
  width: calc(var(--canvas-width) + 40vh);
  left: 0;
  background-image: url("/assets/grass-159804_1280.png");
  background-position: bottom;
  background-size: contain;
}

body.isLevel2 .grass {
  background-image: url("/assets/cactii.png");
}

.grass.front {
  z-index: 2;
}

.grass.back {
  bottom: 17vh;
  left: -10vh;
}

.interactive {
  cursor: pointer;
  transition: filter .2s ease-in-out;
}

.interactive:hover {
  filter: drop-shadow(0 0 1vh yellow);
}

.bulbtext {
  width: 30vh;
  text-align: center;
  position: absolute;
  bottom: 60vh;
  left: 36vh;
  font-size: 4vh;
  font-style: oblique;
}

.bulb {
  height: 15vh;
  position: absolute;
  left: 60vh;
  bottom: 50vh;
}

.clock {
  position: absolute;
  bottom: 14vh;
  left: calc(100vw + 40vh);
  height: 50vh;
}

.calendar {
  position: absolute;
  bottom: 40vh;
  left: calc(200vw + 40vh);
  height: 15vh;
  width: 70vh;
  display: flex;
  justify-content: space-between;
}

.calendar img {
  height: 100%;
}

.billboard {
  position: absolute;
  bottom: 14vh;
  left: calc(300vw + 40vh);
  height: 70vh;
}

.wall {
  position: absolute;
  bottom: 17vh;
  left: calc(450vw + 40vh);
  height: 60vh;
}

.poster {
  position: absolute;
  bottom: 17vh;
  left: calc(450vw + 40vh);
  height: 20vh;
}

.poster_1 {
  transform: translate(7vh, -30vh) rotate(-10deg);
}

.poster_2 {
  transform: translate(28vh, -35vh) rotate(4deg);
  height: 13vh;
}

.poster_3 {
  transform: translate(66vh, -20vh) rotate(11deg);
}

.poster_4 {
  transform: translate(21vh, -6vh) rotate(4deg);
}

.poster_5 {
  transform: translate(44vh, -9vh) rotate(-6deg);
}

.car {
  height: 40vh;
  bottom: 8vh;
  position: absolute;
  left: calc(600vw + 40vh);
  transition: transform 2s ease-in;
}

body.driving .car {
  transform: translateX(200vw);
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

body.driving .car #R1,
body.driving .car #R2 {
  animation: rotate infinite 1s linear;
}

.car #R1 {
  transform-origin: 85.4% 76.1%;
}

.car #R2 {
  transform-origin: 21.9% 76.1%;
}

.arrowtext {
  width: 30vh;
  text-align: center;
  position: absolute;
  bottom: 45vh;
  left: calc(600vw + 170vh);
  font-size: 4vh;
  font-style: oblique;
}

.nextlevelarrow {
  position: absolute;
  height: 10vh;
  bottom: 35vh;
  left: calc(600vw + 190vh);
}

.curtain {
  position: absolute;
  height: 100vh;
  width: 100vw;
  background: black;
  opacity: 0;
  transition: opacity 1s ease-in;
  z-index: 1;
}

.curtain.shown {
  opacity: 1;
}

.popupcontainer {
  height: 100vh;
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;
}

.popupcontainer .popup {
  max-height: 75vmin;
  max-width: 75vw;
  transition: transform .2s ease-in-out;
  transform: translateY(-100vh);
  position: relative;
  background-color: #bed0d6;
  border: none;
}

.popupcontainer .popup img {
  max-height: 75vmin;
  max-width: 75vw;
}

.popupcontainer .popup.shown {
  transform: translateY(0);
}

.popupcontainer .closebutton {
  position: absolute;
  right: 3vh;
  top: 3vh;
  font-size: 4vh;
  text-align: center;
  padding: 0;
  margin: 0;
  width: 5vh;
  height: 5vh;
  border: none;
  cursor: pointer;
  color: white;
  background: transparent;
  border-radius: 50%;
  transition: background .1s ease-in-out, color .1s ease-in-out;
}

.popupcontainer .closebutton:hover {
  color: #212121;
  background: white;
}

.popupcanvas {
  height: 60% !important;
  width: auto !important;
  position: absolute;
  top: 53%;
  left: 11%;
  transform: translateY(-50%);
}

.tor_hinten, .tor_vorne {
  position: absolute;
  bottom: 2vh;
  left: calc(0vw + 70vh);
  height: 75vh;
}

.tor_hinten {
  bottom: 5vh;
}

.tor_vorne {
  z-index: 1;
}

.tents {
  position: absolute;
  bottom: 20vh;
  left: calc(100vw + 40vh);
  z-index: -1;
}

.tent {
  position: absolute;
}

.tent-red {
  height: 35vh;
  bottom: 0vh;
}

.tent-red .c1 {
  fill: #F60A0F;
}

.tent-red .c2 {
  fill: #330305;
}

.tent-green {
  height: 40vh;
  bottom: 5vh;
  z-index: -2;
}

.tent-green .c1 {
  fill: #77AE2F;
}

.tent-green .c2 {
  fill: #25330E;
}

.tent2 {
  left: 31vh;
}

.tent3 {
  left: 55vh;
}

.tent4 {
  left: 85vh;
}

.tent5 {
  left: 109vh;
}

.tent6 {
  left: 141vh;
}

.foodtruck {
  position: absolute;
  left: calc(250vw + 40vh);
  bottom: 13vh;
  z-index: -1;
  height: 75vh;
}

.biere {
  display: flex;
  position: absolute;
  left: calc(350vw + 40vh);
  bottom: 17vh;
  width: 60vh;
  justify-content: space-between;
}

.biere img {
  height: 30vh;
}

.speaker {
  position: absolute;
  left: calc(450vw + 40vh);
  bottom: 14vh;
  height: 40vh;
}

#frame10 .ppButtons {
  position: absolute;
  right: 25vh;
  bottom: 15vh;
  height: 29vh;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
}

#frame10 .pp {
  font-size: 2.5vh;
}

#frame10 .ppRock {
  color: #e86a50;
}

#frame10 .ppTech {
  color: #7ec8ff;
}

#frame10 .ppHIP {
  color: #ffd25d;
}

#frame10 .ppIndie {
  color: #8de877;
}

#frame10 .pp90 {
  color: #d981ff;
}

.stage {
  position: absolute;
  left: calc(550vw + 40vh);
  bottom: 14vh;
  height: 60vh;
  z-index: -1;
}

.goodbye {
  width: 70vh;
  position: absolute;
  bottom: 60vh;
  left: calc(650vw + 40vh);
  font-size: 4vh;
  font-style: oblique;
}

.videowrapper {
  display: flex;
  width: 100vh;
  justify-content: space-between;
  position: absolute;
  bottom: 40vh;
  left: calc(650vw + 40vh);
}

.videowrapper img {
  width: 30vh;
}