* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

body {
  background: #a8dcf7;
}


/* ================================
   SKY
================================ */

.scene {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;

  background:
    radial-gradient(
      circle at 50% 12%,
      rgba(255, 250, 220, 0.95) 0%,
      rgba(255, 255, 255, 0.35) 12%,
      transparent 30%
    ),
    linear-gradient(
      to bottom,
      #82cef5 0%,
      #b9e5f9 48%,
      #ecf9ff 100%
    );
}


/* ================================
   SUN
================================ */

.sun {
  position: absolute;
  width: 180px;
  height: 180px;

  left: 50%;
  top: 2%;

  transform: translateX(-50%);

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(255, 249, 215, 0.95),
      rgba(255, 250, 225, 0.35) 35%,
      transparent 72%
    );

  filter: blur(8px);

  z-index: 1;
}


/* ================================
   BACKGROUND CLOUDS
================================ */

.clouds-bg {
  position: absolute;

  left: -20%;
  bottom: -12%;

  width: 140%;
  height: 38%;

  opacity: 0.9;

  background:
    radial-gradient(
      ellipse at 10% 65%,
      white 0%,
      rgba(255,255,255,.85) 26%,
      transparent 52%
    ),
    radial-gradient(
      ellipse at 36% 55%,
      white 0%,
      rgba(255,255,255,.9) 28%,
      transparent 55%
    ),
    radial-gradient(
      ellipse at 66% 55%,
      white 0%,
      rgba(255,255,255,.85) 28%,
      transparent 55%
    ),
    radial-gradient(
      ellipse at 90% 65%,
      white 0%,
      rgba(255,255,255,.85) 26%,
      transparent 52%
    );

  filter: blur(18px);

  z-index: 2;

  animation:
    cloudBreathe 12s ease-in-out infinite alternate;
}


@keyframes cloudBreathe {

  from {
    transform:
      translateY(10px)
      scale(1);
  }

  to {
    transform:
      translateY(-15px)
      scale(1.03);
  }

}


/* ================================
   FLOATING WONDERS
================================ */

.wonder {
  position: absolute;

  left: 0;

  z-index: 10;

  pointer-events: none;

  will-change: transform;

  transform-origin: center center;
}


.wonder img {
  display: block;

  width: 100%;
  height: auto;

  background: transparent !important;

  border: none !important;
  outline: none !important;

  object-fit: contain;

  user-select: none;

  -webkit-user-drag: none;

  filter:
    drop-shadow(
      0 20px 18px
      rgba(55, 85, 120, 0.22)
    );
}


/* ================================
   SIZES + HEIGHTS
================================ */

#chichen {
  width: clamp(150px, 22vw, 330px);
  top: 7%;
}

#colosseum {
  width: clamp(210px, 31vw, 470px);
  top: 22%;
}

#petra {
  width: clamp(170px, 25vw, 370px);
  top: 44%;
}

#taj {
  width: clamp(180px, 27vw, 400px);
  top: 9%;
}

#christ {
  width: clamp(130px, 19vw, 280px);
  top: 59%;
}

#machu {
  width: clamp(200px, 30vw, 450px);
  top: 38%;
}

#greatwall {
  width: clamp(200px, 31vw, 470px);
  top: 65%;
}


/* ================================
   MOBILE
================================ */

@media (max-width: 700px) {

  #chichen {
    width: 36vw;
    top: 7%;
  }

  #colosseum {
    width: 52vw;
    top: 21%;
  }

  #petra {
    width: 40vw;
    top: 42%;
  }

  #taj {
    width: 44vw;
    top: 10%;
  }

  #christ {
    width: 30vw;
    top: 61%;
  }

  #machu {
    width: 48vw;
    top: 42%;
  }

  #greatwall {
    width: 49vw;
    top: 68%;
  }

}