/*
  numgame.css
  This file only styles the Number Game page.

  CSS selector reminder:
  #id       targets one element
  .class    targets many elements with that class
  element   targets all elements of that type
*/

.game-card {
  background-color: #fffdf2;
}

.game-box {
  background-color: #eef6ff;
  border: 2px solid #1f5f99;
  border-radius: 12px;
  padding: 20px;
  text-align: center;
}

.game-box label {
  font-weight: bold;
}

#num-field {
  width: 120px;
  padding: 10px;
  margin: 10px;
  font-size: 18px;
  text-align: center;
}

button {
  background-color: #1f5f99;
  color: white;
  border: none;
  padding: 10px 14px;
  margin: 5px;
  border-radius: 8px;
  font-weight: bold;
  cursor: pointer;
}

button:hover {
  background-color: #163d63;
}

#message-text {
  font-size: 20px;
  font-weight: bold;
  color: #b30000;
}

#guess-count-text {
  font-weight: bold;
}

.challenge-card {
  border-left: 8px solid #f0a500;
}