/*
    #310101 = dark color => #27103E
    #B70001 = back ground => #257E8C
    #DF8D8E = guessBoxWrongLocation => #8C68B0
    #BDB4B4 = grey => #807888
    #F2D04C = guessBoxCorrect -> #257E8C
    #FDF5D7 = keyboard/text box background => #BDD8DD
*/

body {
    background-color: #257E8C;
}

@media (min-width: 510px) {
    body {
        background-color: white;
    }

    #allContentHolder {
        background-color: #257E8C;
        padding: 7px;
    }
}
.keyboardBackgroundColor {
    background-color: #BDD8DD;
}

.keyboardLetter, #keyboardBackButton, #keyboardSubmitGuess {
    border-style: solid;
    border-color: #27103E;
    color: #27103E;
    background-color: #89B9C1;
}
.guessBox {
    border-color: #27103E;
    color: #27103E;
    background-color: #BDD8DD;
}

.guessBoxCorrect {
    background-color: #237885/*#257E8C*/;
    color: white; /*#310101 = dark color*/
}

.guessBoxWrongLocation {
    background-color: #A083BE;
    color: white;
}


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

.guessBoxWrong {
    background-color: #ADA7B3;
    color: white;
}


#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: #12A9DA;
}

#gameCompleteMessage {
    background-color: white;
}

.bubblesHolder {
    width: 100%
}

#gameMenu {
    background-color: #BDD8DD;
    color: #27103E;
}
a:visited {
    color: #A083BE;
}
a:hover {
    color: #237885/*#257E8C*/;
}
#phraseCompleteMessage
{
    color: #257E8C;
}

#correctGuessMessage
{
    background-color:#27103E;
    color: white;
}

#guessFinalIncorrectMessage
{
    border-color: #27103E;
    color: #27103E;
}

#gameCompleteText
{
    color: #27103E;
}

#guessMorePhrases
{
    color: #27103E;
}