/* Styles pertaining to the main parts of the web page. */
html {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    background-color: #6a8297;
}

body {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    
}

/* Hidden Style class used to remove or 'hide' unneeded elements on the page. */
.hidden {
    display: none !important;
}

/* Styling pertaining to the various input buttons and radio buttons. */
input, button {
    background-color: #FCAB64;
    font-weight: bold;
}

input:checked {
    font-weight: bold;
    accent-color: #FCAB64;
}

input:hover {
    background-color: #f5f7a0;
    font-weight: bold;
}

/* Styles Pertaining to the main containers on the page. */

#mainBoard {
    width: 40%;
}

#game-info {
    position: absolute;
    top: 2%;
    height: 50px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

#npc-vs-npc-buttons {
    position: absolute;
    bottom: 1%;
    right: 1%;

    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 250px;
}

/* Styles Pertaining to the various nested containers. */

#current-game {
    display: flex;
    justify-content: space-around;
    width: 90vw;
}

#npc-vs-npc-info {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100vw;
}

#npc-vs-npc-info > div {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-left: 20px;
    margin-right: 20px;
}

/* Styles Pertaining to specific elements on the page. */

#continue-button {
    width: 75px;
}

#continue-checkbox {
    width: 175px;
}

#reload-button {
    position: absolute;
    left: 1%;
    bottom: 1%;
}

/* Game Info Display */

#npc-one span, #npc-two span, #main-npc span {
    font-weight: 900;
}

/* Custom CSS Styling for the Main Chess Board */
.white-1e1d7 {
background-color: #A3B9C9;
color: #000000;
}

.black-3c85d {
background-color: #23395B;
color: #ffffff;
}

.board-b72b1 {
border: 4px solid rgb(18, 34, 48);
box-sizing: content-box;
}