html, body {
  margin: 0;
  padding: 0;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
}

.scene {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  opacity: 0; /* Hidden initially */
  transition: opacity 1s ease-out; /* Fade in/out transition */
  background-size: cover;
}

.scene.active {
  opacity: 1; /* Show the active scene */
}

.scene > div {
  opacity: 0; /* Hide content by default */
  transition: opacity 0.5s ease-out;
  position:absolute;
}

.scene > div.active {
  opacity: 1; /* Reveal content when active */
  position:relative;
}

.scene > div img {
  transition:all 1s ease-in-out;
  transform:scale(0);
}

.scene > div.active img {
  transform:scale(.5);
}

.forest {
  background-image: url(/forest.jpg);
}
.desert {
  background-image: url(/desert.jpg);
}
.beach {
  background-image: url(/beach.jpg);
}

.left {
  left:-40%;
}

.right {
  right:-40%;
}

.dialog {
    display:block;
    background:white;
    padding:15px;
    border-radius:15px;
    box-shadow:-5px 5px 8px 2px #000;
}
.dialog.left.active {
    position: absolute;
    left:30%;
    top:10%;
}