
/* 1st animation */
#Animation1 {
    margin: auto;
    width: 200px;
    height: 400px;
    background: url("/web3/img/Animation1.png");
    animation: play 0.8s steps(12) infinite;
    background-size: cover;
}

@keyframes play {
    from { 
        background-position: 0px; 
    }
    to { 
        background-position: -2400px; 
    }
}
 /* 2nd animation */
 #Animation2 {
    position: relative;
    background-image: url(/web3/img/2.png);
    background-repeat: no-repeat;
    background-size: cover;
    width: 400px;
    height: 400px;
    margin:auto;
    overflow:hidden;
  } 
  
  #Animation2 article {
    position: absolute;
    top: 0px;
    width: 100%;
  }
  
  #court {
    position: relative;
    overflow: hidden;
    top: 80px;
    width: 100%; height: 20px;
    background: #eeeeee00;
    /* border: solid black 2px; */
  }
  #star {
    position: absolute;
    /* right: 300px; */
    width: 21px; height: 18px;
    /* border-radius: 50%; */
    background-image: url(/web3/img/starmove.png);
    background-repeat: no-repeat;
  }
/* 3rd animation */
#bonk {
  position: absolute;
  background-image: url(/web3/img/newstar.png);
  background-repeat: no-repeat;
  height:19px;
  width: 21px;
} 

svg {
    opacity:0%;
}

#Animation3 {
  position: relative;
  margin:auto;
  overflow: hidden;
  height: 400px;
  width: 400px;
  background-image: url(/web3/img/pathhhh.png);
  background-repeat: no-repeat;
  background-size: cover;
}
/* 4th animation */
#star1 {
    position: absolute;
    background-image: url(/web3/img/star1.png);
    background-repeat: no-repeat;
    background-size: cover;
    height:15px;
    width: 15px;
  }
  
  #star2 {
    position: absolute;
    background-image: url(/web3/img/star2.png);
    background-repeat: no-repeat;
    height:25px;
    width: 25px; 
  }
  
  svg {
      opacity:0%;
  }
  
  #Animation4 {
    position: relative;
    margin:auto;
    overflow: hidden;
    height: 400px;
    width: 400px;
    background-image: url(/web3/img/4.png);
    background-repeat: no-repeat;
    background-size: cover;
  }

