redtheme.css

button {
    border: 1px solid rgba(244,82,82,0.8);
}

button:hover {
    border: 1px solid #d63434;
}

div.indexinner section {
    width: 680px;
    padding: 30px;
    margin: 8px;
    background-color: brown;
    border-radius: 8px;
    margin: auto;
}

section.welcome {
    display: flex;
    justify-content: space-evenly;
}

.welcome div {
    display: flex;
    flex-direction: column;
    align-content: space-around;
}

.welcome div p {
    font-size: small;
    color: antiquewhite;
    font-weight: 100;
    font-family: sans-serif;
    margin-top: 8px;
}

div.indexinner section.demo {
    display: none;
}

div.indexinner section.start {
    display: none;
}

div.indexinner section.join {
    display: none;
}

section.welcome a {
    color: white;
    font-size: large;
}

section.welcome a:hover {
    text-decoration: underline;
    cursor: pointer;
}

label {
    text-align: left;
    margin-bottom: 6px;
    font-family: sans-serif;
    color: antiquewhite;
    font-size: smaller;
}

section.playerDash {
    background-color: brown;
    width: 300px;
    height: 630px;
    padding: 19px;
    margin-right: 12px;
    border-radius: 8px;
}

header {
    margin: 6px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* width: 92%; */
    border-radius: 4px;
    background-color: brown;
}

header.playerturn {
    padding: 10px 12px 4px;
    margin: 26px 0 0;
    font-size: smaller;
    font-weight: 900;
    background-color: #f9b4ad;
    color: #2f4f2f;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    height: 42px;
    width: 92%;
}

header.playerturn.yourturn {
    background-color: #d44949;
}

.yourturn #turnstatus {
    color: white;
}

.yourturn #pointsInPlay {
    color: white;
}

h1 {
    color: antiquewhite;
    margin: 34px auto;
}

h2 {
    color: blanchedalmond;
    font-weight: 400;
    letter-spacing: 0.5px;
    margin: 24px 0;
}

#name {
    margin: 18px 0;
}

#mainbtns {
    display: flex;
    width: 90px;
    justify-content: space-between;
    /* padding: 0 6px; */
}

#shuffle {
    color: antiquewhite;
    text-align: center;
    font-size: larger;
    margin: 16px auto;
    /*transform: rotate(-90deg);
    /* width: 32px; */
}

.fa-random {
    transform: rotate(-90deg);
}

#undo svg, #shuffle svg {
    margin: 10px;
}

#done svg {
    margin: 10px 12px;
}

h3 {
    font-family: sans-serif;
    color: darkslategray;
    text-transform: uppercase;
    font-size: smaller;
}

div.inlineflex {
    display: inline-flex;
    width: 100%;
    align-items: center;
}

#mwlogo {
    width: 50px;
    height: 50px;
    padding: 8px;
}

#lastwords {
    padding-bottom: 8px;
}

p.listitem {
    font-size: smaller;
    color: darkslategray;
    margin: 0 16px 8px;
}

span.word {
    /* color: rgb(244,164,96); */
    color: goldenrod;
    font-weight: 700;
    font-family: sans-serif;
    padding-right: 6px;
}

div.tile {
    width: 40px;
    height: 40px;
    margin: 2px;
    background-color: burlywood;
    font-size: larger;
    font-weight: 500;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    font-family: sans-serif;
    cursor: default;
    border-radius: 3px;
}

div.tile.notready {
    background-color: #cc5c5c;
}

.rack .tile {
    background-color: rgba(198, 89, 89, 1);
    color: white;
}

.rack .blank-tile {
    color:  rgba(198, 89, 89, 1);
}


div.tile.selectable {
    border: 1px solid #b22322;
    border-radius: 4px;
    width: 38px;
    height: 38px;
    cursor: move;
    /* box-shadow: 1px 1px 1px saddlebrown; */
    box-shadow: 1px 1px 3px #6d0000;
    background-color: #c71717;
}

div.tile.selectable:not(.blank-tile) {
    color: white;
}

div.tile.selectable:hover {
    border: 1px solid antiquewhite;
    background-color: white;
    color: darkred;
}

div.blank-tile.selectable {
    color: #c71717;
}

div.tile.blank-tile.selectable:hover {
    color: white;
}

#turnstatus {
    color: #2f4f2f;
    font-family: sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    /* width: 55%; */
    padding-left: 4px;
}

#pointsInPlay {
    font-size: medium;
    font-weight: 500;
    /* width: 12%; */
    font-family: sans-serif;
    color: #2f4f2f;
    /* padding-right: 4px; */
}

#done, #undo, #shuffle {
    font-size: large;
    color: rgb(250,235,215,0.2);
    width: 40px;
    height: 40px;
    /* background-color: rgba(206,120,120,0.7); */
    border-radius: 50px;
}


#done.selectable, #undo.selectable, #shuffle.selectable {
    color: antiquewhite;
}

#done.selectable:hover, #undo.selectable:hover, #shuffle.selectable:hover {
    color: white;
    background-color: rgba(205,92,92,0.4);
}

#done.disabled, #undo.disabled, #shuffle.disabled {
    /* color: indianred; */
    /* background-color: rgba(205,92,92,0.4); */
    /* color: rgb(160 75 75 / 1); */
    color: rgb(250,235,215,0.2);
}

#playerdivscontainer.playerdashsection {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    padding-bottom: 8px;
}

div.playerdiv.turn {
    font-weight: 700;
    background-color: rgb(255 218 216);
}

div.playerdashsection {
    margin: 0 0 16px 0;
    background-color: rgb(255,245,242);
    border-radius: 8px;
    color: darkslategray;
}
/*
div.playerdashsection.playerlist {
    background-color: rgb(234, 202, 201);
}
*/

div.cell {
    background-color: rgba(211,192,168, 0.6);
}

div.blank {
    color: rgba(211,192,168, 0.1);
}

div.cell.live {
    width: 36px;
    height: 36px;
    border: 2px dotted rgba(119, 5, 4, .7);
}

div.TW {
    background-color: rgba(222, 22, 17, 0.6);
}

div.DL {
    background-color: rgba(173, 216, 230, 0.7);
}

div.DW {
    background-color: rgba(248, 163, 163, 0.6);
}

div.TL {
    background-color: rgba(48, 167, 247, 0.8);
}

div.tile.lastplayed {
    background-color: goldenrod;
    border: 1px solid goldenrod;
    color: white;
    width: 38px;
    height: 38px;
}

#bell {
    width: 5%;
    font-size: medium;
    color: sandybrown;
}

div.back {
    align-self: flex-start;
    color: white;
    display: flex;
    align-items: center;
    width: fit-content;
    height: 20px;
    box-sizing: border-box;
}

div.back:hover {
    border-bottom: 1px solid white;
}

.back a, .back p {
    color: white;
    text-decoration: none;
}

.fa-arrow-left {
    font-size: smaller;
    margin-right: 6px;
}

/*
#exitgame {
    margin: auto;
    background-color: brown;
    border: 1px solid white;
}

#exitgame:hover {
    background-color: red;
}
*/

.fa-sign-out-alt {
    font-size: smaller;
    margin-right: 6px;
    transform: rotate(180deg);
}

#exitgamecancel, #blanklettercancel {
    background-color: rgba(0,0,0,0.4);
    border: 1px solid white;
}

#exitgamecancel:hover, #blanklettercancel:hover {
    background-color: black;
}

#exitgamecancel, #exitgameconfirm {
    margin: 12px 24px;
}

div#demoinstructions {
    display: flex;
    justify-content: space-evenly;
    height: 120px;
    align-items: baseline;
    padding-top: 30px;
}

div#demoinstructions p {
    font-family: sans-serif;
    font-weight: 100;
    font-size: medium;
}

div#demoinstructions span {
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: goldenrod;
}

.fa-smile {
    display: block;
    margin: auto;
    font-size: x-large;
    color: lightgoldenrodyellow;
    margin-bottom: 30px;
}

#demo_modal_drag {
    background-color: white;
}

#demo_modal_drop {
    background-color: rgba(255,255,255,0.2);
    border: 2px dotted white;
    box-sizing: border-box;
}

#drag_drop_arrow {
    color: rgba(255,255,255,0.6);
    align-self: center;
    margin: 4px;
}

div.container {
    display: inline-flex;
}