/* to contain regular static classes and classes that may be added and removed
    as required by the application logic */

@import url('https://fonts.googleapis.com/css2?family=Anonymous+Pro:ital,wght@0,400;0,700;1,400;1,700&family=Coda:wght@400;800&family=Crimson+Text:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&family=Karla:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,200;1,300;1,400;1,500;1,600;1,700;1,800&family=Lora:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap');

/*
font-family: "Coda", "Calibri", cursive;                // Display
font-family: "Lora", "Times New Roman", serif;          // Serif 1
font-family: "Crimson Text", "Times New Roman", serif;  // Serif 2
font-family: "Karla", "Lucida Sans", sans-serif;        // Sans-Serif
font-family: "Anonymous Pro", "Courier", monospace;     // Monospace
*/


/* ~~~~~~~~~~~~~~~~~~~~~~~~~ PAGE BASICS ~~~~~~~~~~~~~~~~~~~~~~~~~ */
body {
    display: grid;
    font-family: "Lora", "Times New Roman", serif;
    background-color: lightgray;
}
header {
    grid-row: 1/2;
    font-family: "Coda", "Calibri", cursive;
    border: 1px solid black;
    border-radius: 24px;
}
main {
    grid-row: 2/3;
    display: grid;
    border: 1px solid goldenrod;
    border-radius: 24px;
    min-height: 96px;
    padding: 16px;
    margin: 16px 4px;
}
footer {
    grid-row: 3/4;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~ PLAYER UI ~~~~~~~~~~~~~~~~~~~~~~~~~ */
hr {
    width: 95%;
    height: 8px;
    background-color: darkgoldenrod;
}
#playerEntry {
    border: 2px solid blue;
    border-radius: 16px;
    padding: 8px;
}
#playerEntry div:first-child {
    display: grid;
}

#playerEntry #nameL {
    grid-column: 1/3;
    grid-row: 1/2;
    text-align: center;
    padding: 8px;
    font-family: "Anonymous Pro", "Courier", monospace;
    font-weight: bold;
    font-size: larger;
}
#playerEntry #playerOne {
    grid-column: 1/2;
    grid-row: 2/3;
    max-width: 60%;
    min-width: 192px;
    height: 16px;
    justify-self: center;
    margin: 16px 0px;
}
#playerEntry #playerTwo {
    grid-column: 2/3;
    grid-row: 2/3;
    max-width: 60%;
    min-width: 192px;
    height: 16px;
    justify-self: center;
    margin: 16px 0px;
}
#playerEntry #startbtn {
    grid-column: 1/2;
    grid-row: 3/4;
    width: 144px;
    height: 24px;
    border-radius: 16px;
    justify-self: center;
    margin: 4px 0px;
}
#playerEntry #quitbtn {
    grid-column: 2/3;
    grid-row: 3/4;
    width: 144px;
    height: 24px;
    border-radius: 16px;
    justify-self: center;
    margin: 4px 0px;
}
button:hover {
    background-color: gray;
}
button:active {
    background-color: darkslategray;
}
#errorMsg {
    text-align: center;
}
#players {
    text-align: center;
}

#rowBar, #colBar {
    width: 50%;
    justify-self: center;
    grid-row: 4/5;
}
#rowL, #colL {
    justify-self: center;
    grid-row: 5/6;
}
#rowBar, #rowL {
    grid-column: 1/2;
}
#colBar, #colL {
    grid-column: 2/3;
}


/* ~~~~~~~~~~~~~~~~~~~~~~~~~ GAME BOARD ~~~~~~~~~~~~~~~~~~~~~~~~~ */
#gamePlay {
    border: 4px solid black;
    height: min(50vh, 50vw);
    width: min(50vh, 50vw);
    justify-self: center;
    background-color: forestgreen;
    display: grid;
    border-collapse: collapse;
}

.gameSquare {
    border: 1px solid black;
    text-align: center;
    font-size: 100%;
}