* {
  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: #f00a0a;
  background: linear-gradient(180deg, rgba(240, 10, 10, 1) 0%, rgba(247, 140, 0, 1) 21%, rgba(226, 247, 0, 1) 37%, rgba(21, 247, 0, 1) 56%, rgba(0, 247, 239, 1) 79%);
  /* TODO: background sky gradient */
}

.sun {
  position: absolute;
  top: 60px;
  right: 80px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: #e65e09;
  background: linear-gradient(180deg, rgba(230, 94, 9, 1) 0%, rgba(212, 212, 47, 1) 50%);
  box-shadow: 0px 3px 148px 75px rgba(232, 240, 4, 0.75);
  z-index: 98;
  /* TODO: sun shape and glow */
  /* TODO: sun color experiment */
}

.hills {
  position: absolute;
  bottom: 20%;
  left: -10%;
  width: 120%;
  height: 35%;
  background: #0a5903;
  background: linear-gradient(180deg, rgba(10, 89, 3, 1) 0%, rgba(17, 163, 10, 1) 50%);
  border-radius: 80%;
  z-index: 99;
  /* TODO: hills shape */
}

.water {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 30%;
  z-index: 100;
  background: #1d9da8;
  background: linear-gradient(90deg, rgba(29, 157, 168, 1) 0%, rgba(7, 122, 115, 1) 50%);
  border-top: aquamarine 10px solid;

  /* TODO: water color and transparency */
}

.text-overlay {
  position: absolute;
  bottom: 20px;
  left: 0;
  width: 100%;
  text-align: center;
  font-family: Georgia, serif;
  z-index: 101;
  /* TODO: text styling and shadow */
  /* TODO: text color experiment */
}

.cloud {
  position: absolute;
  left: 2px;
  top: px;
  height: 95px;
  /*
     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: #065261;
  background: radial-gradient(circle, rgba(6, 82, 97, 1) 0%, rgba(98, 235, 240, 1) 100%);
  z-index: 102;
}

.thunder {
  height: 200px;
  /* control the size */
  aspect-ratio: 0.50;
  clip-path: polygon(100% 0, 23% 46%, 46% 44%, 15% 69%, 38% 67%, 0 100%, 76% 57%, 53% 58%, 88% 33%, 60% 37%);
  background: #e3b50e;
  z-index: 103;
}