*{
    padding: 0;
    z-index: 2;

}

body{
    background-color: rgb(11, 12, 12);
    color:white ;
    padding: 0px;
    margin: auto;
    font-size: 20px;
    overflow-x:hidden;

}

header{
    position: sticky;
    display: flex;
    margin: 0px;
    justify-content: space-between;
    align-items: center;
    background-color: rgb(15, 15, 15);
    padding-left: 5px;
    padding-right: 5px;
}
.balance{
    display: flex; 
    gap: 5px;
}
.logo{
    font-style: italic;
    color: red;
}
.history{
    display: flex;
    gap: 5px;
    height: 15px;
}
.containerAnime{
    width: 97%;
    border: 2px white solid;
    display: grid;
    overflow: hidden;  
    border-radius: 25px;
    grid-template-columns: 5% 95%; 
    height: 75vw; 
    grid-template-rows: 95% 5%;
}
.dots{
    margin-top: -50px;
    animation: animatDots 1s infinite linear;
}
.bottom-dots{
    margin-left: 2vw;   
    animation: btmDots 1s infinite linear; 
}
.avi-container{
    display: grid;
    height: 70vw; 
    overflow: hidden;  
    background-color: rgba(0, 0, 0, 0.466);

}
.avi-background{
    position:relative;
    width:280vw;
    height: 280vw;
    z-index: -5;
    row-gap: 50px;
    left:-92vw;
    margin-top: -142vw;
    margin-left: -50vw;
    border-radius: 50%;
    animation: bk 10s infinite linear;
    background:repeating-conic-gradient(black 0%,black 2%, rgb(39, 39, 38) 2%,rgb(39, 39, 38) 4%);

}.avi-jet{
    width: 20%;
    border-radius: 100px;
    margin-left: -3%;
    animation: floating  6s infinite;
    margin-top: 15%;
    transform: rotate(8deg);

}
.zone{
    position: absolute;
    height: contain;
    width:contain;
    color:white;
    left: 35vw;
    font-size: 50px;
    font-weight: bolder;
    margin: 20vw auto;
    text-shadow: skyblue 5px 5px 20px;

}
.backflag{
    background-color:rgb(46, 54, 52);
    width:150vw;
    height:50px;
    transform-origin: left;
    z-index: -1;
    margin-left: -10%;
    animation: bk 5s infinite ease-in-out;
}

.bet{
    display: flex;  
    align-items: center;
    padding: 0;

}
.bet-option{
    display: grid;
    grid-template-columns:  auto auto;
    justify-content: center;
    background-color: black;
    gap: 0;
    width: fit-content;
    justify-self: center;
    border-radius: 15px;

}

.m-bet, .auto{
    width:30vw ;text-align: center;
    border-radius: 15px;
}
.m-bet{
   background-color: rgb(27, 25, 25);
}


.bet-button{
    background-color: green;
    color: white;
    width: 50vw;
    height: 60px;
    border: none;
    border-radius: 15px;
    margin-left: 0vw;
    font-size: 20px;
    font-weight: 200;

}
input #autobet1{
    
    background-color: green;width: 100px;
}

.check{
    visibility: hidden;
}
section{
    display: grid;
    margin-top:10px ;
    border: none;
    color: white;
    background-color: rgb(36, 37, 37);
    border-radius: 15px;
    width: 100%;
    justify-content: center;
    
}
.bet-auto{
    display: grid;
    grid-template-columns: auto auto;
    width: 60vw;
    justify-content: space-between;
    background-color:green ;
    border-radius: 15px;
    
}

 label{
    width: 30vw;
    text-align: center;
   

}
input[type="number"]{
    width: 30vw;
    background-color: black;
    color: white;
    height: 20px;
    border: none;
    border-radius: 15px;
    text-align: center;
    
}
.bet-amount{
    width: 30vw;
    color: white;
    text-align: center;
}
.btn-amount{
    display: grid;
    grid-template-columns: auto auto;
    width: 30vw;
    justify-content: space-between;
    align-items: center;
    row-gap: 18px;
}
.btn-amount button{
    margin-top:10px ;
    border: none;
    width: 13vw;
    color: white;
    background-color: rgb(26, 29, 29);
    border-radius: 15px;
   
}

#check1:checked~.bet-option>.auto{
    background-color: rgb(27, 25, 25);
 }
 #check1:checked~.bet-option>.m-bet{
    background-color:unset;
 }
 #check2:checked~.bet-option>.auto{
    background-color: rgb(27, 25, 25);
 }
 #check2:checked~.bet-option>.m-bet{
    background-color:unset;
 }
 
.autoAll, .autoAll2{
    display: none;
    grid-template-columns: auto auto;
}

.toggleAuto{
    width: 55px;
    background-color: rgba(0, 0, 0, 0.466);
    border-radius: 25px;
    padding: 5px;
    
}
.dot, .dot2{
    width: 15px;
    height: 15px;
    background-color: white;
    border-radius: 50%;
}
.toggleCash, .toggleAuto2, .toggleCash2{
    width: 55px;
    background-color: rgba(0, 0, 0, 0.466);
    border-radius: 25px;
    padding: 5px;
    
}
.dotCash,.dotCash2{
    width: 15px;
    height: 15px;
    background-color: white;
    border-radius: 50%;
}
#autoBet, #autoBet2,#autoCashout,#autoCashout2 {
    visibility: hidden;
}
#autoBet:checked~.lbl-auto .toggleAuto .dot {
   transform: translate(40px);
   transition:ease-in-out 1s;
}
#autoBet2:checked~.lbl-auto2 .toggleAuto2 .dot2 {
    transform: translate(40px);
    transition:ease-in-out 1s;
 }
#autoCashout:checked~.lbl-cashout .toggleCash .dotCash{
    transform: translate(40px);
    transition:ease-in-out 800ms;
}
#autoCashout2:checked~.lbl-cashout2 .toggleCash2 .dotCash2{
    transform: translate(40px);
    transition:ease-in-out 800ms;
}
#check1:checked~.autoAll{
    display: grid;
}#check2:checked~.autoAll2{
    display: grid;
}
@media screen and (min-width:800px) {
    .containerAnime{
        width: 97%;
        border: 2px white solid;
        display: grid;
        overflow: hidden;  
        border-radius: 25px;
        grid-template-columns: 5% 95%; 
        height: 480px; 
        grid-template-rows: 95% 5%;
    }
    .m-bet, .auto{
        width:100px ;text-align: center;
        border-radius: 15px;
    }
    .avi-container{
        display: grid;
        height: 440px;
        max-width: 99%;
        overflow-x: hidden;
        
    }
    .avi-jet{
    width: 10%;
    border-radius: 100px;
    margin-left: -1%;
    animation: floating  6s infinite;
    margin-top: 8%;
    transform: rotate(8deg);
    
    }
    #sec{
        display: grid;
        grid-template-columns: 50% 50%;
    }
    .bet-button{
      
        max-width: 200%;
      
    
    }
    .bet-auto{
        display: grid;
        grid-template-columns: 50% 50%;
        width: 30%;
        border-radius: 15px;
        
    }
    input[type="number"]{
        width: 80%;
        color: white;
        height: 20px;
    }
    .btn-amount button{
        margin-top:10px ;
        border: none;
        width: 250%;
        color: white;
        background-color: rgb(26, 29, 29);
        border-radius: 15px;
       
    }
    .btn-amount{
        display: grid;
        grid-template-columns: auto auto;
        width: 100%;
        padding: 5px;
        align-items: center;
    }
    section{
        display: grid;
        margin-top:10px ;
        border-radius: 15px;
        width: 99%;
        justify-content: center;
        
    }
    .bet{
        display: flex;  
        align-items: center;
        padding: 0;
        min-width: 350px;
        justify-content: space-between;
        gap:15%;
    
    }
    .bet-option{
        height: 25px;
    }
    .avi-background{
        position:relative;
        display: grid;
        width:280vw;
        height: 280vw;
        z-index: -5;
        row-gap: 50px;
        left:-91vw;
        margin-top: -145vw;
        margin-left: -50vw;
        border-radius: 50%;
        animation: bk 10s infinite linear;
        background:repeating-conic-gradient(black 0%,black 2%, rgb(39, 39, 38) 2%,rgb(39, 39, 38) 4%);
    
    }
    .zone{
        position: absolute;
        height: contain;
        width:contain;
        color:white;
        left: 30vw;
        font-size: 50px;
        font-weight: bolder;
        margin: 5vw auto;
        text-shadow: skyblue 5px 5px 20px;
    
    }
   
}