body {
    padding: 0;
    margin: 0;
    overflow: hidden;
}

.canvas{
    background-color: #7DB2D0;
    width: 100vw;
    height: 100vh;
}

.fields {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: absolute;
    width: 100%;
    height: 40vmin;
    bottom: 0;
}

.row1, .row2{
    display: flex;
}

.row2 {
z-index: 4;
}
.field{
    width: 80%;
    height: 30vmin;
    background-color: green;
    border-radius: 50%;
    border: darkgreen 0.5vmin solid;
}

.f1{
    position: absolute;
    z-index: 2;
    left: -10%;
    top: 10vmin;
}
.f2{
    position: absolute;
    z-index: 1;
    left: 30%;
    top: 0;
}
.f3{
    position: absolute;
    z-index: 2;
    left: 60%;
    top: 15%;
}
.f4{
    position: absolute;
    z-index: 4;
    left: -10%;
    top: 50%;
}
.f5{
    position: absolute;
    z-index: 3;
    left: 45%;
    top: 40%;
}

.sun{
    width: 40vmin;
    height: 40vmin;
    border-radius: 50%;
    background: orange;
    box-shadow: 0 0 1vmin orange, 0 0 60px orange, 0 0 20vmin yellow;
    z-index: 0;
    position: absolute;
    right: 0;
    bottom: 25vmin;
}

.river{
    width: 100%;
    height: 15vmin;
    background-color: #2989B3;
    position: absolute;
    bottom: 0;
    z-index: 4;
    clip-path: polygon(-1% 100%, 100% 99%, 100% 1%, 83% 17%, 84% 27%, 72% 36%, 72% 45%, 45% 60%, 47% 71%, 11% 89%)
}

.stone{
    width: 30vmin;
    height: 20vmin;
    background-color: grey;
    position: absolute;
    bottom: 0;
    right: 6%;
    z-index: 5;
    clip-path: polygon(2% 100%, 2% 86%, 23% 59%, 22% 29%, 35% 30%, 63% 13%, 73% 40%, 91% 47%, 82% 64%, 94% 79%, 94% 90%, 100% 100%);
}


.clouds {
  position: absolute;
  top:30%;
  left:50%;
  transform: translate(-50%,-50%);
}

.cloud.c1 {
  background: rgba(255, 255, 255);
  width: 30vmin; 
  height: 10vmin;
  border-radius: 15vmin; 
  box-shadow: 1vmin 1vmin rgba(0,0,0,0.2);
  animation: move 3s infinite;
}
.cloud.c2 {
    background: rgba(255, 255, 255);
    width: 30vmin; 
    height: 10vmin;
    border-radius: 15vmin; 
    box-shadow: 1vmin 1vmin rgba(0,0,0,0.2);
    animation: move 3s infinite;
    position: relative;
    right: 100%;  
}
.cloud.c3 {
    background: rgba(255, 255, 255);
    width: 30vmin; 
    height: 10vmin;
    border-radius: 15vmin; 
    box-shadow: 10px 10px rgba(0,0,0,0.2);
    animation: move 3s infinite;
    position: relative;
    left: 100%; 
}

.cloud:after {
  content: '';
  background: rgba(255, 255, 255);
  position: absolute;
  width: 10vmin;
  height: 10vmin;
  border-radius: 50%;
  top: -5vmin;
  left: 5vmin;
}

.cloud:before {
  content: '';
  background: rgba(255, 255, 255);
  position: absolute;
  width: 17vmin;
  height: 15vmin;
  border-radius: 50%;
  top: -9vmin;
  right: 4vmin;
}

@keyframes move {
  0% {
    transform: translatex(0);
  }
  50% {
    transform: translatex(-4vmin);
  }
}

.tree{
    position: absolute;
    bottom: 69vmin
}
.tree-base {
    width: 30vmin;
    height: 50vmin;
    background-color: #BEBCBC;
    position: absolute;
    top: 0;
    left: 10vmin;
    z-index: 5;
    clip-path: polygon(39% 100%, 40% 72%, 30% 62%, 36% 61%, 41% 65%, 41% 41%, 31% 27%, 35% 25%, 41% 34%, 46% 6%, 50% 21%, 55% 15%, 60% 18%, 56% 28%, 57% 52%, 63% 47%, 68% 51%, 64% 57%, 57% 64%, 56% 86%, 63% 76%, 71% 77%, 62% 88%, 56% 99%);
}

.branch{
    width: 10vmin;
    height: 3vmin;
    background: green;
    border-radius: 15vmin; 
    position: absolute;
    z-index: 6;
}

.branch-part{
    content: '';
    background: green;
    position: absolute;
  width: 4.5vmin;
  height: 4.5vmin;
  border-radius: 50%;
  top: -56%;
  left: 25%
}
.branch:before{
    content: '';
    background: green;
  position: absolute;
  width: 3vmin;
  height: 3vmin;
  border-radius: 50%;
  top: -26%;
}

.branch:after{
    content: '';
    background: green;
    position: absolute;
    width: 3vmin;
    height: 3vmin;
    border-radius: 50%;
    top: -26%;
    left: 67%;
}

.b1 {
    top: 11vmin;
    left: 13vmin;
}
.b2{
    top: 7vmin;
    left: 24vmin;
}
.b3{
    top: 22vmin;
    left: 24vmin;
}
.b4{
    top: 31vmin;
    left: 14vmin;
}
.b5{
    top: 37vmin;
    left: 25vmin;
}