@import url("https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css");
@import url("https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css");

body {
  background-color: #2A2D33;
  color: white;
  font-family: Roboto, sans-serif;
  margin: 0;
}

h1 {
  text-align: center;
  padding: 1rem;
  background-color: #1b1d22;
  margin: 0;
}

#game-board {
  display: flex;
  align-items: center;
  flex-direction: column;
  padding: 1.5rem;
}

.letter-box {
  border: 1px solid #505050;
  border-radius: 3px;
  margin: 2px;
  font-size: 1.5rem;
  font-weight: 600;
  text-shadow: 1px 1px 1px black;
  height: 60px;
  width: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-transform: uppercase;
}

.filled-box {
  border: 1px solid #505050;
}

.letter-row {
  display: flex;
}

#keyboard-cont {
  padding: 1rem;
  margin-top: auto;
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  justify-content: center;
  background-color: #1b1d22;
  flex-direction: column;
}

#keyboard-cont div {
  display: flex;
}

.first-row{
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
}

.second-row {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
}

.third-row{
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
}

.last-row{
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;  
}

.keyboard-button {
  cursor: pointer;
  border: 1px solid #505050;
  border-radius: 3px;
  margin: .15rem;
  font-size: 1.5rem;
  font-weight: 300;
  text-shadow: .8px .8px .8px black;
  height: 50px;
  width: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-transform: uppercase;
  padding: .25rem;
}
.del-button {
  cursor: pointer;
  border: 1px solid #505050;
  border-radius: 3px;
  margin: .15rem;
  font-size: 1.5rem;
  font-weight: 300;
  text-shadow: .8px .8px .8px black;
  height: 50px;
  width: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  text-transform: uppercase;
  padding: .25rem;
}
.enter-button {
  cursor: pointer;
  border: 1px solid #505050;
  border-radius: 3px;
  margin: .15rem;
  font-size: 1.5rem;
  font-weight: 300;
  text-shadow: .8px .8px .8px black;
  height: 50px;
  width: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  text-transform: uppercase;
  padding: .25rem;
}
.newgame-button {
  cursor: pointer;
  border: 1px solid #505050;
  border-radius: 3px;
  margin: .15rem;
  font-size: 1.5rem;
  font-weight: 300;
  text-shadow: .8px .8px .8px black;
  height: 50px;
  width: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  text-transform: title;
  padding: .25rem;
}