/*from style*/

#image {
  background-image: url('../assets/images/vocabPrincess.jpg');
  background-size: cover;
}

#gameover, #tryAgain, #youwin {
    display: none;
    text-align: center;
    font-size: 28px;
}

h1 {
    font-weight: 300;
    color: #db0f0f;
    padding: 20px;
}

h2 {
    text-align: center;
    font-size: 28px;
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    padding: 20px;
}

h3 {
    text-align: center;
    font-size: 24px;
    padding: 20px;
}

#totalWins, #currentWord,
#remainingGuesses, #guessedLetters  {
    text-align: center;
    font-size: 24px;
    color: #db0f0f;
    letter-spacing: 4px;
}

#guessedLetters {
  overflow-wrap: break-word;
}

#title {
    text-align: center;
    font-size: 54px;
    color: white;
    margin: 20px;
    font-family: "Sofia";
}

.brainblast-guesstheword #title {
    display: none;
}

#stats {
    margin: auto;
    width: 50%;
    background: white;
}

#messages {
    margin: 20px auto;
    width: 50%;
    background: white;
}

#buttons {
  margin:  20px auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: 80%;
  cursor: pointer;
}

.letter-button {
  padding: 10px 20px;
  margin: 1px;
  font-size: 2rem;
}

#messages {
  background-color: #d0d5dd;
  padding:20px;
  display: none;
}

#tryAgain {
  cursor: pointer;
  border: 5px solid #000;
  border-radius: 5px;
  padding:10px;
  margin:auto;
}

#tryAgain:hover {
  background-color: #db0f0f;
}

@media only screen and (max-width: 980px) {
    #stats {
        width: 70%;
    }
}

@media only screen and (max-width: 768px) {
       #stats,
      #buttons {
            width: 90%;
       }
}