@font-face {
    font-family: menlo;
    src: url(Menlo-Regular.ttf);
}

.hidden {
    display: none;
}

.transition {
    transition: color 0.25s, background-color 0.25s;
}

.flex-container {
    display: flex; 
    flex-wrap: wrap;
}

.game-grid-container {
    display: grid;
    align-items: center;
    grid-template-columns: auto;
    grid-template-rows: auto, auto, auto, auto, auto;
}

#time-remaining-container {
    width: 700px;
}

.center {
    justify-content: center;
    align-items: center;
}

#gameArea {
    max-width: 100vw;
    margin: auto;
}

.swatch {
    width: 20px;
    height: 20px;
    border-radius: 20px;
    border-style: solid;
    border-color: black;
    border-width: 1px;
    display: inline-block;
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 5px;
    margin-bottom: 5px;
}

.swatch.active {
    border-style: solid;
    border-width: 5px;
    margin-left: 1px;
    margin-right: 1px;
    margin-top: 0px;
    margin-bottom: 0px;
}

.drawing-board {
    width: 400px;
    height: 300px;
    border: 5px solid #000000;
    background-color: rgb(98, 98, 98);
    display: inline-block;
}

.drawing-board.line {
  cursor: none;
}

.brush{
  position: fixed;
  width: 5px;
  height: 5px;
  border: 1px solid #000000;
  border-radius: 50%;
  cursor: none;
  pointer-events: none;
  z-index: 2;
}

.drawing-board.fill {
  cursor: url(/images/paintbucket.cur), auto;
}

.lineWidthBox {
    width:50px;
}

#overlay {
    position: relative; /* Sit on top of the page content */
    display: none; /* Hidden by default */
    width: 400px; /* Full width (cover the whole page) */
    height: 305px; /* Full height (cover the whole page) */
    top: calc(-5px - 100%);
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.5); /* Black background with opacity */
    z-index: 2; /* Specify a stack order in case you're using a different order for other elements */
}

#word-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    font-size: 20px;
    color: rgb(0, 255, 0);
    transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
}

#end-word-overlay {
    position: absolute;
    top: 25%;
    left: 50%;
    font-size: 20px;
    color: rgb(255, 0, 0);
    transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
}

#chatbox, #spellingPredictionBox {
    width: 300px;
    height: 126px;
    overflow-y:auto;
    overflow-x:hidden;
}

#scoreboard {
    width: 150px;
    height: auto;
    text-overflow: break-word;
}

#score-area {
    display: inline-block;
    padding: 10px;
    grid-row: 1;
    grid-column: 1;
}

#round-info-area {
    width: 400px;
    display: inline-block;
    padding: 10px;
    grid-row: 2;
    grid-column: 1;
}

#drawing-board-container {
    grid-row: 3;
    grid-column: 1;
    margin-bottom: 25px;
}

#drawing-and-tools {
    grid-row: 4;
    grid-column: 1;
}

#game-chat-area {
    display: inline-block;
    padding: 10px;
    grid-row: 5;
    grid-column: 1;
    height: 315px;
}

.dark {
    color: white;
    background-color: #242424;
}

input[type=text].dark {
    color: white;
    background-color: #4d4d4d;
}

input[type=color].dark {
    color: white;
    background-color: #4d4d4d;
}

button.dark {
    color: white;
    background-color: #4d4d4d;
}

.message.bgplainv1 {
    background-color: white;
}

.message.bgplainv1.dark {
    background-color: #242424;
}

.message.bgplainv2 {
    background-color: #ebebeb;
}

.message.bgplainv2.dark {
    background-color: #1b1b1b;
}

.message.txlightGreen {
    color: #42f57e;
}

.message.txlightBlue {
    color: #007bff;
}

.message.txgreen {
    color: rgb(0, 255, 0);
}

.message.txred {
    color: red;
}

.message.txplain {
    color: black;
}

.message.txplain.dark {
    color: white;
}

.scoreName.txlightBlue {
    color: #007bff;
}

.scoreName.txlightGreen {
    color: #42f57e;
}

@media screen and (min-width: 915px) {
    #scoreboard {
        width: 150px;
        height: 252px;
        text-overflow: break-word;
    }

    .game-grid-container {
        display: grid;
        align-items: center;
        grid-template-columns: auto, auto, auto;
        grid-template-rows: auto, auto, auto;
    }

    #score-area {
        display: inline-block;
        padding: 10px;
        grid-row: 2;
        grid-column: 1;
    }
    
    #round-info-area {
        width: 400px;
        display: inline-block;
        padding: 10px;
        grid-row: 1;
        grid-column: 2;
        overflow: visible;
    }
    
    #drawing-board-container {
        grid-row: 2;
        grid-column: 2;
        margin-bottom: 25px;
    }
    
    #drawing-and-tools {
        grid-row: 3;
        grid-column: 2;
    }
    
    #game-chat-area {
        display: inline-block;
        padding: 10px;
        grid-row: 2;
        grid-column: 3;
    }

    #chatbox, #spellingPredictionBox {
        width: 300px;
        height: 252px;
        overflow-y:auto;
        overflow-x:hidden;
    }
}