@charset "utf-8";
/* CSS Document */

.sakura{
  display: inline-block;
  position:fixed;
  top:0;
  left:0;
  width: 100%;
  height:100%;
  z-index:2;
  /*upgrade gpu rendering*/
  transform:translateZ(0);
  pointer-events: none;}

.sakura li{
  position:absolute;
  list-style:none;
  display:block;
  /*make bubble on page bottom*/
  bottom:-100px; 
  background-repeat: no-repeat;
  animation:sakura-ani 20s linear infinite;}

.sakura li:nth-child(1){
  width:20px;
  height:20px;
  left:15%;
  background-image: url("../images/sakura01.png");}

.sakura li:nth-child(2){
  width:40px;
  height:40px;
  left:40%;
  animation-duration:13s;
  animation-delay:2s;
  background-image: url("../images/sakura02.png");}

.sakura li:nth-child(3){
  width:25px;
  height:25px;
  left:30%;
  animation-duration:18s;
  animation-delay:3.5s;
  background-image: url("../images/sakura05.png");}

.sakura li:nth-child(4){
  width:35px;
  height:35px;
  left:55%;
  animation-duration:23s;
  animation-delay:1.5s;
  background-size: contain;
  background-image: url("../images/sakura04.png");}

.sakura li:nth-child(5){
  width:20px;
  height:20px;
  left:35%;
  animation-duration:16s;
  animation-delay:2s;
  background-image: url("../images/sakura03.png");}

.sakura li:nth-child(6){
  width:30px;
  height:30px;
  left:75%;
  animation-duration:8s;
  animation-delay:3s;
  background-image: url("../images/sakura02.png");}

.sakura li:nth-child(7){
  width:25px;
  height:25px;
  left:80%;
  animation-duration:10s;
  animation-delay:1.5s;
  background-image: url("../images/sakura01.png");}

.sakura li:nth-child(8){
  width:25px;
  height:25px;
  left:90%;
  animation-duration:25s;
  animation-delay:3s;
  background-image: url("../images/sakura05.png");}


@keyframes sakura-ani {
  0%{
    -webkit-transform:translateY(-1200px) rotate(0deg);
    transform:translateY(-1200px) rotate(0deg);
  }
  100%{
    -webkit-transform:translateX(20%) translateY(0px) rotate(360deg);
    transform:translateX(20%) translateY(0px) rotate(360deg);
  }
}