@charset "utf-8";

.fuwafuwa {
  position: absolute;
  border-radius: 50%;
  background-color: #fffbc7;
  animation-duration: 9000ms;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

/* --------------------------------------
1
-------------------------------------- */

.fuwafuwa:nth-of-type(1) {
  width: 100px;
  height: 100px;
  margin: 20px 0 0 30px;
  animation-name: float-1;
}

@keyframes float-1 {
  0% {
    opacity: .6;
    transform: rotate(0deg) translateX(20px) rotate(0deg);
  }

  50% {
    transform: rotate(180deg) translateX(20px) rotate(-180deg);
    width: 110px;
    height: 110px;
  }


  100% {
    opacity: .7;
    transform: rotate(360deg) translateX(20px) rotate(-360deg);
  }
}

@media screen and (min-width:1025px) {
  .fuwafuwa:nth-of-type(1) {
    width: 200px;
    height: 200px;
    margin: 110px 0 0 190px;
  }

  @keyframes float-1 {
    0% {
      opacity: .9;
    }

    50% {
      width: 190px;
      height: 190px;
    }


    100% {
      opacity: .9;
      transform: rotate(360deg) translateX(20px) rotate(-360deg);
    }
  }
}

/* --------------------------------------
2
-------------------------------------- */

.fuwafuwa:nth-of-type(2) {
  width: 90px;
  height: 90px;
  margin: -40px 0 0 240px;
  animation-name: float-2;
}

@keyframes float-2 {
  0% {
    transform: translateX(10px, 0);
  }

  50% {
    opacity: .4;
    transform: translate(15px, 5px);
    width: 110px;
    height: 110px;
  }

  100% {
    transform: translateX(10px, 0);
  }
}

@media screen and (min-width:768px) {
  .fuwafuwa:nth-of-type(2) {
    width: 290px;
    height: 290px;
  }
  @keyframes float-2 {
    0% {
      transform: translateX(50px, 0);
    }

    50% {
      opacity: .4;
      transform: translate(75px, 10px);
      width: 280px;
      height: 280px;
    }

    100% {
      transform: translateX(50px, 0);
    }
  }
}

@media screen and (min-width:1025px) {
  .fuwafuwa:nth-of-type(2) {
    width: 200px;
    height: 200px;
    margin: -30px 0 0 500px;
    animation-name: float-2;
  }

  @keyframes float-2 {
    50% {
      width: 180px;
      height: 180px;
    }
  }
}

/* --------------------------------------
3
-------------------------------------- */

.fuwafuwa:nth-of-type(3) {
  top: 150px;
  right: 20px;
  width: 80px;
  height: 80px;
  animation-name: float-3;
}

@keyframes float-3 {
  0% {
    transform: translateX(10px, 0);
  }

  30% {
    opacity: 0;
    transform: translate(-30px, 10px);
  }

  50% {
    transform: translate(-30px, 10px);
    width: 50px;
    height: 50px;
  }

  100% {
    transform: translateX(10px, 0);
  }
}

/* --------------------------------------
4
-------------------------------------- */

.fuwafuwa:nth-of-type(4) {
  top: 300px;
  right: 50px;
  width: 100px;
  height: 100px;
  animation-name: float-4;
}

@keyframes float-4 {
  0% {
    transform: translateX(10px, 0);
  }

  30% {
    opacity: .7;
    transform: translate(-30px, 10px);
  }

  50% {
    transform: translate(-30px, 10px);
    width: 50px;
    height: 50px;
  }

  100% {
    transform: translateX(10px, 0);
  }
}

@media screen and (min-width:768px) {
  .fuwafuwa:nth-of-type(4) {
    top: 800px;
    width: 200px;
    height: 200px;
  }
  @keyframes float-4 {
      0% {
    transform: rotate(0) translate(30px, 0) rotate(0);
  }
  50% {
    width: 120px;
    height: 120px;
    opacity: 0.2;
    transform: rotate(-180deg) translate(10px, 0) rotate(180deg);
  }
    100% {
    transform: rotate(-360deg) translate(30px, 0) rotate(360deg);
  }
}
}

/* --------------------------------------
5
-------------------------------------- */

.fuwafuwa:nth-of-type(5) {
  top: 500px;
  right: 70px;
  width: 100px;
  height: 100px;
  animation-name: float-5;
}

@keyframes float-5 {
  0% {
    transform: translateX(10px, 0);
  }

  30% {
    opacity: .7;
    transform: translate(-30px, 10px);
  }

  50% {
    transform: translate(-30px, 10px);
    width: 50px;
    height: 50px;
  }

  100% {
    transform: translateX(10px, 0);
  }
}

/* --------------------------------------
6
-------------------------------------- */

.fuwafuwa:nth-of-type(6) {
  top: 500px;
  left: 10px;
  width: 150px;
  height: 150px;
  animation-name: float-6;
}

@keyframes float-6 {
  0% {
    transform: rotate(360deg) translate(10px, 0) rotate(-360deg);
  }

  50% {
    transform: rotate(180deg) translate(5px, 0) rotate(-180deg);
    width: 130px;
    height: 130px;
  }

  100% {
    transform: rotate(0) translate(10px, 0) rotate(0);
  }
}

@media screen and (min-width:1025px) {
  .fuwafuwa:nth-of-type(6) {
    left: 400px;
  }
}

/* --------------------------------------
7
-------------------------------------- */

.fuwafuwa:nth-of-type(7) {
  top: 290px;
  left: -60px;
  width: 200px;
  height: 200px;
  animation-name: float-7;
}

@keyframes float-7 {
  0% {
    opacity: .2;
    transform: rotate(0) translate(10px, 0) rotate(0);
  }

  50% {
    opacity: 1;
    transform: rotate(180deg) translate(5px, 0) rotate(-180deg);
    width: 210px;
    height: 210px;
  }

  100% {
    opacity: .2;
    transform: rotate(360deg) translate(10px, 0) rotate(-360deg);
  }
}

@media screen and (min-width:1025px) {
  .fuwafuwa:nth-of-type(7) {
    top: 400px;
    left: 100px;
    width: 400px;
    height: 400px;
  }
}

/* --------------------------------------
8
-------------------------------------- */

.fuwafuwa:nth-of-type(8) {
  top: 290px;
  right: 10px;
  width: 80px;
  height: 80px;
  animation-name: float-8;
}

@keyframes float-8 {
  0% {
    opacity: .2;
    transform: rotate(0) translate(10px, 0) rotate(0);
  }

  50% {
    opacity: 1;
    transform: rotate(180deg) translate(5px, 0) rotate(-180deg);
    width: 90px;
    height: 90px;
  }

  100% {
    opacity: .2;
    transform: rotate(360deg) translate(10px, 0) rotate(-360deg);
  }
}

@media screen and (min-width:1025px) {
  .fuwafuwa:nth-of-type(8) {
    right: 180px;
    width: 300px;
    height: 300px;
  }

  @keyframes float-8 {
    0% {
      transform: rotate(0) translateX(20px) rotate(0);
    }
    50% {
      opacity: 0.8;
      width: 250px;
      height: 250px;
      transform: rotate(180deg) translateX(50px) rotate(-180deg);
    }
    100% {
      transform: rotate(360deg) translateX(20px) rotate(-360deg);
    }
  }
}