* {
    margin: 0
}

#website-container
{
    height: 100vh;
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
}


#checker-board
{

    /* the board it's self shouldn't ever be seen in a normal */
    /* game, but when increasing the size of the board sometimes */
    /* slivers of it cas be seen between the borders of tiles */

    background-color: #323232;
    display: flex;
    flex-wrap: wrap;
    border: solid;
    border-color: #323232;
}

.piece-counter
{
    border: solid;
    margin: 5vmin;
}

.tile
{
    box-sizing: border-box;
    border: solid;
    border-color: #323232;

    display: flex;
    justify-content: center;
    align-items: center;
}

/* would use box-sizing: border-box, but it makes the number of */ 
/* border dots inconsistent */
.piece
{

    height: 83%;
    width: 83%;

    border-radius: 100%;
    border: dotted;
    border-width: 0.8vmin;


    color: white;
    border-color: #323232;

    display: flex;
    justify-content: center;
    align-items: center;
}

.crown
{
    height: 60%;
}

/* board width: 80vmin */ 
/* each piece counter w/ margin is 17 vmin. */
/* total: 114 */
/* since we only display the piece counter when the aspect */
/* ratio is greater than 1.3/1 or less than 1/1.3 we only */ 
/* need to make sure the sum of the length is < 130vmin */ 

/* if the screen is tall*/ 
.piece-counter { display: none; }
@media (max-aspect-ratio: 1/1.3) {
    .piece-counter {
        display: flex;
        width: 80vmin;
        height: 13vmin;
    }

    #website-container {
        flex-direction: column;
    }
}

/* if the screen is wide*/ 
@media (min-aspect-ratio: 1.3/1) {
    .piece-counter {
        display: flex;
        height: 80vmin;
        width: 13vmin;
    }

}