body{
    background-color:black;
    color: white;
}

.button {
    border: 1px solid;
    background-color: lightgray;
    padding: 5px 10px;
    display: inline-block;
    margin: 4px;
    cursor: pointer;
    transition: background-color 0.2s ease-in-out;
    box-shadow: 1px 3px 6px rgb(255 255 255 / 15%);
    border-radius: 5px;
    color:black;
    position: relative;
    top: 2px;
    text-decoration: none;
}
.button:hover{
    background-color: gray;
    text-decoration: none;
}
.button.active{
    background-color: #4f3636;
    color:white;
    box-shadow: 3px 3px 5px 0px rgb(255 255 255 / 26%);;
    border-color: #2b2b2b5c;
    top: 0px;
}
#highscore{
    
    position: relative;
    border: 1px solid #c9c9c9;
    background-color: #c9c9c9;
    box-shadow: -1px 0px 6px 0px rgb(255 255 255 / 26%);
    margin-bottom: 20px;
    padding: 10px;
    height: 700px;;

    transition: opacity 1.2s ease-in-out; 
}
.bar{
    
    transition: width 0.6s ease-in-out;
    border: 1px solid #644e4e;
    background-color: #c4bcbc;
    height: 29px;
    position: absolute;
    left: 0px;
    top: 0px;;
    margin-bottom: 0px;
    width: 0%;
    margin-bottom: 5px;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    box-shadow: 3px 3px 3px rgb(144 144 144 / 47%);
   // transition: opacity 2.5s 20.5s ease-in-out ; 
}
.bar.started{
    transition: width 0.6s ease-in-out, top 0.6s ease-in-out;   
}
/*
.bar:nth-child(1) { transition: width 0.6s ease-in-out,  top 0.6s ease-in-out; }
.bar:nth-child(2) { transition: width 0.7s ease-in-out,  top 0.7s ease-in-out; }
.bar:nth-child(3) { transition: width 0.8s ease-in-out,  top 0.8s ease-in-out; }
.bar:nth-child(4) { transition: width 0.9s ease-in-out,  top 0.9s ease-in-out; }
.bar:nth-child(5) { transition: width 1.0s ease-in-out,  top 1.0s ease-in-out; }
.bar:nth-child(6) { transition: width 1.1s ease-in-out,  top 1.1s ease-in-out; }
.bar:nth-child(7) { transition: width 1.2s ease-in-out,  top 1.2s ease-in-out; }
.bar:nth-child(8) { transition: width 1.3s ease-in-out,  top 1.3s ease-in-out; }
.bar:nth-child(9) { transition: width 1.4s ease-in-out,  top 1.4s ease-in-out; }
.bar:nth-child(10) { transition: width 1.5s ease-in-out,  top 1.5s ease-in-out; }
*/

.bar.hidden{
    display: none;
}
.barInner{
    position: absolute;
    left: 10px;
    width: 300px;
    color: #000000;
}

#typeButtons{
    margin-top: 15px;
    margin-bottom: 15px;
}
.toggle{
    padding: 5px 10px;
    border: 1px solid #d0d0d0;
    width:100px;
    background-color: #f3eded;
    box-shadow: 3px 3px 7px rgb(255 255 255 / 26%);;
    display: inline-block;
    text-align: center;
    cursor:popinter;
    color: #909090;
}
.toggleLeft{
    border-top-left-radius: 9px;
    border-bottom-left-radius: 9px;
 }
.toggleRight{
    border-top-right-radius: 9px;
    border-bottom-right-radius: 9px;
}
.toggle.active{
    background-color: #4f3636;
    box-shadow: 1px 1px 5px rgb(255 255 255 / 26%);;
    color: #ffffff;

}