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

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: hsl(0, 0%, 15%);
}

.postcard {
  position: relative;
  width: 600px;
  height: 400px;
  overflow: hidden;
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

.sky {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 65%;
  background: #13d4bd;
  background: linear-gradient(132deg,rgba(19, 212, 189, 1)
  0%, rgba(0, 247, 255, 1) 50%, rgba(0, 55, 255, 1) 100%);
}

.sun {
  position: absolute;
  top: 60px;
  right: 80px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background-color: hsl(45, 80%, 54%);
  box-shadow: 0px 0px 52px 20px rgba(255,153,0,0.75);

}

.hills {
  position: absolute;
  bottom: 30%;
  left: -10%;
  width: 120%;
  height: 45%;
  background: radial-gradient(
    ellipse 120% 60% at 50% 100%,
    hsl(120, 50%, 35%),
    hsl(120, 40%, 25%)
  );
  border-radius: 50% 50% 0% 0%;
}

.water {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 32%;
  background: linear-gradient(180deg,#00b1ff 0%, #006eff 80%);
}

.text-overlay {
  position: absolute;
  bottom: 40px;
  left: 0;
  width: 100%;
  text-align: center;
  font-family: Georgia, serif;
  font-size: 1.5rem;
  text-shadow: 0px 34px 4px rgba(255,0,0,0.84);
  color:brown
}
/* HTML: <div class="cloud"></div> */
.cloud {
    top:100px;
    scale: 0.5;
    height: 180px; /* control the size */
    aspect-ratio: 1.8;
    --g: radial-gradient(50% 50%, #000 98%, #0000) no-repeat;
    mask: var(--g) 100% 100%/30% 60%,var(--g) 70% 0/50% 100%,var(--g) 0 100%/36% 68%,var(--g) 27% 18%/26% 40%,linear-gradient(#000 0 0) bottom/67% 58% no-repeat;
    background: #269af2;
}