body {
    background-color: rgb(58,58,58);
    font-family: 'Courier New', Courier, monospace;
    font-weight: bold;
    color: rgb(175,175,175);
    font-size: 11px;
}

a {
    color: rgb(255,0,0);
}

.whiteBlackSelector {
    background-color: rgb(58,58,58);
    color: rgb(175,175,175);
    font-family: 'Courier New', Courier, monospace;
    font-weight: bold;
}

.startGame {
    visibility: hidden;
}

.navBar {
    display: flex;
    flex-direction: column;
    background-color: black;
    font-family: 'Courier New', Courier, monospace;
    color: white;
    font-weight: bold; 
    width: 400px;
    border: 3px solid black;
}

.gameSpace {
    display: flex;
    flex-direction: row;
}

.headerTop {
    display: flex;
    flex-direction: row;
    border: 3px solid rgb(125,0,0);    
}

.headerMid {
    margin: auto;
    display: flex;
    flex-direction: row;
    width: 400px;
    border: 3px solid black;
}

.navLink {
    font-size: 11px;
}

.navBar div {
    font-size: 12px;
    background-color: rgb(58,58,58);
    color: rgb(175,175,175);
    text-align: center;
    align-content: center;
}

.bottomNav {
    flex-direction: row;
}

.sectionContainer {
    width: 400px;
    height: 400px;
    justify-self: center;
    margin: auto;
    border: 3px solid rgb(125,0,0);
}

.computerGraveyard {
    font-size: 10px;
    color: rgb(200,200,200);
    width: 180px;
    height: 275px;
    border: 3px solid rgb(125,0,0);
    float: top;
}

.playerGraveyard {
    font-size: 10px;
    color: rgb(200,200,200);
    width: 180px;
    height: 275px;
    border: 3px solid rgb(125,0,0);
    float: bottom;
}

.footer {
    font-size: 10px;
    width: 400px;
    margin: auto;
    color: rgb(175,175,175);
    border: 3px solid black;
    text-align: center;
}

.grid {
    display: flex;
    flex-wrap: wrap;
}


.cell {
    flex: 12.5%;
    height: 50px;
    font-size: 10px;
    text-align: center;
    color: black;
    background-repeat: no-repeat;
}

.cell img {
    max-width: 100%;
    max-height: 100%;
    background-repeat: no-repeat;
}

.cell:hover {
    /*background-color: rgb(0,0,150) !important;*/
    cursor: pointer;
}

/* colouring the chess board.  This is pretty ugly */

/* First Row */
.cell:nth-child(n+1):nth-child(-n+8):nth-child(even) {
    background-color: rgb(100,100,100)
}

.cell:nth-child(n+1):nth-child(-n+8):nth-child(odd) {
    background-color: rgb(235,235,235);
}

/* Second Row */
.cell:nth-child(n+9):nth-child(-n+16):nth-child(even) {
    background-color: rgb(235,235,235);
}

.cell:nth-child(n+9):nth-child(-n+16):nth-child(odd) {
    background-color: rgb(100,100,100)
}

/* Third Row */
.cell:nth-child(n+17):nth-child(-n+24):nth-child(even) {
    background-color: rgb(100,100,100);
}

.cell:nth-child(n+17):nth-child(-n+24):nth-child(odd) {
    background-color: rgb(235,235,235);
}

/* Fourth Row */
.cell:nth-child(n+25):nth-child(-n+32):nth-child(even) {
    background-color: rgb(235,235,235);
}

.cell:nth-child(n+25):nth-child(-n+32):nth-child(odd) {
    background-color: rgb(100,100,100);
}

/* Fifth Row */
.cell:nth-child(n+33):nth-child(-n+40):nth-child(even) {
    background-color: rgb(100,100,100);
}

.cell:nth-child(n+33):nth-child(-n+40):nth-child(odd) {
    background-color: rgb(235,235,235);
}

/* Sixth Row */
.cell:nth-child(n+41):nth-child(-n+48):nth-child(even) {
    background-color: rgb(235,235,235);
}

.cell:nth-child(n+41):nth-child(-n+48):nth-child(odd) {
    background-color: rgb(100,100,100);
}

/* 7th Row */
.cell:nth-child(n+49):nth-child(-n+56):nth-child(even) {
    background-color: rgb(100,100,100);
}

.cell:nth-child(n+49):nth-child(-n+56):nth-child(odd) {
    background-color: rgb(235,235,235);
}

/* Eighth Row */
.cell:nth-child(n+57):nth-child(-n+64):nth-child(even) {
    background-color: rgb(235,235,235);
}

.cell:nth-child(n+57):nth-child(-n+64):nth-child(odd) {
    background-color: rgb(100,100,100);
}