/*
    #310101 = dark color
    #B70001 = dark red
    #DF8D8E = light red
    #BDB4B4 = grey
    #F2D04C = darkest yellow

    #FDF5D7 = light yellow
*/

body {
    background-color: #B70001;
}

@media (min-width: 510px) {
    body {
        background-color: white;
    }
    #allContentHolder {
        background-color: #B70001;
        padding: 0px;
    }

}

@media (max-width: 510px) {
    #allContentHolder {
        width: 100vw;
        padding: 0px;
    }
}

#guessIncompleteLettersWrapper, #guessCorrectTextWrapper, #guessIncompleteLettersMessage, #correctGuessMessage
{
    background-color: #310101;
}

.guessBox {
    border-color: #F1CD40;
    color: #b70001;
}

.guessBoxCorrect {
    background-color: #F2D04C;
    color: #310101; /*#310101 = dark color*/
}

.guessBoxWrongLocation {
    background-color: #DF8D8E;
    color: #310101;
}


.guessBoxWrongLocationAndWord {
    background-image: linear-gradient(45deg, #BDB4B4 25%, #DF8D8E 25%, #DF8D8E 50%, #BDB4B4 50%, #BDB4B4 75%, #DF8D8E 75%, #DF8D8E 100%);
    background-size: 33.94px 33.94px;
    color: #310101;
}

.guessBoxWrong {
    background-color: #BDB4B4;
    color: #310101;
}

.keyboardBackgroundColor {
    background-color: #FDF5D7;
}

.keyboardLetter, #keyboardBackButton, #keyboardSubmitGuess {
    border-color: #F1CD40;
    color: #310101;
}


#howToPlayOverlay {
    background-color: rgba(255, 255, 255, 0.9);
}


#gameMenu {
    background-color: #FDF5D7;
    color: #310101;
}


a {
    color: #310101; /* normal links */
}

    /* Visited links */
    a:visited {
        color: #B70001;
    }

    /* Hover effect */
    a:hover {
        color: #F1CD40;
    }

    /* Active (while clicking) */
    a:active {
        color: #b70001;
    }

#gameCompleteText {
    color: #310101;
}

#phraseCompleteMessage {
    color: #B70001;
}

#gameCompleteMessage {
    background-color: #FDF5D7;
}

#guessMorePhrases
{
    color: #310101;
}