html,body{
    background-image: url("https://d2w9rnfcy7mm78.cloudfront.net/32487525/original_40e3c2dd8dcd9e4c80881dd82944f2c6.png?1732502636?bc=0");
    cursor:none;
  height:100%;
    margin:0;
  } 
  
  h1{
    font-size:50px;
    font-family:futura;
    letter-spacing: 5px;
    text-align:center;
    opacity:.8;
    margin:100px;
    margin-top:200px;
    animation: myAnim 3s ease 0s 1 normal forwards;
    animation-fill-mode:both;
    
  }
  @keyframes myAnim {
      0% {
          opacity: .8;
          
      }
  
      100% {
          opacity: 0.01;
          
      }
  }
  h2{
    font-size:40px;
    font-family:futura;
    letter-spacing: 5px;
    text-align:center;
    opacity:.8;
    margin-top:100px;
    animation: myAnim2 2s ease 3s 1 normal forwards;
    animation-fill-mode:both;
    
  }
  @keyframes myAnim2 {
  
          0% {
          opacity: 0;
    }
    50%{
      opacity:.8;
    }
  
      100%{
          opacity:.07;
      }
  
  }
  
  .showyourself{
    display:flex;
     justify-content: center;
    align-items: center;
    
  }
  
  button{
    padding:12px;
    border:none;
    background-color:transparent;
    opacity:.5;
  position:relative;
    text-align:center; 
    width:400px;
    animation: myAnimbutton 1.5s ease 5.2s 9 alternate forwards;
    animation-fill-mode:both;
  
  }
  @keyframes myAnimbutton {
      0%,
      50%,
      100% {
          opacity: 0;
      }
  
      25%,
      75% {
          opacity: 1;
      }
    
  }
  
  img{
    height:50px;
    width:200px;
     position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    
    
  }
  span {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color:#e5d4d4;
    font-size:18px;
     animation: myAnimspan 2s ease 11s 1 normal;
  }
  @keyframes myAnimspan{
    0%{color:#e5d4d4;}
    100%{color:#f80a7c}
  }
  
  .cursor1{
      height:20px;
    width:15px;
    background: url("https://pngimg.com/d/cursor_PNG89.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
     animation: myAnim3 3s ease 7s 1 normal forwards;
    animation-fill-mode:both;
  }
  @keyframes myAnim3 {
      0% {
      opacity:0;
          transform: translateX(0);
      }
    20%{
      opacity:0;
      transform: translateX(0);
    }
    30% {
      opacity:1;
          transform: translateX(150px) translateY(-50px);
      }
    
      50% {
       opacity:1;
          transform: translateX(400px) translateY(-250px);
      
      }
      60% {
      opacity:1;
          transform: translateX(500px) translateY(-300px);
      }
    70% {
       opacity:1;
          transform: translateX(520px) translateY(-400px);
      
      }
      80% {
      opacity:1;
          transform: translateX(540px) translateY(-350px);
      }
   
    90% {
       opacity:1;
          transform: translateX(560px) translateY(-200px);  
      }
      100% {
       opacity:0;
          transform: translateX(150px) translateY(-50px);  
      }
  
  }
  .cursor2{
      height:20px;
    width:15px;
    background: url("https://pngimg.com/d/cursor_PNG89.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
     animation: myAnim4 2s ease 10s 1 normal backwards;
     animation-fill-mode:both;
  }
  @keyframes myAnim4 {
      0% {
      opacity:0;
          transform: translateX(0);
      }
    20%{
      opacity:0;
      transform: translateX(300px) translateY(-100)px; 
    }
    30%{
      opacity:1;
       transform: translateX(300px) translateY(-100)px; 
    }
      60% {
      opacity:1;
          transform: translateX(600px) translateY(-400px);
      }
  
      80% {
      opacity:1;
          transform: translateX(500px) translateY(-800);
      }
    
   
    95% {
       opacity:1;
          transform: translateX(600px) translateY(-950px);
    }
      100% {
      opacity:0;
          transform: translateX(300px) translateY(-100);
      }
  }
  
  .cursor3{
     height:20px;
    width:15px;
    background: url("https://pngimg.com/d/cursor_PNG89.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
     animation: myAnim5 2s ease 12s 1 normal backwards;
     animation-fill-mode:both;
  }
  @keyframes myAnim5 {
  
    0%{
      opacity:0;
      transform: translateX(600px) translateY(-800)px; 
    }
   
      60% {
      opacity:1;
          transform: translateX(100px) translateY(-920px);
      }
  
   
    100% {
       opacity:1;
          transform: translateX(20px) translateY(-1050px);
    }
  }
  
  .cursorsb{
    display:flex;
    gap:300px;
    margin-left:200px;
    margin-top:-300px;
      
  }
  
  
  .cursor4{
    height:20px;
    width:15px;
    background: url("https://pngimg.com/d/cursor_PNG89.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
     animation: myAnim6 2s ease 7s 1 normal forwards;
     animation-fill-mode:both;
  }
  @keyframes myAnim6 {
  
    0%{
      opacity:0;
      transform: translateX(0px) translateY(200)px; 
    }
   
      60% {
      opacity:1;
          transform: translateX(-300px) translateY(-920px);
      }
   
    100% {
       opacity:1;
          transform: translateX(-600px) translateY(-1050px);
    }
  }
  
  
  .cursor5{
     height:20px;
    width:15px;
    background: url("https://pngimg.com/d/cursor_PNG89.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
     animation: myAnim7 2s ease 9s 1 normal backwards;
     animation-fill-mode:both;
  }
  @keyframes myAnim7 {
  
    0%{
      opacity:0;
      transform: translateX(0px) translateY(200)px; 
    }
    20%{
      opacity:1;
       transform: translateX(-100px) translateY(800)px; 
    }
   
      60% {
      opacity:1;
          transform: translateX(-300px) translateY(920px);
      }
  
   
    100% {
       opacity:1;
          transform: translateX(-200px) translateY(1000px);
    }
  }
  
  
  .cursor6{
    height:20px;
    width:15px;
    background: url("https://pngimg.com/d/cursor_PNG89.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
     animation: myAnim8 2s ease 8s 1 normal forwards;
     animation-fill-mode:both;
  }
  @keyframes myAnim8 {
  
    0%{
      opacity:0;
      transform: translateX(0px) translateY(200px); 
    }
    20%{
      opacity:1;
       transform: translateX(200px) translateY(500px); 
    }
   
      60% {
      opacity:1;
          transform: translateX(500px) translateY(620px);
      }
  
   
    100% {
       opacity:1;
          transform: translateX(-750px) translateY(800px);
    }
  }
  
  
  .cursorsc{ 
    margin-left:1300px;
  }
  
  .cursor7{
    margin-top:-80px;
   height:20px;
    width:15px;
    background: url("https://pngimg.com/d/cursor_PNG89.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
     animation: myAnim9 3s ease 7.6s 1 normal forwards;
     animation-fill-mode:both;
  }
  
  @keyframes myAnim9 {
  
    0%{
      opacity:0;
      transform: translateX(0px) translateY(0px); 
    }
    20%{
      opacity:1;
       transform: translateX(-100px) translateY(300px); 
    }
   
      60% {
      opacity:1;
          transform: translateX(-300px) translateY(400px);
      }
   
    70%{
       opacity:1;
          transform: translateX(-260px) translateY(400px);
    }
      90% {
       opacity:1;
          transform: translateX(-310px) translateY(450px);
    }
       95%{
       opacity:1;
          transform: translateX(-400px) translateY(420px);
    }
      99%{
       opacity:1;
          transform: translateX(-420px) translateY(380px);
    }
       100%{
       opacity:0;
          transform: translateX(-130px) translateY(300px);
    }
  }
  
  .cursor8{
    margin-top:200px;
   height:20px;
    width:15px;
    background: url("https://pngimg.com/d/cursor_PNG89.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
     animation: myAnim10 2s ease 6.9s 1 normal backwards;
     animation-fill-mode:both;
  }
  @keyframes myAnim10 {
  
    0%{
      opacity:0;
      transform: translateX(0px) translateY(0px);
    }
      40%{
      opacity:1;
      transform: translateX(-200px) translateY(100px);
    }
    50%{
      opacity:1;
      transform: translateX(-300px) translateY(60px);
    }
    99%{
      opacity:1;
      transform: translateX(-500px) translateY(50px);
    }
     100%{
      opacity:0;
      transform: translateX(-230px) translateY(90px);
    }
  }
    
  .cursor9{
    margin-top:200px;
    height:20px;
    width:15px;
    background: url("https://pngimg.com/d/cursor_PNG89.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
     animation: myAnim11 2s ease 9.6s 1 normal forwards;
     animation-fill-mode:both;
  }
    @keyframes myAnim11 {
  
    0%{
      opacity:0;
      transform: translateX(100px) translateY(0px);}
      
       40%{
      opacity:1;
      transform: translateX(-200px) translateY(-50px); 
      }
      99%{
      opacity:1;
      transform: translateX(-300px) translateY(-70px); 
      }
         100%{
      opacity:0;
      transform: translateX(100px) translateY(-50px); 
      }
    }