body {
    margin: 0;
    overflow: hidden;
    /*background: #151B26;*/
    background-image: url(./Mountain-range.jpg);
  }

/*Clouds*/
#cloud1{
    /*background: coral;*/
    margin: -305px 0 0 -150px;
    border-radius: 50%;
    width: 100vw;
    height: 280px;
    filter: url(#filter-back);
    box-shadow: 200px 200px 50px 0px #153240  ;
    position: absolute;
    z-index: 3;
    animation: cloudeMove 30s ease infinite;
  }
#cloud2{
    /*background: coral;*/
    margin: -235px 0 0 -150px;
    border-radius: 50%;
    width: 100vw;
    height: 260px;
    filter: url(#filter-mid);
    box-shadow: 200px 200px 50px 0px #607D8F;
    position: absolute;
    z-index: 2;
    animation: cloudeMove 30s ease  infinite;
  }
#cloud3{
    /*background: coral;*/
    margin: -225px 0 0 -150px;
    border-radius: 50%;
    width: 100vw;
    height: 240px;
    filter: url(#filter-front);
    box-shadow: 200px 200px 50px 0px #ABC1CF;
    position: absolute;
    z-index: 1;
    animation: cloudeMove 30s ease infinite;
  }

@keyframes cloudeMove{
    50%{
        transform: translateX(40px);
    }
    100%{
      transform: translateX(-40px);
    } 
}

/*lightnings*/
#lightning {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1;
}
#lightning::before{
    content: "";
  opacity: 0;
  will-change: transform;
  position: absolute;
  width: 272px;
  background-image: url(https://raw.githubusercontent.com/SochavaAG/example-mycode/master/pens/sparks/images/lightning-1.png);

  top:25px;
  left: 20%;
  animation: lightning1 30s linear 3s infinite;
}
#lightning::after{
    content: "";
  opacity: 0;
  will-change: transform;
  position: absolute;
  width: 254px;
  background-image: url(https://raw.githubusercontent.com/SochavaAG/example-mycode/master/pens/sparks/images/lightning-2.png);
 float: right;
  top: 45px;
  right: 25%;
  animation: lightning2 30s linear 3s infinite;
}
@keyframes lightning1 {
    0%, 6.75% {
      height: 0;
      opacity: 0;
    }
    6.8% {
      height: 22.375em;
      opacity: 1;
    }
    7.6% {
      opacity: 0;
    }
    7.7% {
      height: 21.375em;
    }
    7.8%, 49.9% {
      height: 0;
    }
    50% {
      height: 22.375em;
      opacity: 1;
    }
    51% {
      opacity: 0;
    }
    100% {
      opacity: 0;
    }
  }
@keyframes lightning2 {
    0% {
      height: 0;
      opacity: 0;
    }
    1.66% {
      height: 22em;
      opacity: 1;
    }
    1.9% {
      opacity: 0;
    }
    2.66% {
      opacity: 0;
    }
    3.2% {
      opacity: 1;
    }
    3.4% {
      opacity: 0;
    }
    7.8%, 76.9% {
      height: 0;
    }
    77% {
      height: 24em;
      opacity: 1;
    }
    78.5%, 100% {
      opacity: 0;
    }
  }