/* 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

BG1 (Dark Blue)  : #0A191E      BG2 (Dark Green) : #143C0A
FG1 (Light Green): #3CB42D      FG2 (Light Blue) : #AFE1FA
FG3 (Off White)  : #F3FBF7

FG1 (Dark Blue)  : #4854A0      FG2 (Dark Red)   : #A02010
*/


/* ~~~~~~~~~~~~~~~~~~~~~~~~~ PAGE BASICS ~~~~~~~~~~~~~~~~~~~~~~~~~ */
#form {
    display: grid;
    justify-self: center;
    border: 1px solid black;
    background-color: #143C0A;
}
label {
    grid-column: 1/2;
    text-align: right;
    margin: 2px;
}
input {
    grid-column: 2/3;
    max-width: 200px;
}
button {
    grid-column: 1/3;
    max-width: 200px;
    justify-self: center;
    width: 100%;
    margin: 2px;
}
a {
    color: darkred;
    text-decoration: none;
    font-family: "Crimson Text", "Times New Roman", serif;
    font-size: 18px;
    height: 32px;
}

#status {
    text-align: center;
    grid-column: 2/3;
    font-family: "Crimson Text", "Times New Roman", serif;
}
#logout {
    width: 95%;
    grid-column: 2/3;
    justify-self: center;
}
#txtDiceValue {
    width: 106px;
    margin-top: 2px;
    margin-bottom: 2px;
}
#txtDiceName {
    margin-top: 2px;
    margin-bottom: 2px;
}
#welcome {
    text-align: center;
    font-size: x-large;
    font-family: "Karla", "Lucida Sans", sans-serif;
    margin: 4px;
    color: #143C0A;
    background-color: #AFE1FA;
    border: 2px solid #F3FBF7;
    border-radius: 8px 32px 8px 32px;
    padding: 2px 16px;
    max-width: 640px;
    grid-column: 1/3;
    justify-self: center;
    padding: 2px 16%;
}
#diceTable {
    grid-column: 1/3;
}
#diceTable table {
    width: 100%;
    border-collapse: collapse;
    background-color: #143C0A;
}
#diceTable td {
    border: 1px solid black;
    font-family: "Anonymous Pro", "Courier", monospace;
}
#diceTable button {
    width: 64px;
}
#diceTable thead tr {
    font-family: "Lora", "Times New Roman", serif;
    font-weight: bold;
    font-size: large;
    text-align: center;
    color: #0A191E;
    background-color: #3CB42D;
}
#diceTable td:first-child {
    width: 224px;

}
#diceTable td:nth-child(2){
    padding-left: 4px;
}
#diceTable td:nth-child(3), #diceTable td:nth-child(4), #diceTable td:nth-child(5){
    text-align: center;
}

/*######## ~~~~~~~~~~***~~~~~~~~~~***~~~~~~~~~~***~~~~~~~~~~ ##########
##                            MOBILE VIEW                            ##
########## ~~~~~~~~~~***~~~~~~~~~~***~~~~~~~~~~***~~~~~~~~~~ ########*/
/* ~~~~~~~~~~~~~~~~~~~~~~~~~ LOGIN PAGE ~~~~~~~~~~~~~~~~~~~~~~~~~ */
#form {
    padding: 16px;
    gap: 6px;
}
.login h2 {
    justify-self: center;
    padding-right: 60px;
    font-size: 18px;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~ INDEX PAGE ~~~~~~~~~~~~~~~~~~~~~~~~~ */
#index {
    text-align: center;
    grid-column: 2/3;
}

/*######## ~~~~~~~~~~***~~~~~~~~~~***~~~~~~~~~~***~~~~~~~~~~ ##########
##                            TABLET VIEW                            ##
########## ~~~~~~~~~~***~~~~~~~~~~***~~~~~~~~~~***~~~~~~~~~~ ########*/
@media only screen and (min-width: 481px) {
/* ~~~~~~~~~~~~~~~~~~~~~~~~~ LOGIN PAGE ~~~~~~~~~~~~~~~~~~~~~~~~~ */
#form {
    padding: 20px;
    gap: 8px;
}
.login h2 {
    padding-right: 128px;
    font-size: 20px;
}
label {
    margin: 4px;
}
#txtDiceValue, #txtDiceName {
    margin-top: 4px;
    margin-bottom: 4px;
}

}

/*######## ~~~~~~~~~~***~~~~~~~~~~***~~~~~~~~~~***~~~~~~~~~~ ##########
##                            LAPTOP VIEW                            ##
########## ~~~~~~~~~~***~~~~~~~~~~***~~~~~~~~~~***~~~~~~~~~~ ########*/
@media only screen and (min-width: 769px) {
/* ~~~~~~~~~~~~~~~~~~~~~~~~~ LOGIN PAGE ~~~~~~~~~~~~~~~~~~~~~~~~~ */
#form {
    padding: 24px;
    gap: 10px;
}
.login h2 {
    padding-right: 192px;
    font-size: 22px;
}
label {
    margin: 6px;
}
button {
    margin: 4px;
    padding: 2px;
}
#txtDiceValue, #txtDiceName {
    margin-top: 6px;
    margin-bottom: 6px;
}

}

/*######## ~~~~~~~~~~***~~~~~~~~~~***~~~~~~~~~~***~~~~~~~~~~ ##########
##                           DESKTOP VIEW                            ##
########## ~~~~~~~~~~***~~~~~~~~~~***~~~~~~~~~~***~~~~~~~~~~ ########*/
@media only screen and (min-width: 1025px) {
/* ~~~~~~~~~~~~~~~~~~~~~~~~~ LOGIN PAGE ~~~~~~~~~~~~~~~~~~~~~~~~~ */
#form {
    padding: 32px;
    gap: 12px;
}
.login h2 {
    padding-right: 224px;
    font-size: 24px;
}
}

/*######## ~~~~~~~~~~***~~~~~~~~~~***~~~~~~~~~~***~~~~~~~~~~ ##########
##                         LARGE SCREEN VIEW                         ##
########## ~~~~~~~~~~***~~~~~~~~~~***~~~~~~~~~~***~~~~~~~~~~ ########*/
@media only screen and (min-width: 1201px) {
/* ~~~~~~~~~~~~~~~~~~~~~~~~~ LOGIN PAGE ~~~~~~~~~~~~~~~~~~~~~~~~~ */
#form {
    padding: 48px;
    gap: 16px;
}
.login h2 {
    padding-right: 256px;
    font-size: 26px;
}
label {
    margin: 8px;
}
button {
    margin: 6px;
    padding: 4px;
}
#txtDiceValue, #txtDiceName {
    margin-top: 8px;
    margin-bottom: 8px;
}
}