/* Ocean Sailboat Scene */

/* General setup */
body {
  margin: 0;
  background: #87ceeb;
  height: 100vh;
  overflow: hidden;
  position: relative;
}

/* Rectangle: Ocean */
.ocean {
  /* Rectangle used for ocean */
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 40%;
  background: #1e90ff;
}

/* Circle: Sun */
.sun {
  /* Circle used for the sun */
  position: absolute;
  top: 60px;
  left: 60px;
  width: 100px;
  height: 100px;
  background: #ffd700;
  border-radius: 50%;
}

/* Triangle: Sail */
.sail {
  /* Triangle for sail */
  position: absolute;
  bottom: 40%;
  left: 50%;
  width: 0;
  height: 0;
  border-left: 70px solid transparent;
  border-right: 0 solid transparent;
  border-bottom: 120px solid white;
  transform: translateX(-20px);
}

/* Rectangle: Boat */
.boat {
  /* Rectangle for boat base */
  position: absolute;
  bottom: 38%;
  left: 48%;
  width: 140px;
  height: 30px;
  background: #8b4513;
  border-radius: 0 0 40px 40px;
}

/* Rectangle: Mast */
.mast {
  /* Rectangle for mast */
  position: absolute;
  bottom: 40%;
  left: 52%;
  width: 8px;
  height: 140px;
  background: #4b2e05;
}

/* Odd Shape: Waves */
.wave {
  /* Odd rounded wave shape */
  position: absolute;
  bottom: 0;
  width: 120px;
  height: 60px;
  background: #00bfff;
  border-radius: 50% 50% 0 0;
  opacity: 0.6;
}
.wave1 { left: 100px; bottom: 10px; }
.wave2 { left: 250px; bottom: 5px; }
.wave3 { left: 400px; bottom: 15px; }
.wave4 { left: 550px; bottom: 10px; }

/* Oval: Island */
.island {
  /* Oval shape for island */
  position: absolute;
  bottom: 33%;
  right: 100px;
  width: 120px;
  height: 40px;
  background: #deb887;
  border-radius: 50%;
}

/* Clouds */
.cloud {
  /* Rounded rectangle clouds */
  position: absolute;
  top: 80px;
  width: 120px;
  height: 60px;
  background: white;
  border-radius: 30px;
  opacity: 0.9;
}
.cloud1 { left: 300px; }
.cloud2 { left: 500px; top: 100px; }
.cloud3 { left: 700px; top: 60px; }
.cloud4 { left: 900px; top: 100px; }