* {
  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: #000000;
background: linear-gradient(90deg, rgb(51, 209, 12) 0%, rgb(0, 222, 0) 100%);
}

.sun {
  position: absolute;
  top: 60px;
  right: 80px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background-color: black;
 box-shadow: 0px 3px 146px 86px rgba(115,43,43,0.67);
-webkit-box-shadow: 0px 3px 146px 86px rgba(115,43,43,0.67);
-moz-box-shadow: 0px 3px 146px 86px rgba(115,43,43,0.67);
  /* TODO: sun color experiment */
}

.hills {
  position: absolute;
  bottom: 20%;
  left: -10%;
  width: 120%;
  height: 45%;
  border-radius: 80%;
  z-index: 101;
background: #999999;
background: linear-gradient(90deg, rgba(153, 153, 153, 1) 0%, rgba(153, 153, 153, 0.93) 100%);
}

.water 
{
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 40%;
  z-index: 101;
  background-color: blue;
  background: #4100e6;
 background: #0300c2;
background: linear-gradient(0deg, rgba(3, 0, 194, 1) 0%, rgba(45, 229, 253, 1) 95%);
}
.text-overlay {
  position: absolute;
  bottom: 40px;
  left: 0;
  width: 100%;
  text-align: center;
  font-family: Georgia, serif;
  z-index: 101;

}

.tree {
  position: absolute;
  bottom: 160px;
  left: 50px;
  width: 57px;
  height: 105px;
  z-index: 9999;
  background: linear-gradient(
    to bottom,
    green 0%,
    green 70%,
    brown 70%,
    brown 100%
  );
  clip-path: polygon(
    50% 0%,
    75% 25%,
    65% 25%,
    90% 45%,
    72% 43%,
    100% 65%,
    65% 58%,
    58% 75%,
    58% 100%,
    42% 100%,
    42% 75%,
    35% 58%,
    0% 65%,
    28% 43%,
    10% 45%,
    35% 25%,
    25% 25%
  );
}