/*--------------------background--------------------*/

body{
  background: linear-gradient(to top, #CCFFFF, #0099CC 73%, #006699 100%) top center/cover no-repeat fixed;
  position: relative;
  /* background: linear-gradient(to top, #ffffff, #bddfec 50%, #add3e6 100%) top center/cover no-repeat fixed; */
}

body::before{
  --translateInitial: -100%;
  content: "";
  background: url(../img/cloud.svg) center center/contain no-repeat;
  position: fixed;
  bottom: 30px;
  width: 500px;
  height: 300px;
  transform: translate(var(--translateInitial));
  animation: cloud1 8s linear infinite 4s;
  z-index: -1;
}

body::after{
  --translateInitial: -500%;
  background: url(../img/cloud.svg) center center/contain no-repeat;
  content: "";
  position: fixed;
  top: 30px;
  right: -150px;
  width: 500px;
  height: 300px;
  transition: 5s translate;
  /* transform: translate(250px); */
  transform: translate(var(--translateInitial));
  animation: cloud1 12s linear infinite;
  z-index: -1;
}

@keyframes cloud1 {
  from{
    transform: translate(var(--translateInitial));
  }
  to{
    transform: translate(calc(100vw + 500px) , 0);
  }
}

@media screen and (max-width: 450px) {
  body::after, body:before{
    width: 150px;
    height: 50px;
  }
}