body,html { 
 padding: 0;
 margin: 0;
}

.taivas {
 top: 0;
 position: absolute;
 height: 50%;
 width: 100%;
 background: rgb(255,255,255);
background: radial-gradient(circle, rgba(255,255,255,1) 11%, rgba(178,223,255,1) 60%); 
 z-index: 1;
}

.vuoret {
 top: 25%;
 position: absolute;
 height: 50%;
 width: 100%;
 clip-path: polygon(0% 0%, 19% 19%, 35% 10%, 65% 38%, 100% 50%, 65% 51%, 50% 60%, 25% 75%, 0% 100%);
 background: rgb(255,127,127);
 background: linear-gradient(180deg, rgba(255,127,127,1) 0%, rgba(204,102,102,1) 57%); 
 z-index: 5; 
}

.alaosa {
 position: absolute;
 height: 50%;
 width: 100%;
 bottom: 0;
 overflow: hidden;
}

.ranta { 
 height: 100%;
 width: 100%;
 background-color: #FFCCAA;
 z-index: 4;
 bottom: 0;
}

.vuoriraja {
 position: absolute;
 height: 365%;
 width: 25%;
 background-color: #EB9860;
 bottom: -110%;
 left: 5%;
 clip-path: url(#rantaviiva2);
 rotate: -105deg;
 transform: skew(2deg, -70deg);
 opacity: 0.5;
}

.ranta2 {
 position: absolute;
 height: 100%;
 width: 40%;
 right: 30px;
 bottom: 0;
 clip-path: url(#rantaviiva2);
 background: rgb(255,204,170);
 background: linear-gradient(90deg, rgba(255,204,170,1) 0%, rgba(228,133,70,1) 44%); 
 opacity: 0.9;
 transform: skew(-15deg, 0deg);
}

.kuohu {
 position: absolute;
 height: 100%;
 width: 40%;
 clip-path: url(#rantaviiva);
 background-color: #D7E2EF;
 z-index: 3;
 bottom: 0;
 right: 0;
 transform: translate(0, 0);
 animation: liike 12s infinite ease-in-out;
}

.meri { 
 position: absolute;
 height: 100%;
 width: 40%;
 clip-path: url(#rantaviiva);
 background-color: #60BDFF;
 z-index: 3;
 bottom: 0;
 right: -10px;
 transform: translate(0, 0);
 animation: liiku 10s infinite ease-in-out;
}

@keyframes liiku {
  0% { transform: translate(-2%, 0); }  
  50% { transform: translate(2%, 0); } 
  100% { transform: translate(-2%, 0); } 
}

@keyframes liike {
  0% { transform: translate(-4%, 0); }  
  50% { transform: translate(3%, 0); } 
  100% { transform: translate(-4%, 0); } 
}