* {
  font-family: Arial, Helvetica, sans-serif;
}

h1 {
  text-align: center;
}

#root {
  display: flex;
  flex-direction: column;
  align-items: center;

  gap: 5rem;
}

.grid {
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 5px;
}

.row {
  display: flex;
  gap: 5px;
}

@keyframes activate {
  from {
    transform: scale(1);
    outline: 3px solid rgb(63, 61, 61);
  }
  to {
    transform: scale(1.2);
    outline: 4px solid rgb(63, 61, 61);
  }
}

.cell {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50px;
  height: 50px;
  font-size: 30px;
  text-align: center;
  padding: 0.2em;
  margin: 0.1em;
  outline: 3px solid rgb(63, 61, 61);
  border-radius: 0.2rem;
}

.cell.active {
  animation-duration: 100ms;
  animation-name: activate;
  animation-iteration-count: 2;
  animation-direction: alternate;
}

@keyframes entered {
  from {
    transform: rotate(0deg) scale(0.3);
  }
  to {
    transform: rotate(90deg) scale(1);
  }
}

.green {
  outline: none;
  color: white;
  background-color: rgb(69, 202, 69);
  animation-name: entered;
  animation-duration: 3s;
  animation-iteration-count: 2;
  animation-direction: alternate;
}

.yellow {
  outline: none;
  color: white;
  background-color: rgb(207, 207, 66);
  animation-name: entered;
  animation-duration: 3s;
  animation-iteration-count: 2;
  animation-direction: alternate;
}

.black {
  outline: none;
  color: white;
  background-color: rgb(44, 44, 44);
  animation-name: entered;
  animation-duration: 3s;
  animation-iteration-count: 2;
  animation-direction: alternate;
}

.keyboard {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 5px;
  width: 20rem;
}

.key {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 5px;
  background-color: gray;
  text-align: center;
  font-size: 10px;
  cursor: pointer;
  color: white;
  border-radius: 0.2rem;
}