body {
    background-image: url(img/bg-img.jpg);
}

#easyDifficulty {
    background-color: rgb(16, 186, 0);
    border-color: rgb(16, 186, 0);
}

#mediumDifficulty {
    background-color: rgb(250, 138, 2);
    border-color: rgb(250, 138, 2);
}

#hardDifficulty {
    background-color: rgb(215, 2, 2);
    border-color: rgb(215, 2, 2);
}

#lunaticDifficulty {
    background-color: rgb(179, 2, 215);
    border-color: rgb(179, 2, 215);
}

.difficulty-settings button {
    min-width: 111.25px;
}


.picture {
    max-width: 800px;
    min-height: 400px;
    background-color: gainsboro;
    margin: 2em auto;
}

.wordArea {
    background-color: white;
}

.winner {
    background-color: rgb(12, 225, 12);
}

.loser {
    background-color: rgb(255, 43, 43);
}

img {
    max-height: 400px;
    object-fit: contain;
}

.playAgain {
    background-color: gray;
    border-color: gray;
    padding: 1em;
}

.playAgain:hover {
    background-color: rgb(81, 81, 81);
    border-color: rgb(81, 81, 81);
    padding: 1em;
}

h1, h4 {
    font-family: "Special Elite", system-ui;
}

.navbar {
    padding: 3em 0;
    margin-bottom: 2em;
}

.navbar-brand {
    font-size: 4em !important;
    margin: auto;
}

p, .btn {
   font-family: "Josefin Sans", sans-serif;
}

.instructions {
    padding: 2em;
    margin: 2em 0;
    background-color: white;
}

.difficulty-settings {
    margin-top: 1em;
    margin-left: auto;
    margin-right: auto;
}

.wordBlanks {
    border-bottom: solid black 3.5px;
    margin: 1em;
    width: 2em;
}

li {
    list-style-type: none !important;
}

span {
    text-transform: capitalize;
    font-family: "Josefin Sans", sans-serif;
    font-size: 1.2em;
}

.rightLetter {
    display: none;
}

h4 {
    margin-bottom: 1em;
}

#win, #lose {
    background-color: white;
    margin: 1em 0;
    padding: 1em;
}

#win h4 {
    color: green;
}

#lose h4 {
    color: red;
}

.key {
    text-transform: capitalize;
    padding: 1em;
    width: 3em;
    margin: .5em 2em;
    background-color: gray;
    border-color: gray;
    box-shadow: black 3px 3px 3px;
}

.key:hover {
    background-color: rgb(81, 81, 81);
    border-color: rgb(81, 81, 81);
}

footer {
    text-align: center;
    font-family: "Josefin Sans", sans-serif;
    margin-top: 3em;
    padding: 1em;
}

.navbar, footer {
    background-color: rgb(197, 197, 197) !important;
}