.center {
  display: grid;
  place-items: center;
  height: 90vh;
  height: 100dvh;
}

body {
  background-image: linear-gradient(
    90deg,
    rgb(130, 237, 155),
    rgb(130, 230, 237),
    rgb(130, 237, 191),
    rgb(128, 237, 153)
  );
}

.letters {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 20px;
}

button {
  padding: 0;
  font-family: Arial, Helvetica, sans-serif;
  height: 120px;
  width: 120px;
  font-size: 48px;
  font-weight: 600;
  color: rgb(255, 255, 255);
  cursor: pointer;
  border: none;
  background-size: 300% 100%;
  border-radius: 50px;
  background-image: linear-gradient(
    90deg,
    rgb(255, 97, 171),
    rgb(255, 176, 97),
    rgb(255, 97, 97),
    rgb(255, 99, 146)
  );
  box-shadow: rgb(255, 123, 97) 0px 4px 15px 0px;
  touch-action: none;
}

button:hover {
  transition: all 0.5s ease-in-out 0s;
  background-position: 100% 0px;
}

@media only screen and (max-width: 600px) {
  .letters {
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
  }
  button {
    width: 80px;
    height: 80px;
  }
}