body {
  margin: 0;
  height: 100vh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background-color: #87CEEB;
  position: relative;
}

.silta {
  position: absolute;
  bottom: 0;
  left: -25vw;
  width: 150vw;
  height: 45vh;
  background-color: #c0c0c0;
  transform: rotate(6.5deg);
  transform-origin: bottom left;
  overflow: hidden;
  z-index: 2;
}

.tie {
  position: absolute;
  bottom: 0px;
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, #4a483d 0%, #4c4f48 30%);
  z-index: 2;
}

.auto {
  content:url(volvo1.gif);
  height: 30vh;
  position: absolute;
  bottom: 12.5vh;
  left: 20%;
  transform: translateX(-50%);
  transform: rotate(6deg);
  z-index: 2;
}

.auto img { height: 30vh; }

.viivat {
  opacity: 0.5;
  position: absolute;
  bottom: 20vh;
  width: 200%;
  height: 5%;
  background: repeating-linear-gradient(90deg, white 0%, white 10%, transparent 10%, transparent 20%);
  animation: viivat linear 4s;
  animation-iteration-count: infinite;
  z-index: 2;
}

.reuna {
  background-color: #969696;
  position: absolute;
  bottom: 40vh;
  width: 200%;
  height: 12%;
  z-index: 2;
}

.palkki {
  position: absolute;
  top: 0;
  width: 200vw;
  height: 1vh;
  background-color: #AFAFAF;
  border-top: 2px solid #969696;
  z-index: 2;
}

@keyframes viivat {
  0% {transform: translate(0px, 0px);}
  100% {transform: translate(-40%, 0px);}
}

.tausta {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh; 
}

.taivas { position: absolute; top: 0; width: 100vw; height: 35vh; background: linear-gradient(#87CEEB, #add8e6); }
.meri { position: absolute; top: 35vh; width: 100vw; height: 65vh; background: linear-gradient(#add8e6, #87CEEB); border-top: 1px solid #828EA3;  z-index: 1; }



.vuoristo {
  position: absolute;
  top: 15.5vh;
  height: 20vh;
  width: 200vw;
  clip-path: polygon(0% 100%, 100% 100%, 95% 75%, 93% 85%, 80% 50%, 60% 85%, 50% 70%, 40% 40%, 25% 85%, 12% 60%);
  background: linear-gradient(#828EA3,#8399AF);
  animation: vuoret linear 240s;
  animation-iteration-count: infinite;
  overflow: hidden;
  z-index: 3;
}

.varjot {
  position: absolute;
  top: 15.5vh;
  height: 20vh;
  width: 200vw;
 clip-path: polygon(0% 100%, 100% 100%, 95% 75%, 92% 75%, 80% 50%, 60% 75%, 50% 62.5%, 40% 40%, 35% 90%, 12% 60%);
  background: linear-gradient(#93A8C1, #A4C4DB);
  animation: vuoret linear 240s;
  animation-iteration-count: infinite;
  overflow: hidden;
  z-index:2;
}


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

.heijastus {
  position: absolute;

  top: 0vh;
  height: 15vh;
  width: 200vw;
  clip-path: polygon(4% 0%, 98% 0%, 95% 22%, 94% 10%, 80% 40%, 60% 30%, 50% 20%, 48% 30%, 40% 66%, 25% 15%, 12% 40%);
  background: linear-gradient(#A0C8DA,#A4CBDB);
  animation: vuoret linear 240s;
  animation-iteration-count: infinite;
  overflow:hidden;
  z-index:3;
}

.aurinko {
  z-index: 1;
  position: absolute;
  top: 5vh;
  right: 0; 
  height: 50vh;
  width: 50vh; 
  background: radial-gradient(circle, #FFEE9B, #FFF2BA); 
  border-radius: 50%; 
  clip-path: inset(0 0 50% 0); 
}

.arska {
  z-index: 1;
  opacity: 0.3;
  position: absolute;
  bottom: 45vh;
  right: 0; 
  height: 50vh;
  width: 50vh; 
  background: radial-gradient(circle, #FFEE9B, #FFF2BA); 
  border-radius: 50%; 
  clip-path: inset(50% 0 0 0); 
  z-index: 2;
}