.container{
border: 4px solid rgb(119, 115, 115);
background-color:black;
height:600px;
width: 300px;
border-radius: 40px;
margin: auto;
margin-top: 10px;
position: relative;
}
.come{
    margin-top:205px;
    margin-left: 5px;
}


.number{
    border: 1px solid transparent;
    background-color: rgb(36, 35, 35);
    color: white;
    font-size: x-large;
    height: 60px;
    width: 62px;
    border-radius: 100px;
    padding: 8px;
    position: relative;
    margin-top: 5px; 
    margin-left: 8px;
}
.number:active{
    background-color:rgb(129, 126, 126);
}

.prob{
    border: 1px solid transparent;
    background-color: rgb(36, 35, 35);
    color: white;
    font-size: x-large;
    height: 60px;
    width: 62px;
    border-radius: 100px;
    padding: 8px;
    position: relative;
    margin-top: 5px; 
    margin-left: 10px;

}
.prob:active{
    background-color:rgb(129, 126, 126);
}   


.diff{
    border: 1px solid transparent;
    background-color: rgb(20, 20, 20);
    text-align: left;
    color: white;
    font-size: x-large;
    height: 60px;
    width: 135px;
    border-radius: 100px;
    padding: 8px 0px 8px 25px ;
    position: relative;
    margin-top: 5px;
    margin-left: 6px;  
}
.diff:active{
    background-color:rgb(175, 166, 166);
}

.ac{
    border: 1px solid transparent;
    background-color:rgb(230, 151, 6);
    color: white;
    font-size: x-large;
    height: 60px;
    width: 55px;
    border-radius: 100px;
    padding: 8px;
    position: relative;
    margin-top: 5px; 
    margin-left: 11px;
}
.ac:active{
    background-color:rgb(175, 166, 166);
}
.ac2{
    border: 1px solid transparent;
    background-color:rgb(230, 151, 6);
    color: white;
    font-size: x-large;
    height: 60px;
    width: 55px;
    border-radius: 100px;
    padding: 8px;
    position: relative;
    margin-top: 5px; 
    margin-left: 5px;
}
.ac2:active{
    background-color:rgb(175, 166, 166);
}

.ac1{
    border: 1px solid transparent;
    background-color:rgb(129, 126, 126);
    color: black;
    font-size: x-large;
    height: 60px;
    width: 55px;
    border-radius: 100px;
    padding: 8px;
    position: relative;
    margin-top: 5px; 
    margin-left: 12px; 
}
.ac1:active{
    background-color:rgb(212, 205, 205);
}

.af{
    border: 1px solid transparent;
    background-color:rgb(230, 151, 6);
    color: white;
    font-size: x-large;
    height: 60px;
    width: 55px;
    border-radius: 100px;
    padding: 8px;
    position: relative;
    margin-top: 5px; 
    margin-left: 4px;
}
.af:active{
    background-color:rgb(175, 166, 166);
}

.task{
    border: 1px solid white;
    height: 5px;
    width: 150px;
    background-color: white;
    border-radius: 5px;
    margin-left: 75px;
    margin-top: 45px;
}

span{
    position: absolute;
    font-size: 550%;
    color: white;
    top: 100px;
    left: 235px;
}

.battery{
    border: 2px solid white;
    height: 3px;
   width: 12px;
    position: absolute;
    bottom: 580px;
    left: 270px;
    background-color: white;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}

.bar1{
    border: 1px solid rgb(105, 104, 104);;
    height: 12px;
    position: absolute;
    bottom: 580px;
    left: 250px;
}


.bar2{
    border: 1px solid rgb(105, 104, 104);;
    height: 10px;
    position: absolute;
    bottom: 580px;
    left: 246px;
}

.bar3{
    border: 1px solid white;
    height: 8px;
    position: absolute;
    bottom: 580px;
    left: 242px;
}

.bar3:hover{
    border: 1px solid rgb(105, 104, 104);
}
.bar4{
    border: 1px solid white;
    height: 6px;
    position: absolute;
    bottom: 580px;
    left:238px ;
}
.bar4:hover{
    border: 1px solid rgb(105, 104, 104);
}

.bar5{
    border: 1px solid white;
    height: 4px;
    position: absolute;
    bottom: 580px;
    left:234px ;
}
.bar5:hover{
    border: 1px solid rgb(105, 104, 104);
}

.bar6{
    position: absolute;
    bottom: 575px;
    left:20px ;  
    color: white;
}

.rightbutton{
    height: 40px;
    border: 4px solid rgb(121, 118, 118);
    border-bottom: none;
    border-top: none;
    border-left: none;
   position: absolute;
   top: 120px;
   right: 523px;
   border-radius: 10px;
}
.leftbutton1{
    height: 20px;
    border: 4px solid rgb(121, 118, 118);
    border-bottom: none;
    border-top: none;
    border-right: none;
   position: absolute;
   top: 100px;
   right: 811px;
   border-radius: 10px;
}

.leftbutton2{
    height: 40px;
    border: 4px solid rgb(121, 118, 118);
    border-bottom: none;
    border-top: none;
    border-right: none;
   position: absolute;
   top: 170px;
   right: 811px;
   border-radius: 10px;
}
.leftbutton3{
    height: 40px;
    border: 4px solid rgb(121, 118, 118);
    border-bottom: none;
    border-top: none;
    border-right: none;
   position: absolute;
   top: 230px;
   right: 811px;
   border-radius: 10px;
}

#Next{
    border: 2px solid transparent;
    background-color: blue;
    color: white;
    text-decoration: none;
    padding: 8px 10px;
    border-radius: 10px;
    position: absolute;
    right: 20px;
    bottom: 20px;
 
}

#Next:hover{
    background-color: white;
    color: blue;
    border: 2px solid blue;
}