styles.css

:root {
    --bg-color: #111;
    --bg-color2: #777;
    --font-color: #eee;
}

html {
    background-color: #eee;
    /* background-color: var(--bg-color2);
    color: var(--font-color); */

    text-align: center;
    font-family: monospace;
    font-size: 1em;
    margin:0;
    padding:0;
    height: 100%;

    background-image:
          linear-gradient(45deg, #ccc 25%, transparent 25%), 
          linear-gradient(135deg, #ccc 25%, transparent 25%),
          linear-gradient(45deg, transparent 75%, #ccc 75%),
          linear-gradient(135deg, transparent 75%, #ccc 75%);
    background-size:100px 100px; /* Must be a square */
    background-position:0 0, 50px 0, 50px -50px, 0px 50px; /* Must be half of one side of the square */
}

h1,
h2,
strong {
  color: #333;
}

h1 {
    margin: 0;
    padding: .5em;
}

body {
    /* background-color: var(--bg-color); */
    background-color: rgba(238, 238, 238, 0.85);
    /* backdrop-filter: blur(2px); */
    background-image: none;
    color: #555;
    max-width: 50em;
    margin: 0 auto;
    min-height: 100%;
    -webkit-box-shadow: 0px 0px 14px 5px rgba(31, 31, 31, 0.8); 
    box-shadow: 0px 0px 14px 5px rgba(31, 31, 31, 0.8); 
    border: 2px solid #333;
    border-top: 0;
    border-bottom: 0;

}


p {
    margin: .1rem;
    padding: 0;
}

#boardContainer {
    width: 100%;
    max-width: 400px;
    margin: auto;

    -webkit-box-shadow: 0px 0px 14px 5px rgba(31, 31, 31, 0.4); 
    box-shadow: 0px 0px 14px 5px rgba(31, 31, 31, 0.4); 
}

#board {
    margin-top: 1rem;
    transition: box-shadow 0.1s ease-in-out;


    border: 2px solid #333;
    border-bottom: 0;
}

img {
    cursor: grab;
}

#statusBar {
    display: flex;
    align-items: center;
    justify-content: center;
    align-content: center;
    margin:auto;
    max-width: 400px;
    height: 40px;
}

#scores {
    height: 40px;
    background-color: #333;
    color: #eee;
    align-items: center;
    justify-content: space-around;
    align-content: center;
    display:flex; 
    max-width: 400px; 
    margin: auto;
}

.white-to-move {
    background-color: #eee;
    color: #333;
    border: 2px solid #333;
}

.black-to-move {
    background-color: #333;
    color: #eee;
    border-bottom: 2px solid #eee ;
}

.wrong {
    background-color: #e77;
    color: #333;
    border: 2px solid #333;
}

.correct {
    background-color: #7e7;
    color: #333;
    border: 2px solid #333;
}

.buttonTray {
    height: 40px;
    align-items: center;
    justify-content: space-around;
    align-content: center;
    display:flex; 
    max-width: 400px; 
    margin: auto;
    margin-top: 1em;
}

button {
    height: 40px;
    background-color: #eee;
    padding: 0 2em 0 2em;
    color: #333;
    border: 2px solid #333;
    cursor: pointer;
    transition: box-shadow 0.3s ease-in-out;
}

button:hover {
    -webkit-box-shadow: 0px 0px 14px 5px rgba(31, 31, 31, 0.4); 
    box-shadow: 0px 0px 14px 5px rgba(31, 31, 31, 0.4);
}

#winButtons, #loseButtons{
    display: none;
}