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

.animation {
 position: relative;
 margin: 0 auto;
 width: 100%;
 height: 100vh;
 max-width: 1920px;
 max-height: 1024px;
 background-color: lightblue;
 overflow: hidden;
}

/* Birds********************************** */
.animation__birds {
 position: absolute;
 width: 100%;
}

.animation__birds img {
 width: 100%;
}

.animation__birds--front1 {
 left: -10%;
 top: 15%;
 z-index: 10;
 width: 20%;
 -webkit-transform: translateY(0) translateX(0);
     -ms-transform: translateY(0) translateX(0);
         transform: translateY(0) translateX(0);
 -webkit-animation: frontBirds1 200s both infinite linear;
         animation: frontBirds1 200s both infinite linear;
}

.animation__birds--front2 {
 left: -100%;
 top: 80%;
 width: 40%;
 z-index: 9;
 -webkit-transform: translateY(0) translateX(0) scale(1.5);
     -ms-transform: translateY(0) translateX(0) scale(1.5);
         transform: translateY(0) translateX(0) scale(1.5);
 -webkit-animation: frontBirds2 100s both infinite linear;
         animation: frontBirds2 100s both infinite linear;
}

.animation__birds--back {
 right: -10%;
 bottom: 30%;
 width: 10%;
 z-index: 1;
 -webkit-animation: backBirds 100s both infinite linear;
         animation: backBirds 100s both infinite linear;
}

/* Soil********************************* */
.animation__beach {
 position: absolute;
 width: 60%;
 height: 30%;
 z-index: 6;
}

.animation__beach--1 {
 right: 0;
 bottom: 0;
 background-color: yellow;
 -webkit-clip-path: polygon(54% 0, 100% 0, 100% 30%, 100% 100%, 0 100%, 7% 81%, 16% 63%, 35% 26%);
         clip-path: polygon(54% 0, 100% 0, 100% 30%, 100% 100%, 0 100%, 7% 81%, 16% 63%, 35% 26%);
}

.animation__beach--2 {
 right: -5%;
 bottom: 0;
 background-color: #129b0b;
 -webkit-clip-path: polygon(54% 0, 100% 0, 100% 30%, 100% 100%, 0 100%, 7% 81%, 16% 63%, 35% 26%);
         clip-path: polygon(54% 0, 100% 0, 100% 30%, 100% 100%, 0 100%, 7% 81%, 16% 63%, 35% 26%);
}

.animation__soil {
 position: absolute;
 right: 0;
 bottom: 0;
 width: 27%;
 height: 30%;
 background-color: #129b0b;
 z-index: 8;
}

/* Sea********************************* */
.animation__sea {
 position: absolute;
 left: 0;
 bottom: 0;
 width: 80%;
 height: 30%;
 background-color: lightseagreen;
 z-index: 4;
}

/* Boat************************* */
.animation__boat {
 position: absolute;
 left: 30%;
 bottom: 92%;
 width: 5%;
 -webkit-transform: translateX(0) translateY(0) scale(0.2);
     -ms-transform: translateX(0) translateY(0) scale(0.2);
         transform: translateX(0) translateY(0) scale(0.2);
 -webkit-animation: boat 800s infinite linear both;
         animation: boat 800s infinite linear both;
}

.animation__boat img {
 width: 100%;
}

/* Sun******************************* */
.animation__sun {
 position: absolute;
 left: -150px;
 bottom: 60px;
 width: 5vh;
 height: 5vh;
 background-color: rgb(255, 174, 0);
 -webkit-box-shadow: 0 0 0px 0px rgb(255, 174, 0);
         box-shadow: 0 0 0px 0px rgb(255, 174, 0);
 border-radius: 50%;
 z-index: 0;
 -webkit-transform: translateX(0) translateY(0) scale(1);
     -ms-transform: translateX(0) translateY(0) scale(1);
         transform: translateX(0) translateY(0) scale(1);
 -webkit-animation: sun 300s linear both infinite;
         animation: sun 300s linear both infinite;
}

/* Night****************************** */

.animation__night {
 position: absolute;
 width: 100%;
 height: 100%;
 z-index: 180;
 background-color: rgba(0, 0, 0, 0.8);
 -webkit-animation: night 300s linear both infinite;
         animation: night 300s linear both infinite;
}

/* lighthouse************************* */
.animation__lighthouse {
 position: absolute;
 bottom: 96%;
 right: 35%;
 width: 67%;
}

.animation__lighthouse img {
 width: 100%;
}

.animation__lighthouse__light {
 position: absolute;
 left: 41%;
 top: -3%;
 width: 30px;
 height: 30px;
 border-radius: 50%;
 background-color: transparent;
 -webkit-box-shadow: 0 0 0px 0px transparent;
         box-shadow: 0 0 0px 0px transparent;
 -webkit-transform: scale(1);
     -ms-transform: scale(1);
         transform: scale(1);
 -webkit-animation: light 310s linear both infinite;
         animation: light 310s linear both infinite;
}

/* Trees /twigs**************************/
.animation__tree {
 position: absolute;
}

.animation__tree img {
 width: 100%;
}

.animation__tree--twig {
 position: absolute;
 right: 0%;
 bottom: -10%;
 width: 35%;
 z-index: 170;
 -webkit-transform-origin: 100% 100%;
     -ms-transform-origin: 100% 100%;
         transform-origin: 100% 100%;
 -webkit-transform: rotate(0deg);
     -ms-transform: rotate(0deg);
         transform: rotate(0deg);
 -webkit-animation: twig 3s linear alternate infinite;
         animation: twig 3s linear alternate infinite;
}

.animation__tree--twig2 {
 position: absolute;
 right: 10%;
 bottom: -8%;
 width: 20%;
 z-index: 170;
 -webkit-transform-origin: 100% 100%;
     -ms-transform-origin: 100% 100%;
         transform-origin: 100% 100%;
 -webkit-transform: rotate(0deg);
     -ms-transform: rotate(0deg);
         transform: rotate(0deg);
 -webkit-animation: twig 3.5s linear alternate infinite;
         animation: twig 3.5s linear alternate infinite;
}

.animation__tree--twig3 {
 position: absolute;
 right: 20%;
 bottom: -10%;
 width: 25%;
 z-index: 170;
 -webkit-transform-origin: 100% 100%;
     -ms-transform-origin: 100% 100%;
         transform-origin: 100% 100%;
 -webkit-transform: rotate(0deg);
     -ms-transform: rotate(0deg);
         transform: rotate(0deg);
 -webkit-animation: twig 4s linear alternate infinite;
         animation: twig 4s linear alternate infinite;
}

.animation__tree--twig4 {
 position: absolute;
 right: -0%;
 bottom: -20%;
 width: 30%;
 z-index: 170;
 -webkit-transform-origin: 100% 100%;
     -ms-transform-origin: 100% 100%;
         transform-origin: 100% 100%;
 -webkit-transform: rotate(0deg);
     -ms-transform: rotate(0deg);
         transform: rotate(0deg);
 -webkit-animation: twig 3s linear alternate infinite;
         animation: twig 3s linear alternate infinite;
}

.animation__tree--twig5 {
 position: absolute;
 right: -15%;
 bottom: -10%;
 width: 35%;
 z-index: 170;
 -webkit-transform-origin: 100% 100%;
     -ms-transform-origin: 100% 100%;
         transform-origin: 100% 100%;
 -webkit-transform: rotate(0deg);
     -ms-transform: rotate(0deg);
         transform: rotate(0deg);
 -webkit-animation: twig 4s linear alternate infinite;
         animation: twig 4s linear alternate infinite;
}

/* Trees small************************* */
.animation__tree--1 {
 bottom: 96%;
 right: 29%;
 width: 13%;
}

.animation__tree--2 {
 bottom: 96%;
 right: 20%;
 width: 13%;
}

.animation__tree--3 {
 bottom: 96%;
 right: 15%;
 width: 13%;
}

.animation__tree--4 {
 bottom: 96%;
 right: 10%;
 width: 13%;
}

.animation__tree--5 {
 bottom: 96%;
 right: 8%;
 width: 13%;
}

.animation__tree--6 {
 bottom: 96%;
 right: 2%;
 width: 13%;
}

.animation__tree--7 {
 bottom: 96%;
 right: -2%;
 width: 13%;
}

.animation__tree--8 {
 bottom: 85%;
 right: 45%;
 width: 15%;
}

.animation__tree--9 {
 bottom: 85%;
 right: 35%;
 width: 15%;
}

.animation__tree--10 {
 bottom: 85%;
 right: 29%;
 width: 15%;
}

.animation__tree--11 {
 bottom: 85%;
 right: 20%;
 width: 15%;
}

.animation__tree--12 {
 bottom: 85%;
 right: 15%;
 width: 15%;
}

.animation__tree--13 {
 bottom: 85%;
 right: 10%;
 width: 15%;
}

.animation__tree--14 {
 bottom: 85%;
 right: 5%;
 width: 15%;
}

.animation__tree--15 {
 bottom: 85%;
 right: -5%;
 width: 15%;
}

.animation__tree--16 {
 bottom: 75%;
 right: 29%;
 width: 17%;
}

.animation__tree--17 {
 bottom: 75%;
 right: 20%;
 width: 17%;
}

.animation__tree--18 {
 bottom: 65%;
 right: 15%;
 width: 18%;
}

.animation__tree--19 {
 bottom: 65%;
 right: 10%;
 width: 18%;
}

.animation__tree--20 {
 bottom: 65%;
 right: 5%;
 width: 18%;
}

.animation__tree--21 {
 bottom: 55%;
 right: 5%;
 width: 19%;
}

.animation__tree--22 {
 bottom: 55%;
 right: -5%;
 width: 20%;
}

.animation__tree--23 {
 bottom: 45%;
 right: 5%;
 width: 20%;
}

.animation__tree--24 {
 bottom: 85%;
 right: 93%;
 width: 15%;
}

.animation__tree--25 {
 bottom: 35%;
 right: -5%;
 width: 22%;
}

.animation__tree--26 {
 bottom: 79%;
 right: 85%;
 width: 15%;
}

.animation__sky {
 position: absolute;
 left: 0;
 top: 40%;
 width: 100%;
 height: 30%;
 -webkit-transform: translate(0);
     -ms-transform: translate(0);
         transform: translate(0);
 -webkit-animation: clouds 200s linear both infinite;
         animation: clouds 200s linear both infinite;
}

.animation__sky--second {
 position: absolute;
 left: -100%;
 top: 40%;
 width: 100%;
 height: 30%;
 -webkit-transform: translate(0);
     -ms-transform: translate(0);
         transform: translate(0);
 -webkit-animation: clouds 200s linear both infinite;
         animation: clouds 200s linear both infinite;
}

.cloud {
 position: absolute;
 width: 5%;
}

.cloud img {
 width: 100%;
}

.cloud__first {
 left: 10%;
 top: 60%;
}

.cloud__second {
 left: 40%;
 top: 50%;
}

.cloud__third {
 left: 30%;
 top: 20%;
}

.cloud__fourth {
 left: 60%;
 top: 50%;
}

.cloud__fifth {
 left: 15%;
 top: 70%;
}

.cloud__sixth {
 left: 60%;
 top: 90%;
}

.cloud__seventh {
 left: 92%;
 top: 21%;
}

.cloud__eight {
 left: 73%;
 top: 0%;
}

.cloud__ninth {
 left: 3%;
 top: 90%;
}

.cloud__tenth {
 left: 37%;
 top: 50%;
}

.cloud__eleventh {
 left: 0%;
 top: 88%;
}

.cloud__twelfth {
 left: 60%;
 top: 56%;
 -webkit-transform: rotate(162deg);
     -ms-transform: rotate(162deg);
         transform: rotate(162deg);
}

audio {
 position: fixed;
 top: 0;
 left: 50%;
 -webkit-transform: translateX(-50%);
     -ms-transform: translateX(-50%);
         transform: translateX(-50%);
 z-index: 3000;
}

@media(max-width:1024px) {
 .animation__lighthouse__light {
  left: 38%;
 }

 .animation__tree--twig {
  bottom: 0%;
 }

 .animation__tree--twig2 {
  right: 0%;
 }

 .animation__tree--twig3 {
  right: 14%;
  bottom: -5%;
 }

 .animation__tree--twig4 {
  right: 1%;
  bottom: -9%;
 }

 .animation__tree--twig5 {
  right: -16%;
  bottom: -7%;
 }
}

@media(max-width:480px) {
 .animation__lighthouse__light {
  left: 28%;
  top: -10%;
 }

 .animation__tree--twig {
  bottom: -3%;
  right: 3%;
  width: 55%;
 }

 .animation__tree--twig3 {
  right: 15%;
  bottom: -4%;
  width: 50%;
  -webkit-transform: rotate(-10deg);
      -ms-transform: rotate(-10deg);
          transform: rotate(-10deg);
 }

 .animation__tree--twig4 {
  right: -11%;
  bottom: -3%;
  width: 45%;
 }

 .animation__tree--twig5 {
  right: -10%;
  bottom: 4%;
  width: 70%;
  -webkit-transform: rotate(20deg);
      -ms-transform: rotate(20deg);
          transform: rotate(20deg);
 }
}