html{
    scroll-behavior: smooth;
    -moz-appearance: none;
    -webkit-appearance: none;
    scroll-behavior: [ auto  smooth ];
    
}
body{
    background: rgb(2,0,36) !important;
    background: gradiel-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 35%, rgba(0,212,255,1) 100%) !important;
}
#heading{
    margin: 0 auto;
    color: #fff;
    font-family:  'Roboto' !important;
    text-align: center;
    align-items: center;
    margin-top: 5rem;   
    font-size: 60px;
    font-weight: bold;
}
.row{
    margin: 0 auto;
    text-align: center;
    align-items: center;
    justify-content: center;
    margin-top: 3rem;
}
#btn_effect1{
    background-color: transparent;
    color: #00BFFF;
    font-size: 25px;
    font-family: 'Roboto' !important;
    border-radius: 0px;
    border: 2px solid #191970;
    outline: none;
    /* width: 110px;
    height: 50px; */
    margin: 0 3px;
}
#btn_effect1:hover{
    background-color:  #00BFFF;
    color: #191970;
    box-shadow: 0 0 10px  #00BFFF, 0 0 40px  #00BFFF, 0 0 80px  #00BFFF;
    transition: 0.5s;
    
}
#btn_effect2{
    background-color: transparent;
    color: #00BFFF;
    font-size: 25px;
    font-family: 'Roboto' !important;
    border-radius: 0px;
    border: 2px solid #191970;
    outline: none;
    /* width: 110px;
    height: 50px; */
    margin: 0 3px;
}
#btn_effect2:hover{
    background-color:  #00BFFF;
    color: #191970;
    box-shadow: 0 0 10px  #00BFFF, 0 0 40px  #00BFFF, 0 0 80px  #00BFFF;
    transition: 0.5s;
    
}
#btn_effect3{
    background-color: transparent;
    color: #00BFFF;
    font-size: 25px;
    font-family: 'Roboto' !important;
    border-radius: 0px;
    border: 2px solid #191970;
    outline: none;
    /* width: 110px;
    height: 50px; */
    margin: 0 3px;
}
#btn_effect3:hover{
    background-color:  #00BFFF;
    color: #191970;
    box-shadow: 0 0 10px  #00BFFF, 0 0 40px  #00BFFF, 0 0 80px  #00BFFF;
    transition: 0.5s;
    
}
#btn_effect4{
    background-color: transparent;
    color: #00BFFF;
    font-size: 25px;
    font-family: 'Roboto' !important;
    border-radius: 0px;
    border: 2px solid #191970;
    outline: none;
    /* width: 110px;
    height: 50px; */
    margin: 0 3px;
}
#btn_effect4:hover{
    background-color:  #00BFFF;
    color: #191970;
    box-shadow: 0 0 10px  #00BFFF, 0 0 40px  #00BFFF, 0 0 80px  #00BFFF;
    transition: 0.5s;   
}
#btn_effect5{
    background-color: transparent;
    color: #00BFFF;
    font-size: 25px;
    font-family: 'Roboto' !important;
    border-radius: 0px;
    border: 2px solid #191970;
    outline: none;
    /* width: 110px;
    height: 50px; */
    margin: 0 3px;
}
#btn_effect5:hover{
    background-color:  #00BFFF;
    color: #191970;
    box-shadow: 0 0 10px  #00BFFF, 0 0 40px  #00BFFF, 0 0 80px  #00BFFF;
    transition: 0.5s;   
}
#btn_effect6{
    background-color: transparent;
    color: #00BFFF;
    font-size: 25px;
    font-family: 'Roboto' !important;
    border-radius: 0px;
    border: 2px solid #191970;
    outline: none;
    /* width: 150px;
    height: 50px; */
    margin: 0 3px;
}
#btn_effect6:hover{
    background-color:  #00BFFF;
    color: #191970;
    box-shadow: 0 0 10px  #00BFFF, 0 0 40px  #00BFFF, 0 0 80px  #00BFFF;
    transition: 0.5s;   
}
.counter{
    font-size: 70px;
    text-align: center;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    color: white;
    font-family: monospace !important;
    scroll-behavior: smooth;
}
.laps{
    color: white;
    text-align: center;
    justify-content: center;
    align-items: center;
    list-style: none;
    font-size: 20px;
}
#wasi{
    text-align: center;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    font-family: 'Roboto' !important;
    margin-top: 5rem;
    color: white;
    text-shadow: 2px 2px 4px #000000;
}

@media (min-width: 400px) and (max-width: 700px)  {
       #btn_effect6{
           margin: 4px !important;
       }
 }

 @media (min-width: 360px) and (max-width: 640px)  {
    #btn_effect5{
        margin: 4px !important;
    }
    #btn_effect6{
        margin: 4px !important;
    }
}