:root {
    --width: 650px;
    --height: 650px;
  }
html, body{
    height: 100%;
}
body {
    background-color: black;
    overscroll-behavior: contain;
    font-family: Arial; 
}
h1{
    color: white;
    text-align: center;  
    font-size: 30px;
    margin-top: 6px;
}
h3{
    color: white;
    background-color: green;
    text-align: center;   
    margin: 0;
    margin-top: 20px;
    padding-top: 20px;
    padding-bottom: 5px;
    height: 35px;
    border: 2px solid white;
    width: var(--width);
}
.header{
    border: 1px solid white;
    height: 50px;   
    display: block;
    background-image: linear-gradient(dimgray, black);
}
.header .headerItem{
    display: inline-block;
    width: 33%;
}
.pauseButton{
    float:right;
    width: 35px;
    height: 35px;
    margin-top: 6px;
    margin-right: 10px;
    white-space: nowrap;
    overflow: hidden;   
    opacity: 0.6;
    color: white;    
    /* border: 1px solid white; */
}
.pauseButton-stopped{
    background-color: red;
}
.pauseButton-started{
    background-color: inherit;
}
.pauseButton-stopped::after{
    content: ">";
}
.pauseButton-started::after{
    content: "| |";
}
.slider {
    -webkit-appearance: none;  
    appearance: none; 
    height: 25px; 
    background: green; 
    outline: none;   
    -webkit-transition: .2s; 
    transition: opacity .2s;
}
.slider:hover {
    opacity: 1; 
}
.slider::-webkit-slider-thumb {
    -webkit-appearance: none; 
    appearance: none;
    width: 25px; 
    height: 25px; 
    background: white; 
    cursor: pointer; 
}
.slider::-moz-range-thumb {
    width: 25px; 
    height: 25px; 
    background: white;
    cursor: pointer; 
}
.menuBar{   
    overflow: hidden;   
}
.dropdown {
    float: left;
    overflow: hidden;
} 
.dropdown .dropDownButton {
    font-size: 16px;
    border: none;
    outline: none;
    color: white;
    background-color: inherit;
    margin-left: 6px; 
}
.dropdown-content {
    display: none;
    position: absolute;
    background-color: black;
    color: white;
    min-width: 200px;
    font-size: 25px;
    border: 1px solid white;
    z-index: 1; 
}
.dropdown-content a {
    float: none;
    color: white;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}
.dropdown-content a:hover {
    background-color: white;
    color: black;
}  
.dropdown:hover .dropdown-content {
    display: block;
}
.canvasGameBoard {
    display: block;   
    padding-left: 0;
    padding-right: 0;
    margin-left: auto;
    margin-right: auto;  
    width: var(--width);
    border: 2px solid white;   
    background-color: green;      
    height: var(--height); 
}
.canvasController{
    background-color: gray;  
    height: 500px;
    width: var(--width);   
    border-left: 2px solid white;
    border-right: 2px solid white;
    border-top: 2px solid white;
    padding-left: 0;
    padding-right: 0;
    margin-left: auto;
    margin-right: auto;     
    margin-top: 0px;   
    background-image: linear-gradient(black, gray);
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */
}
table {   
    text-align: center;
    width: var(--width);  
    margin-left: auto;
    margin-right: auto;  
    color: white;    
    border: 1px solid white; 
}
.content{   
    margin-left: auto;
    margin-right: auto;   
    width: var(--width);
}
table th {
    background-color: dimgray; 
    font-size: 20px;   
}
.tableStats{
    user-select: none;
    pointer-events: none;
}
table.tableStats th, td {
    border: 1px solid;
}
table.tableStats td {  
    width: 25%;
    font-size: 25px;
}
.tableStatsTd{
    background-color: gray;
    color: white;
}
.tableStatsTdHighLightLoss{
    background-color: red;
}
.tableStatsTdHighLightGain{
    background-color: white;
    color: gray;
}
table.tableHighScore{
    background-color: white;    
}
table.tableHighScore th{
    height: 40px;
}
table.tableHighScore th, td {
    border: none;
}
table.tableHighScore td {   
    color: white;   
    font-size: 25px;
}
.tableHighScore tr:nth-child(even) td {
    background-color: green;
}
.tableHighScore tr:nth-child(odd) td {    
    background-color: rgb(0, 150, 0);
    /* color: white; */
}
.thName {
    width: 50%;    
} 

.settingsArea{
    width: var(--width);
    border: 1px solid white;
    font-size: 25px;
    color: white;
    display: block;
    padding-top: 60px;    
    padding-bottom: 50px;
}
.settingsArea input {
    width: 90%;
    margin-left: 5%;
}
.settingsArea label {
    margin-left: 5%;
}
.greenButton{
    background-color: green;
    color: white;
}
.goHomeButton {  
    margin-left: 5%;
    width: 150px;
    height: 35px;
    /* opacity: 0.5; */
    font-size: 20px;
}
.goHomeButton-highscore {  
    margin-left: 0px;  
}
.enterHighScoreName{
    font-size: 20px;
    height: 40px;
    background-color: black;
    color: white;
    display: block;
    padding-top: 21px;    
    padding-bottom: 10px;    
    width: var(--width);
    border: 1px solid white;
}
.enterHighScoreName label {
    padding-left: 10px;
}
.enterHighScoreName input {
    height: 30px;
    margin-left: 10px;   
    padding-right: 25px;   
    font-size: 20px;
    background-color: black;
    color: white;
    border: 1px solid white;
}
.enterHighScoreName button {
    height: 35px;  
    margin-left: 10px;   
    font-size: 20px;  
}
.centerItems{
    margin-top: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--width);
    padding-left: 0;
    padding-right: 0;
    margin-left: auto;
    margin-right: auto; 
}
.progressHeaderRow{
    display:block; 
    margin-top: 7px;
    margin-left: 5px;
}
.progressHeaderItem{
    display: inline-block;
    width: 23.8%;   
    margin-left: 2px;
    color: white;
    text-align: center;
}
.progressRow{
    display:block; 
    margin-top: 0px;
    margin-left: 5px;
}
.progressItem{
    display: inline-block;
    width: 23.7%;   
    height: 15px;
    border: 2px solid white;
    background-color: dimgray;
    margin-right: 1px;
    white-space: nowrap;
    overflow: hidden;  
}
button.bounceButton{
    width: 653px;
    font-size: 25px;
    background-color: black;
    color: white;
    text-align: center;
    border: 3px solid white;  
    position: fixed;
    bottom: 0;
    padding-top: 4px;   
    height: 60px;
}
.hide{
    display: none;
}
.show{
    display: inline-block;
}

/* @media screen and (max-width: 600px) {
    .canvasController { 
        display: inline-block;                   
    } 
} */