a{
    cursor: pointer;
}
    
   

body{
   margin:0px;
   color: #ffffff;
    box-sizing:border-box;
    background-color: #10071e;
   
    font-weight: 200;
    font-style: normal;
    font-size: 20px;
    box-sizing: border-box;
    color: #ffffff;
    overflow: auto;
    width: 100%;
    line-height: 1.7em;
    font-weight: 300;
    background: url(/img/Untitled\ design\ \(15\).png);
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
            background-attachment: fixed;
            

    font-family: "Special Elite", system-ui ;

 
    background-color: #000000;
    
   
}

.face {
    height: 50px;
    border-radius: 50%;
    position: relative;
    left: 20px;
    display: inline;
    animation: entry 1s 1ms ease-in-out 
    
}
.ant {
    position:absolute;
    background-image:url("https://ianparberry.files.wordpress.com/2013/02/antwalk.gif");
    background-size: cover;
  }





          
.menu {
    display: flex;
    align-items: center;
    justify-content:space-between;
 
    
    height: 80px;
    margin-bottom: -10px;
  
    position:relative;
    top: 0px;
    left: 0px;
    z-index: 999;
    
}
@keyframes entry{
    0%{
        transform: translateY(-70px) ;
        
    }
    80%{
        transform: translateY(10px) ;
    }
    100%{
        transform: translateY(0px) ;
    }
}

.dlist a {
    padding: 20px;

    
}



a {
    text-decoration: none;
    color: rgb(0, 0, 0);
    font-weight: 600;
    font-size: 20px;
}
.list{
    color: #ffffff;
    transition:color 0.5s ease;
    position: relative;
    animation: entry 1s 1ms ease-in-out ;
    
}
.list:hover{

    color: #8333fb;
   
}

.dlist{
    position: relative;
    animation: entry 1s 1ms ease-in-out ;
    list-style-type: none;
}

.list:active::after , .list:hover::after {
content: '';
background-color:rgb(135, 0, 0) ;
position:absolute ;
width: 60%;
    height: 2px;
    bottom: 10px;
    left: 20px;
}

.break1{
    position: relative;
    clear: both;
    background-color: #8333fb;
    top: 90px;
    width: 90%;
}


li {
    list-style: none;
    padding-right: 10px;
}

.Alist {
    display:flex;
    align-items:start;    
 position: relative;
 
    list-style: none;
}



#menu-icon{
    cursor: pointer;
    color:#ffffff;
    display: inline;
    font-size: 25px;
}
#menu-icon:hover{
  
    color:#8333fb;
   
}
@media(max-width:100px){
    #menu-icon{
        display: none;
    }
}

.sidebar{
  
    background-color:rgba(0, 0, 0, 0.99);
        
    position: fixed;
    top: 0px;
    height: 100%;
    width: 100%;
    overflow: hidden;
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    animation: sideup 1s 0.1ms ease-in-out forwards;
    overflow: hidden;
    z-index: 10000;

}
.sidebar i{
    
    animation: cancel 1s 0.01ms ease-in-out forwards;
    font-size: 25px;
}
@keyframes cancel{
    0%{transform: translateY(-500px) ;
    opacity:0 ;};
        100%{transform: translateY(0px);
            opacity:1;
        }
}
@keyframes sideup{
    0%{transform: translateY(-500px)};
        100%{transform: translateY(0px)
        }
}

.side{
    display: flex;
    flex-direction: column;  
    
    }

    
   
.side a {
    display: block;
    color: rgb(255, 255, 255);
    padding: 20px;
    position: relative;
    left:-20%;
    
}

.sidebar ul li{
    padding: 30px;
    width: 100%;
    border: 10px , beige;
}


#cancel{
    cursor: pointer;
    position: absolute;
    top: 10px;
    color: rgb(255, 255, 255);
    left: 10px;
    
}

.side a:active::after , .side a:hover::after {
    content: '';
    background-color:#8333fb;
    opacity: 0.8;
    z-index: -1;
    position:absolute ;
    
      color: #f0effc;
        bottom: 10px;
        left: 0%;
       

        width: 1000%;
        height: 50px;
        bottom: 10px;
        left: -500%;
        border-radius: 5px;
        overflow: hidden;
    }
    .side a:hover{
        color: #f0f0f0;
    }
    .berablink{
 font-size: 30px;
 font-weight: 800;
animation: blink 2s 2s infinite alternate;
    }

   .section{
    position: relative;
    top: 30px;
   }

    

    @media(max-width:1000px){
.list{
    display: none}
    }
    @media(min-width:1000px){
        #menu-icon{
            display: none;
        }
    }

    /*tabs*/
   

    .tab-container {
        position: relative;
        display: flex;
        gap: 10px;
       margin: 20px;
      
        ;
        
    }

    .tab-button {
        padding: 10px 20px;
        font-size: 16px;
        border: none;
        background-color: transparent;
        cursor: pointer;
        position: relative;
        z-index: 1;
        color: aliceblue;
        font-weight: 600;
    }

    .tab-button.active {
        background-color:transparent;
    }

  .tab-container.second .tab-background {
      background-color: cyan;        
  }
    .tab-background {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        background: #8333fb;
background: -moz-linear-gradient(180deg, #8333fb 68%, rgba(255,255,255,1) 100%);
background: -webkit-linear-gradient(180deg, #8333fb 68%, rgba(255,255,255,1) 100%);
background: linear-gradient(180deg, #8333fb 68%, rgba(255,255,255,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#8333fb",endColorstr="#ffffff",GradientType=1);
box-shadow:  0 0 8px #8333fb, 0 0 8px #8333fb inset;
        color:#ffffff;
        transition: width 0.3s, left 0.3s;
        border-radius: 20px;
    }

    .tab-content {
        margin-top: 20px;
        margin-bottom: 90px;
                
    }

    .ta-tab-item {
        display: none;
        padding: 0px;
        
       
    }

    .ta-tab-item.active {
        display: block;
    }


    /*section*/

    .card{
     
        height: 250px;
      
        border-radius: 10px;
    }

    .mint-card{
       background-color: #15143e;
        border-radius: 10px;
        padding: 10px;
        width: 280px;
        position: relative;
        box-shadow:  #ffffff 0 2px 15px;
        height: 380px;
        top: 20px;
        z-index: 200;    
        /* From https://css.glass */
background: rgba(255, 255, 255, 0.1);
border-radius: 16px;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
border: 1px solid rgba(255, 255, 255, 0.3);
    }
    .mint-card:hover{

        cursor: pointer;
        animation: float 2s 0.1s infinite ease-in-out;
        box-shadow:  #ffffff 0 3px 15px;
    }

    @keyframes float{
        0%{
transform: translateY(0px);
        }
        50%{
            transform: translateY(-13px);
                    }
        100%{
            transform: translateY(0px);
                    }
    } 

    
    @media(max-width:500px){
        .card{
     
           width: 300px;
        }
        .mint-card{
            border:none;
            border-radius: 10px;
            padding: 10px;
            width: 300px;
        }

    }
    
    .ice{
        height: 40px;
        display: inline;
        position: relative;
        top: 10px;
        left: 5px;
        animation: ice 200s 0.1s infinite ease-in-out forwards ;
    }
    
    .price{
        position: relative;
        display: flex;
        flex-direction: row;
    }
    .price button{
        position: relative;
        height: 40px;
        top: -8px;
        left: 20px;
        border-radius: 5px;
        border: none;
        background-color:#8333fb;
        color: white;
        font-family: 'Courier New', Courier, monospace;
        font-weight: 900;

    }

    .price p{
        font-size: 15px;
        line-height: 19px;
        position: relative;
        top: -23px;
    }
    .price-tag{
        border: 2px solid ;
        width: 250px;
        height: 100px;
        padding: 7px;
        border-radius: 10px;
        position: relative;
        top: 20px;
        left: -10px;
    }

    .list-flex{
        display: flex;
        flex-wrap: wrap;
    }

    .button-social{
        width: 200px;
        position: relative;
        left: -40px;
        height: 50px;
        margin: 5px;
        border-radius: 50px;
       border: none;
       background: #8333fb;
       background: -moz-linear-gradient(180deg, #8333fb 68%, rgba(255,255,255,1) 100%);
       background: -webkit-linear-gradient(180deg, #8333fb 68%, rgba(255,255,255,1) 100%);
       background: linear-gradient(180deg, #8333fb 68%, rgba(255,255,255,1) 100%);
       filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#8333fb",endColorstr="#ffffff",GradientType=1);
       z-index: 1000;
        color: #ffffff;
        font-weight: 1000;
        font-size: 17px;
        font-family: 'Courier New', Courier, monospace;
        box-shadow: 0 0px 8px #8333fb inset;
        cursor: pointer;
    }
    .button-social:hover{
        box-shadow: 0 0px 8px #8333fb , 0 0px 8px #8333fb inset;

    }
    .button-social1{
        position: absolute;
        top: -10px;
        left: 18px;
       
        
    

        border-radius: 2px;
        padding: 1px;

        color:  rgb(111,0,0);
        font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
        font-size: 10px;
        font-weight: 600;
    }

    .section-card-writing{
        margin: 0 20px 20px 20px;
      max-width: 60%;
      font-size: 25px;

    }
    .span1111{
        font-family:inherit;
        font-size: 27px;
        font-weight: 10000;
        margin-right: 10px;
    }
    .span2{
        
        margin-left: 10px;
    }
    @media(max-width:500px){
        .section-card-writing{
            margin: 60px 20px 20px 0px;
          max-width: 80%;
          font-size: 20px;
          line-height: 1.9rem;
    
        }
    }

    .section-card-writing h2{
        color:#8333fb ;
    }
    .section-card{
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        justify-content: space-around;
        
    }

    

    .white p{
        color:#8333fb;
    }





.eligibility{
    font-size: 18px;
    text-align: center;
    display: inline;
    height: 350px;
    padding: 29px;
    position: relative;
    top: -220px;
   /* border-radius: 10px;
    box-shadow: 0 0 8px #040202;*/
}


.eligibility h5{
    font-size: 23;
    width: 60%;
    position: relative;
    left: 22%;
    text-align: center;
}

/* From Uiverse.io by aunis1616 */ 
.coolinput {
    display: flex;
    flex-direction: column;
    width: fit-content;
    position: static;
    min-width: 100%;
    position: relative;
    top: 0px;
    left: 50px;
   
    
  }
  .empty-msg1{
font-size: 15px;
display: none;
text-align: center;
max-width: 80% ;
position: absolute;
top:5.5rem;
left: 30%;


  }
  @media(max-width:500px){
    .empty-msg1{
        
        top:7.5rem;
        left: 30%;
          }
   
}
  
  .eligibility button{
  padding: 10px 20px;
  color: #ffedc8;
  border-radius: 7px;
  font-family: inherit;
  font-size: 15px;
  background-color: #562316;
  border: none;
  cursor: pointer;
  height: 45px;
  width: 80px;
  margin-top: 10px;
   }
  
  .coolinput label.text {
    font-size: 1.1rem;
    color: #562316;
    font-weight: 700;
    position: relative;
    top: 12px;
  
    width: 50px;
    left: -38%;
    margin: 0 0 0 7px;
    padding: 0 5px;
    background:#bcb6fe;
    z-index: 1;
  
  }
  
  .coolinput input[type="text"].input {
    padding: 11px 10px;
    font-size: 1.1rem;
    border: 2px #562316 solid;
    border-radius: 5px;
    background: #bcb6fe;
    width: 40%;
    padding: 10px;
    position: relative;
    left: -20px;
  }
  
  .coolinput input[type="text"].input:focus {
    outline: none;
  }

  .enter p{
    position: relative;
    top: -60%;
     font-size: 15px;
    font-family: inherit;
 }

  .enter:hover{
    border: 2px solid;
    border-color: #562316;
    color: #562316;
    background-color: #ffedc8;
    animation: enter 2s 1ms ease-in-out alternate infinite;
        }
        @keyframes enter {
         0%{
             transform: translateY(0px);
         }
         50%{
             transform: translateY(-6px);
         }
         100%{
             transform: translateY(0px);
         }
        }

        .div-task{
            display: flex;
            
        }

        .teddy-face{
            width: 40px;
            height: 40px;
            display: inline;
            
        }
        .task{
            display: inline;
            display: flex;
            justify-content: space-evenly;
            width: 50%;
            
            background-color: #ffffff;
            color: #8333fb;
            border-radius: 10px;
            
            

        }
        .p{
            position: relative;
        }
        .babera{
            position: relative;
            height: 40px;
            width: 100px;
            border-radius: 10px;
            top: 10px;
            background-color: #8333fb;
            border: none;
            color: #ffffff;

        }

        /*#522d5b*/

   
        .tasks{
            width: 80%;
            border-radius: 8px;
            display: flex;
           color: #ffffff;
            position: relative;
            justify-content: space-around;
           z-index: 1000;
            margin: 35px 0px  0px 0px;
            background-color:#8333fb;
            box-shadow: 0 10px 10px 0 rgba(27, 27, 27, 0.37);
            
          
        }
        .tasks_completed{
            width: 80%;
            border-radius: 8px;
            display: flex;
            margin: 15px;
            position: relative;
            justify-content: space-around;

            z-index: 1000;
           
            background-color: #8333fb;
            box-shadow:  #8333fb 0 0 8px inset ;
           
            background:#15143e;
            background: rgb(223,171,53);
            box-shadow: 0 10px 10px 0 rgba(27, 27, 27, 0.37);
           
animation: tab-background 5s 1ms infinite ease-in-out;

        }
        @keyframes tab-background{

            0%{
                transform: translateY(-4px);
            }
            50%{
                transform: translateY(4px);
            }
            100%{
                transform: translateY(-4px);
              
            }
        }
        .taskes{
            display: flex;
            flex-direction: column;
            border: none ;
            align-items: center;
            border-radius: 10px;
            width:50%;
            position: relative;
           z-index: 1000;
           
            background:w;
        margin: 10px;
        }
        .task-final{
            width: 80%;
            border-radius: 8px;
            display: flex;
           
            position: relative;
            justify-content: space-around;
            font-weight: 500;
            color: #ffffff;
            border:none;
            margin: 15px;
            box-shadow:  #ffffff 0 0 8px ;

            background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0));
        backdrop-filter: blur(50px);
        border-radius: 10px;
        border:1px solid rgba(255, 255, 255, 0.18);
        box-shadow: 0 10px 10px 0 rgba(0, 0, 0, 0.37);

        }
        .task-final button{
            height: 40px;
            width: 100px;
            position: relative;
            top: 16.5px;
          border:2px  rgba(255, 255, 255, 0.8) solid;
            color: rgba(255, 255, 255, 0.8);
            border-radius: 10px;
            font-family: 'Courier New', Courier, monospace;
            font-size: 15px;
            font-weight:1000 ;
            
        }
        .tasks button{
            height: 40px;
            width: 100px;
            position: relative;
            top: 16px;
            border-radius: 10px;
            font-family:'Courier New', Courier, monospace;
            font-size: 15px;
            font-weight:1000 ;
            left: 8px;
            
        }
      
       
        #check1{
            display: none;
            background-color: #000000;
            font-size: 9px;
            position: relative;
            top: 23px;
            height: 8px;
            display:none;
           border: none;
            border-radius: 18px;
            position: relative;
            left: 13px;
            padding: 4px;
            border:solid 2px rgb(255, 249, 249);

            color: white;
            background: rgb(21,20,62);
 background: -moz-linear-gradient(180deg, rgba(21,20,62,1) 83%, rgba(255,255,255,1) 99%);
 background: -webkit-linear-gradient(180deg, rgba(21,20,62,1) 83%, rgba(255,255,255,1) 99%);
 background: linear-gradient(180deg, rgba(21,20,62,1) 83%, rgba(255,255,255,1) 99%);
 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#15143e",endColorstr="#ffffff",GradientType=1);
 box-shadow: 0 0 8px #15143e inset;
            

        }
        #check2{
            display: none;
            background-color: transparent;
            font-size: 9px;
            position: relative;
            top: 23px;
            height: 8px;
            display:none;
            border:2px solid white;
            border-radius: 18px;
            position: relative;
            left: 0px;
            padding: 4px;
            border: none;
           border:solid 2px rgb(255, 249, 249);

           color: white;
           background: rgb(21,20,62);
background: -moz-linear-gradient(180deg, rgba(21,20,62,1) 83%, rgba(255,255,255,1) 99%);
background: -webkit-linear-gradient(180deg, rgba(21,20,62,1) 83%, rgba(255,255,255,1) 99%);
background: linear-gradient(180deg, rgba(21,20,62,1) 83%, rgba(255,255,255,1) 99%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#15143e",endColorstr="#ffffff",GradientType=1);
box-shadow: 0 0 8px #15143e inset;
        }

        #check3{
            display: none;
            background-color: transparent;
            font-size: 9px;
            position: relative;
            top: 23px;
            height: 8px;
            display:none;
            border:2px solid white;
            border-radius: 18px;
            position: relative;
            left: -1px;
            padding: 4px;
            border: none;
            border:solid 2px rgb(255, 249, 249);

            color: white;
            background: rgb(21,20,62);
 background: -moz-linear-gradient(180deg, rgba(21,20,62,1) 83%, rgba(255,255,255,1) 99%);
 background: -webkit-linear-gradient(180deg, rgba(21,20,62,1) 83%, rgba(255,255,255,1) 99%);
 background: linear-gradient(180deg, rgba(21,20,62,1) 83%, rgba(255,255,255,1) 99%);
 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#15143e",endColorstr="#ffffff",GradientType=1);
 box-shadow: 0 0 8px #15143e inset;
        }
        

        .button-task{
            color: #8333fb;
            background-color: #ffffff;
            font-weight: 1000;
            border: none ;
            cursor: pointer;
            font-family: 'Courier New', Courier, monospace;
            
        }
        .completed-button-task0{
            background-color:transparent;
            border: none;
            border: 2px white solid;
            color: white;
            position: relative;
            left: 9px;
            font-family: 'Courier New', Courier, monospace;
        }
        .button-task0{
            height: 40px;
            width: 100px;
            position: relative;
            top: 15.9px;
          
            
            border-radius: 10px;
            font-family:'Courier New', Courier, monospace;
            font-size: 15px;
            font-weight:1000 ;
            font-family: 'Courier New', Courier, monospace;
            color: #8333fb;
            background-color: #ffffff;
            font-weight: 1000;
            border: none ;
            cursor: pointer;
            position: relative;
            
           
        }

        .button-task0:hover{
            box-shadow: 0 0px 10px #ffffff , 0 0 10px #242424 ; 
        }
        .completed-button-task{
            height: 40px;
            width: 100px;
            position: relative;
            top: 12.5px;
          border:2px  rgb(135, 0, 0 , 0.8) solid;
            color: rgb(135, 0, 0 , 0.8);
            border-radius: 10px;
            font-family: 'Courier New', Courier, monospace;
            font-size: 15px;
            font-weight:1000 ;
        }
        
        .button-task1{
            font-family: 'Courier New', Courier, monospace;
            background-color:transparent;
            border: none;
            border: 2px white solid;
            color: white;

        }
        .button-task2{
            background-color:transparent;
            border: none;
            border: 2px white solid;
            color: white;
            font-family: 'Courier New', Courier, monospace;
        }

        .task-instruction{
            position: relative;
            top: -6.9px;
          }
          .task-instruction1{
            position: relative;
            top: -4px;
            
          }

            
          /* HTML: <div class="loader"></div> */
/* HTML: <div class="loader"></div> */
.loader , .loader1 , .loader2{
    position: relative;
   left: 33%;
    border: none;
    display: none;
    width: 30px;
    aspect-ratio: 2;
    --_g: no-repeat radial-gradient(circle closest-side, #8333fb 90%,#0000);
    background: 
      var(--_g) 0%   50%,
      var(--_g) 50%  50%,
      var(--_g) 100% 50%;
    background-size: calc(100%/3) 50%;
    animation: l3 1s infinite linear;
  }
  @keyframes l3 {
      20%{background-position:0%   0%, 50%  50%,100%  50%}
      40%{background-position:0% 100%, 50%   0%,100%  50%}
      60%{background-position:0%  50%, 50% 100%,100%   0%}
      80%{background-position:0%  50%, 50%  50%,100% 100%}
  }


  .tasks-p{
    
    text-align: center;
   
  }

  
        @media(max-width:800px){

         .loader , .loader1 , .loader2{
                position: relative;
                left: 36%;
                border: none;
                display: none;
                width: 23px;
              
              }

            .tasks{
                width: 87%;
                font-size: 16px;
                font-weight: 500;
            }
            .tasks_completed{
                width: 87%;
                font-size: 16px;
                font-weight: 500;
            }
            .taskes{
                display: flex;
                flex-direction: column;
                border: none ;
                align-items: center;
                border-radius: 10px;
                width:70%;
                position: relative;
               
              
            }

            .tasks button{
                height: 35px;
                width: 95px;
              
                font-weight: 1000;
                font-size: 14px;
                top: 14px;
                border-radius: 8px;
                font-family: 'Courier New', Courier, monospace;
                

            }
            .button-task0{
                height: 35px;
                width: 95px;
              
                font-weight: 1000;
                font-size: 14px;
                top: 15.5px;
                border-radius: 8px;
                font-family: 'Courier New', Courier, monospace;

            }
           
            .task-final{
                width: 87%;
                font-size: 16px;
                font-weight: 500;
            }

            .task-final button{
                height: 35px;
                width: 95px;
                font-weight: 1000;
                font-size: 14px;
                top: 15.5px;
                border-radius: 8px;
                font-family: 'Courier New', Courier, monospace;

            }

            .tasks-p{
                font-size: 18px;
                text-align: center;
               
              }

              .Submit-Wallet-heading{
                font-size: 25px;
              }

              .task-instruction1{
                position: relative;
                top: -4px;
                
              }
        }

        @media(max-width:350px){
            .loader , .loader1 , .loader2{
                position: relative;
                left: 36%;
                border: none;
                display: none;
                width: 23px;
              
              }

    

            .tasks{
                width: 90%;
                font-size: 14px;
                font-weight: 500;
            }
            .tasks_completed{
                width: 90%;
                font-size: 14px;
                font-weight: 500;
                
            }
           
           
        
            .tasks button{
                height: 30px;
                width: 65px;
                font-weight: 1000;
                font-size: 12px;
                top: 10.5px;
                
                
        
            }
            .button-task0{
                height: 30px;
                width: 65px;
                font-weight: 1000;
                font-size: 12px;
                top: 15.5px;
                
                
        
            }
            
           
            .task-final{
                width: 90%;
                font-size: 14px;
                font-weight: 500;
            }
        
            .task-final button{
                height: 30px;
                width: 65px;
                font-weight: 1000;
                font-size: 12px;
            }

            #check1{
                display: none;
                background-color: transparent;
                font-size: 9px;
                position: relative;
                top: 19px;
                height: 19px;
                display:none;
                
                border-radius: 18px;
                position: relative;
                left: 9px;
                padding: 4px;
            }
        
                
              }

        @media(max-width:450px){
            .taskes{
                display: flex;
                flex-direction: column;
                border: none ;
                align-items: center;
                border-radius: 10px;
                width:92%;
                position: relative;
               
               
            }
           }

      

        .boundary{
            position: relative;
            top: 100px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }
        .arrow-down{
            font-size: 20px;
            margin-top: 13px;
            color: #8333fb;
            filter: drop-shadow(0px 0px 3px #8333fb);
           
        }

        #arrow-down1{
            font-size: 20px;
            margin-top: 13px;
            color: #ffffff;
            filter: drop-shadow(0px 0px 3px #ffffff);
           
        }
        #arrow-down2{
            font-size: 20px;
            margin-top: 13px;
            color: #ffffff;
            filter: drop-shadow(0px 0px 3px #ffffff);
           
        }
        #arrow-down3{
            font-size: 20px;
            margin-top: 13px;
            color: #ffffff;
            filter: drop-shadow(0px 0px 3px #ffffff);
           
        }

       
          
          .form input[type="text"].input:focus {
            outline: none;
          }

          .input1[type="text"].input1:focus {
            outline: none;
          }

          form{
            display: flex;
            flex-wrap: wrap;
           justify-content: center;
           margin-top: 10px;
           width: 88%;
          }
          
          .input{
            background-color:transparent;
            border-radius: 10px;
            padding: 25px;
            width: 100%;
            border: none;
            position: relative;
            box-shadow: 0 0 8px #5a5a5a ;
            margin-top: 9px;
           
            height: 11px ;
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0));
        backdrop-filter: blur(10px);
        border-radius: 10px;
        border:1px solid rgba(255, 255, 255, 0.18);
        box-shadow: 0 10px 10px 0 rgba(0, 0, 0, 0.37);
       

          }
          .input1{
            background-color: #f0effc;
            border-radius: 10px;
            padding: 20px;
            width: 100%;
            border: none;
            position: relative;
            
           
        
            margin-top: 15px;
            
            height: 11px ;

          }
          input[placeholder], [placeholder], *[placeholder] {
            color: #000000;
            font-size: 16px;
          }

          
          .reply{
            position: absolute;
            font-size: 11px;
            color: #c10303;
            top: 375px;
          }
          .text{
            position: relative;
            height: 20px;
            top: -24px;
            color:#8333fb;
            background-color:#bcb6fe;
            padding: 6px;
            font-size: 12px;
            left: 50px ;
            z-index: 1;
          }

          @media(min-width:800px){

           
            .form{
                width: 80%;
            }
            #check1{
                display: none;
                background-color: transparent;
                font-size: 9px;
                position: relative;
                top: 22px;
                height: 8px;
                display:none;
               
                border-radius: 18px;
                position: relative;
                left: 16px;
                padding: 4px;
            }
            #check2{
                display: none;
                background-color: transparent;
                font-size: 9px;
                position: relative;
                top: 22px;
                height: 8px;
                display:none;
               
                border-radius: 18px;
                position: relative;
             
                padding: 4px;
            }
            #check3{
                display: none;
                background-color: transparent;
                font-size: 9px;
                position: relative;
                top: 22px;
                height: 8px;
                display:none;
               
                border-radius: 18px;
                position: relative;
             
                padding: 4px;
            }
            .reply{
                position: absolute;
                font-size: 12px;
                color: #c10303;
                top: 400px;
              }
              
       

          }
          @media(max-width:408px){
            .form input{
                left: 0%;
                width: 100%;
                margin-top: 20px;
              }
              .input1{
                background-color: #f0effc;
                border-radius: 10px;
                padding: 20px;
                width: 75%;
                border: none;
                position: relative;
                
                left: 0%;
                width: 75%;
                color: #bcb6fe;
                margin-top: 20px;
    
              }

              .text{
               
            top: 10px;
            left: -70px;
              }

              .form{
                position: relative;
                top: -20px;
                width: 88%;
              }

              #check1{
                display: none;
                background-color: transparent;
                font-size: 9px;
                position: relative;
                top: 20px;
                height: 8px;
                display:none;
            
                border-radius: 18px;
                position: relative;
                left: 10px;
                padding: 4px;
            }
            #check2 , #check3{
                display: none;
                background-color: transparent;
                font-size: 9px;
                position: relative;
                top: 19px;
                height: 8px;
                display:none;
            
                border-radius: 18px;
                position: relative;
                
                padding: 4px;
            }

            .reply{
                position: absolute;
                font-size: 12px;
                color: #c10303;
                top:-16px;
              }
              .arrow-down{
                font-size: 15px;
                position: relative;
                top: -5px;
               
            }
              #arrow-down1{
                font-size: 15px;
                position: relative;
                top: -5px;
              }
              #arrow-down2{
                font-size: 15px;
                position: relative;
                top: -5px;
              }
              #arrow-down3{
                font-size: 15px;
                position: relative;
                top: -5px;
              }
              
           
          }
    

          .eth-form9{
            width: 85%;
          }
          .input28{
            width: 100%;
        
          }
        .submit{
            margin: 30px 0px 35px 0px;
            background-color: transparent;
            width: 100px;
            height: 45px;
            padding: 10px;
            border: none;
            border-radius: 5px;
            color: #8333fb;
            font-size: 12.5px;
            font-weight: 1000;
            position: relative;
            
            background: rgb(223,171,53);
background: -moz-linear-gradient(180deg, #8333fb 83%, rgba(255,255,255,1) 100%);
background: -webkit-linear-gradient(180deg, #8333fb 83%, rgba(255,255,255,1) 100%);
background: linear-gradient(180deg, #8333fb 83%, rgba(255,255,255,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#8333fb",endColorstr="#ffffff",GradientType=1);
            color: #ffffff;
            font-weight: 1000;
            font-size: 15px;
            font-family: 'Courier New', Courier, monospace;
            box-shadow: 0 0px 8px #8333fb inset ;
           
        }
        .submit:hover{
            box-shadow: 0 0px 8px #8333fb inset , 0 0px 8px #8333fb ;
            cursor: pointer;
            animation: button 10ms 1ms ease-in-out forwards;
        }

    
        @keyframes button{
            0%{
                position: relative;
                top: 0px;
            }
            
            100%{
                position: relative;
                top: -3px;
                
            }
        }
        

        .submit1{
            background-color: transparent;
            margin-bottom: 100px;
            width: 100px;
            height: 45px;
            padding: 10px;
            border: none;
            border-radius: 5px;
            border: 2px solid  rgb(135, 0, 0 , 0.6);
            color: #8333fb;
            box-shadow: 0 0 8px rgb(135, 0, 0) ;
            font-size: 12.5px;
            font-weight: 1000;
           
            cursor: pointer;
        }
        .carousel-container {
            width: 280px; /* Set the width of the carousel */
            overflow: hidden;
            position: relative;
          }
          
          .carousel-wrapper {
            display: flex;
            transition: transform 0.5s ease-in-out;
          }
          
          .carousel-item {
            min-width: 280px; /* Match this width with the carousel container */
            box-sizing: border-box;
            padding: 0px;
            text-align: center;
            background-color: #f0f0f0;
            margin: 0px;
          }

          @media(max-width:508px){

            .carousel-container {
                width: 290px; /* Set the width of the carousel */
                overflow: hidden;
                position: relative;
              }
            .carousel-item {
                min-width: 290px; /* Match this width with the carousel container */
                box-sizing: border-box;
                padding: 0px;
                text-align: center;
                background-color: #f0f0f0;
                margin: 0px;
              }
        }
          .Submit-Wallet-heading{
            color: #8333fb;
           
          }

          .op{
            width: 50%;
          }

        
          /* HTML: <div class="loader"></div> */
/* HTML: <div class="loader"></div> */





.bg-animation {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
   
}


.bg-animation{
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  
}


.wallet-submitted{
    color: #8333fb;
    font-weight: 1000;
    margin-bottom: 100px;
    margin-top: 50px;
    display : none;
    z-index: 100000;
}


/* HTML: <div class="loader"></div> */
/* HTML: <div class="loader"></div> */
.loader4 {

    position: relative;
    left: 0%;
    top: -15%;
    width: 30px;
    aspect-ratio: 1;
    display:grid;
    -webkit-mask: conic-gradient(from 15deg,#fff,#fff);
    animation: l26 1s infinite steps(12);
    display: none;
  }
  .loader4,
  .loader4:before,
  .loader4:after{
    background:
      radial-gradient(closest-side at 50% 12.5%,
       #fff 96%,#0000) 50% 0/20% 80% repeat-y,
      radial-gradient(closest-side at 12.5% 50%,
       #fff 96%,#0000) 0 50%/80% 20% repeat-x;
  }
  .loader4:before,
  .loader4:after {
    content: "";
    grid-area: 1/1;
    transform: rotate(30deg);
  }
  .loader4:after {
    transform: rotate(60deg);
  }
  
  @keyframes l26 {
    100% {transform:rotate(1turn)}
  }
  .submit-text{
    position: relative;
    top: 0%;
    display: inline;
  }


  .audio-control{
    position:fixed;
    top: 20px;
    right: -80px;
    margin: 100px;

  }
  #mute{
    color: gray;
    cursor: pointer;
    font-size: 14px;
    
    
  
  }
  #play{
    font-size: 14px;
    color: #8333fb;
    cursor: pointer;
    opacity: 0.8;
    display: none;
  }

  .earn{
    position: relative;
    top: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

 
  .earn h1{

   
   
    font-size: 45px;
    text-align: center;
   
    
  
  }
  .klin{
    margin-top: 70px;
    width: 100%;
    height: 550px;
    border-top: 1px solid rgb(56, 56, 56);
    border-bottom: 1px solid rgb(56, 56, 56);
  }
  @media(max-width:500px){
    .klin{
        width: 100%;
        height: 680px;
        margin-top: 0px;
      }
      .earn h1{

   
   
        font-size: 35px;
        text-align: center;
       
        
      
      }
  }
  .pop{
    position: absolute;
    top: 170px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    width: 80%;
  }
  @media(max-width:500px){
    .pop{
        position: absolute;
        top: 70px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
    width: 80%;
      }
  }

  .pop button{
    width: 200px;
    position: relative;
    
    height: 50px;
    margin: 5px;
    border-radius: 50px;
   border: none;
   background: #8333fb;
background: -moz-linear-gradient(180deg, #8333fb 68%, rgba(255,255,255,1) 100%);
background: -webkit-linear-gradient(180deg, #8333fb 68%, rgba(255,255,255,1) 100%);
background: linear-gradient(180deg, #8333fb 68%, rgba(255,255,255,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#8333fb",endColorstr="#ffffff",GradientType=1);
z-index: 1000;
    color: #ffffff;
    font-weight: 1000;
    font-size: 17px;
    font-family: 'Courier New', Courier, monospace;
    box-shadow: 0 0px 8px #8333fb inset;
    cursor: pointer;
  }

  
  #changeUsernameContainer {
    margin-top: 10px;
}

#newUsernameInput {
    padding: 5px;
    margin-right: 5px;
}

#submitNewUsername {
    padding: 5px 10px;
    background-color: #4CAF50;
    color: white;
    border: none;
    cursor: pointer;
}

#submitNewUsername:hover {
    background-color: #45a049;
}


#changeUsernameButton {
    margin-top: 10px;
    padding: 5px 10px;
    background-color: #4CAF50;
    color: white;
    border: none;
    cursor: pointer;
}

#changeUsernameButton:hover {
    background-color: #45a049;
}

#changeUsernameButton[title]:hover::after {
    content: attr(title);
    position: absolute;
    background-color: #333;
    color: #fff;
    padding: 5px;
    border-radius: 5px;
    margin-top: 20px;
    font-size: 12px;
}

#changeUsernameContainer {
    margin-top: 10px;
    transition: all 0.3s ease;
}

#newUsernameInput {
    padding: 5px;
    margin-right: 5px;
    width: 150px;
}

#submitNewUsername {
    padding: 5px 10px;
    background-color: #4CAF50;
    color: white;
    border: none;
    cursor: pointer;
}

#submitNewUsername:hover {
    background-color: #45a049;
}

#leaderboardPopup {
    width: 300px;
    max-height: 80vh;
    overflow-y: auto;
    text-align: left;
}

#leaderboardPopup ol {
    list-style-type: none;
    padding: 0;
}

#leaderboardPopup li {
    margin: 10px 0;
}

#leaderboardPopup button {
    padding: 5px 10px;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

#leaderboardPopup button:hover {
    background-color: #45a049;
}

#toggleTwitterUsernameButton {
    padding: 5px 10px;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    margin-bottom: 10px;
}

#toggleTwitterUsernameButton:hover {
    background-color: #45a049;
}

#twitterUsernameInputContainer {
    display: none; /* Initially hidden */
    flex-direction: column;
    gap: 10px;
    margin-top: 10px;
}

#twitterUsernameInputContainer input {
    padding: 5px;
    width: 200px;
}

#twitterUsernameInputContainer button {
    padding: 5px 10px;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

#twitterUsernameInputContainer button:hover {
    background-color: #45a049;
}

.canvas-container {
    position: relative;
    display: inline-block;
}

.minimize-button {
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: #ff4757;
    color: white;
    border: none;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    font-size: 20px;
    cursor: pointer;
    z-index: 10;
}

.open-game-button {
    background-color: #2ed573;
    color: white;
    border: none;
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    margin-top: 10px;
}