/* LTAG */

.letterHide {
    color: white;
    background-color: white;
}
.letterYellow {
    color: white;
    background-color: black;
}
.letterBlack {
    color: black;
    background-color: white;
}
.letterWhite {
    color: white;
    background-color: black;
}
.letterRed {
    color: white;
    background-color: red;
}
.letterBlue {
    color: white;
    background-color: blue;
}
.letterGreen {
    color: black;
    background-color: lime;
}
.savethisfont {
    font-family: 'Courier New', Courier, monospace;
    font-family: Arial,Helvetica,sans-serif;
    font-family: Consolas, Menlo, Monaco, "Liberation Mono", "Courier New", monospace;
}
.alphabet {
    padding: 0px;
    margin-bottom: 5px;
    /* font-size:   26px;  */
    font-size:   30px; 
    font-weight: bold; 
    font-family: 'Fira Mono', monospace;
    /* font-family: Consolas, Menlo, Monaco, "Liberation Mono", "Courier New", monospace; */
    /* font-family: monospace; */
}
th, td {
    padding: 5px;
    font-size:large; 
    font-weight:normal; 
    font-family: Georgia, serif;
    /* font-family: Consolas, Menlo, Monaco, "Liberation Mono", "Courier New", monospace; */
    /* font-family:sans-serif; */
  }
td.tilecell {
    background:    #ffffff;
    width: 100px;
    margin: auto;
    text-align: center;
}
label, span {
    font-size:large; 
    font-weight:bold; 
    font-family: Georgia, serif;
    /* font-family: Consolas, Menlo, Monaco, "Liberation Mono", "Courier New", monospace; */
    /* font-family:sans-serif; */
}
p, ul {
    font-size:large; 
    font-weight:normal; 
    font-family: Georgia, serif;
    /* font-family: Consolas, Menlo, Monaco, "Liberation Mono", "Courier New", monospace; */
    /* font-family:sans-serif; */
}
.mybutton {
    background:    #0000ff;
    background:    linear-gradient(#0000ff, #0b5394);
    border:        3px solid #ffffff;
    border-radius: 11px;
    padding:       3px 18px;
    color:         #ffffff;
    display:       inline-block;
    font:          normal bold 18px/1 "Open Sans", sans-serif;
    margin-bottom: 10px;
    text-align:    center;
    text-shadow:   1px 1px #000000;
}
.howtobutton {
    background:    #00ff00;
    background:    linear-gradient(#00ff00, #0b9453);
    border:        3px solid #ffffff;
    border-radius: 11px;
    padding:       3px 18px;
    color:         #ffffff;
    display:       inline-block;
    font:          normal bold 18px/1 "Open Sans", sans-serif;
    margin-bottom: 10px;
    text-align:    center;
    text-shadow:   1px 1px #000000;
}
.helpbutton {
    background:    #00ff00;
    background:    linear-gradient(#00ff00, #0b9453);
    border:        3px solid #ffffff;
    border-radius: 11px;
    padding:       3px 18px;
    color:         #ffffff;
    display:       inline-block;
    font:          normal bold 18px/1 "Open Sans", sans-serif;
    margin-bottom: 10px;
    text-align:    center;
    text-shadow:   1px 1px #000000;
}
.testbutton {
    background:    #ff0000;
    background:    linear-gradient(#ff0000, #940b53);
    border:        3px solid #ffffff;
    border-radius: 11px;
    padding:       3px 18px;
    color:         #ffffff;
    display:       inline-block;
    font:          normal bold 18px/1 "Open Sans", sans-serif;
    margin-bottom: 10px;
    text-align:    center;
    text-shadow:   1px 1px #000000;
}
.congrats    {color: red;
    font-size: 30px; 
    font-weight: bold;
    }
#errormsg    {color: red;
    font-size: 16px; 
    font-weight: bold;
    }
#redV    {
    font-size: 22px; 
    font-weight: normal;
    font-family:'sans-serif', Courier;
    }

.tile    {
    font-size: 60px; 
    font-weight: 800;
    /* font-family: 'Fira Mono', monospace; */
    font-family:'sans-serif', Ariel, monospace;
    /* font-family: Consolas, Menlo, Monaco, "Liberation Mono", "Courier New", monospace; */
    text-align: center;
    margin: auto;
    }
.tilewhite {
    color: white;
}
.tileWhite {
    color: white;
}
.tilegreen {
    color: lime;
}
.tileGreen {
    color: lime;
}
.tilered {
    color: red;
}
.tileRed {
    color: red;
}
.tileblue {
    color: blue;
}
.tileBlue {
    color: blue;
}
.tileblack {
    color: black;
}
.tileBlack {
    color: black;
}
.tileyellow {
    color: fuchsia;
}
.tileYellow {
    color: fuchsia;
}
.letter    {
    font-size: 60px; 
    font-weight: bold;
    /* font-family: 'Fira Mono', monospace; */
    font-family: Consolas, Menlo, Monaco, "Liberation Mono", "Courier New", monospace;
    text-align: center;
    margin: auto;
    /* font-family:'sans-serif', Ariel Black, monospace; */
    /* font-family:'serif', Courier; */
    }
#bluelet    {color: blue;
    font-size: 60px; 
    font-weight: normal;
    font-family: Consolas, Menlo, Monaco, "Liberation Mono", "Courier New", monospace;
    }
#redlet    {color: red;
    font-size: 60px; 
    font-weight: normal;
    font-family: Consolas, Menlo, Monaco, "Liberation Mono", "Courier New", monospace;
    }
#greenlet    {color: green;
    font-size: 60px; 
    font-weight: normal;
    font-family: Consolas, Menlo, Monaco, "Liberation Mono", "Courier New", monospace;
    }
.textBox {
    padding: 10px;        
    font-family: Georgia, serif;
    /* font-family: Consolas, Menlo, Monaco, "Liberation Mono", "Courier New", monospace; */
}
.big-input {
    width: 100%;          /* Fill available space */
    max-width: 200px;     /* Don't get too big on large screens */
    height: 40px;         
    font-size: 20px;      
    font-weight: bold;    
    padding: 10px;        
    border: 2px solid #333;
    border-radius: 5px;
    box-sizing: border-box; /* Keep padding inside width */
}
.big-email {
    width: 100%;          /* Fill available space */
    max-width: 400px;     /* Don't get too big on large screens */
    height: 40px;         
    font-size: 20px;      
    font-weight: bold;    
    padding: 10px;        
    border: 2px solid #333;
    border-radius: 5px;
    box-sizing: border-box; /* Keep padding inside width */
}
.big-three {
    width: 100%;          /* Fill available space */
    max-width: 100px;     /* Don't get too big on large screens */
    height: 40px;         
    font-size: 20px;      
    font-weight: bold;    
    padding: 10px;        
    border: 2px solid #333;
    border-radius: 5px;
    box-sizing: border-box; /* Keep padding inside width */
}

/* Adjust size for small screens */
@media (max-width: 600px) {
    .big-input, .big-email, .big-three {
        font-size: 18px;   /* Slightly smaller text */
        height: 45px;      /* Slightly smaller height */
    }
}
.center {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}
TABLE.maintable {
    width: 600px;
    max-width: 600px;     /* Don't get too big on large screens */
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    border: 2px solid black;
}
TABLE.maintable TD{
    width: 100px;
    text-align: center;
    border: 2px solid black;
}
TABLE.maintable TD.left{
    text-align: left;
    color: black;
}
TABLE.maintable TD.center{
    text-align: center;
    color: black;
}
TABLE.maintable TD.right{
    text-align: right;
    color: black;
}
TABLE.testtable {
    width: 600px;
    max-width: 600px;     /* Don't get too big on large screens */
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    border: 2px solid red;
}
TABLE.testtable TD{
    width: 100px;
    text-align: center;
    border: 2px solid red;
}
TABLE.testtable TD.left{
    text-align: left;
    color: red;
}
TABLE.testtable TD.center{
    text-align: center;
    color: red;
}
TABLE.testtable TD.right{
    text-align: right;
    color: red;
}
TABLE.statstable {
    width: 550px;
    max-width: 550px;     /* Don't get too big on large screens */
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    border: 1px solid black;
}
TABLE.statstable TD{
    width: 100px;
    text-align: center;
    border: 1px solid black;
}
TABLE.statstable TH{
    width: 100px;
    text-align: center;
    border: 1px solid black;
}
TABLE.statstable TD.left{
    text-align: left;
    color: black;
}
TABLE.statstable TD.center{
    text-align: center;
    color: black;
}
TABLE.statstable TD.right{
    text-align: right;
    color: black;
}