style.css

body, a {
    font-family: Roboto, sans-serif;
}

h1, h2 {
    font-family: Gotu, sans-serif;
}

h1 {
    margin: 1.5em 0;
    text-align: center;
}

.hidden {
    display: none;
}

/* Disables text selection, used to avoid highlighting
the pieces by mistake, since they're basically text
https://stackoverflow.com/a/4407335 */
.noselect {
    cursor: default;
    
    /* Disable Wekit blue higlight - https://stackoverflow.com/a/29961714 */
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-tap-highlight-color: transparent;

    -webkit-touch-callout: none;    /* iOS Safari */
    -webkit-user-select: none;      /* Safari */
    -khtml-user-select: none;       /* Konqueror HTML */
    -moz-user-select: none;         /* Old versions of Firefox */
    -ms-user-select: none;          /* Internet Explorer/Edge */
    user-select: none;              /* Non-prefixed version, currently
                                    supported by Chrome, Opera and Firefox */
}


/***********************
********  MENU  ********
************************/


.btn-menu {
    position: absolute;
    top: 0.6em;
    left: 0.6em;
    padding: 12px;
    font-size: 1.5em;
    background-color: rgba(0, 0, 0, 0.1);
    border-radius: 50%;
}
.btn-menu:hover {
    background-color: rgba(0, 0, 0, 0.15);
    cursor: pointer;
}

#options {
    -webkit-box-shadow: 0px 2px 8px -1px rgba(0,0,0,0.35);
    -moz-box-shadow: 0px 2px 8px -1px rgba(0,0,0,0.35);
    box-shadow: 0px 2px 8px -1px rgba(0,0,0,0.35);

    text-align: center;
    margin: 0 auto;
    background-color: #ddd;
    border-radius: 10px;
    padding: 24px 30px;
    max-width: 200px;
}
#options h2 {
    margin-top: 30px;
    margin-bottom: 14px;
}
/* The h2 in the first child (div) in #options */
#options > div:first-child > h2 {
    margin-top: 0;
}
.relative {
    position: relative;
}
/* Used for the "more info" link in chessboard options */
.title-info {
    font-size: 12px;
    color: #777;
    position: absolute;
    right: 0;
    bottom: 10px;
}

.radio-emoji {
    /* Clicking on the label counts as click on the radio. Got this trick from here:
    https://stackoverflow.com/questions/17541614/use-images-instead-of-radio-buttons */
    display: none;
}
.radio-emoji + label {
    cursor: pointer;
    font-size: 2.5em;
    /* Allows ::after to have absolute position */
    position: relative;
    /* Increases spacing between options */
    margin: 0 0.15em;
    opacity: 0.35;
    transition: opacity 0.2s;
}
.radio-emoji + label:hover {
    opacity: 0.65;
}
.radio-emoji:checked + label {
    opacity: 1;
}
/* Little green check mark at bottom right */
.radio-emoji:checked + label::after {
    content: "";
    position: absolute;
    bottom: -2px;
    left: 4px;
    height: 6px;
    width: 12px;
    border-left: 4px solid #6a7;
    border-bottom: 4px solid #6a7;
    transform: rotate(-45deg);
}

#options select {
    display: block;
    margin: 0 auto;
}

#options button {
    cursor: pointer;
    display: block;
    margin: 26px auto 0 auto;
    padding: 8px 14px;
    background-color: #444;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 1.2em;
    transition: background-color .15s;
}
#options button:hover {
    background-color: #3b3b3b;
}
#options button:active {
    background-color: #2a2a2a;
}

/* Apply style to a label related to a disabled input
* https://stackoverflow.com/a/19363036 */
input:disabled+label {
    opacity: 0.5;
}


/*************************
******  GAME TEXTS  ******
**************************/


#messages-container {
    margin: 20px 0;
}
.message {
    margin-top: 12px;
    margin-bottom: 0;
    font-family: monospace;
    font-size: 1.2em;
    /* Prevents the element from collapsing if empty */
    min-height: 1.3em;
    text-align: center;
}


/*************************
******  CHESSBOARD  ******
**************************/


table {
    margin: 0 auto;
    border: 1px solid #555;
    border-collapse: collapse;
}

td {
    width: 40px;
    height: 40px;
    text-align: center;
    vertical-align: middle;
}

.piece-white,
.piece-black {
    font-size: 1.8em;
}
.piece-white {
    color: #eee;
    /* https://stackoverflow.com/a/4919231 */
    text-shadow: -1px -1px 1px #865, 1px -1px 1px #865, -1px 1px 1px #865, 1px 1px 1px #865;
}
.piece-black {
    color: #222;
    text-shadow: -1px -1px 1px #fed, 1px -1px 1px #fed, -1px 1px 1px #fed, 1px 1px 1px #fed;
}

/* Chessboard colors */
.cell-black {
    background-color: #af8c77;
}
.cell-white {
    background-color: #ebd5be;
}

/* Makes it easier to understand which
cells can be interacted with */
.cell-selectable {
    cursor: pointer;
}

/* Creates a blue border around the piece that was selected  */
.cell-selected {
    position: relative;
}
.cell-selected::after {
    content: " ";
    box-sizing: border-box;
    border: 4px solid #48f;
    width: 100%;
    height: 100%;
    opacity: 0.7;
    /* Remove element from page flow */
    position: absolute;
    /* Centers square on cell */
    top: 0;
    left: 0;
}

/* These allow to highlight the cells
where the selected piece can be moved (or cannot) */
.cell-move-free,
.cell-move-enemy,
.cell-move-illegal {
    /* Allows ::after to have absolute position */
    position: relative;
}
.cell-move-free::after,
.cell-move-enemy::after,
.cell-move-illegal::after {
    content: " ";
    width: 100%;
    height: 100%;
    opacity: 0.2;
    /* Remove element from page flow */
    position: absolute;
    /* Centers square on cell */
    top: 0;
    left: 0;
}
.cell-move-free::after {
    background-color: chartreuse;
    cursor: pointer;
}
.cell-move-enemy::after {
    background-color: crimson;
    cursor: pointer;
}
.cell-move-illegal::after {
    background-color: #84b;
    cursor: not-allowed;
}