.board input {
  width: 230px;
  height: 230px;
  color: white;
  font-size: 100px;
}
.text-green {
  color: green;
}
.play h1 {
  background-color: rgb(64, 52, 75);
  font-size: 300px;
}
.play {
  background-color: rgb(231, 143, 149) !important;
}
.bg-burble {
  background-color: rgb(231, 143, 149) !important;
}
.border-burble {
  border: rgb(167, 85, 121) 2px solid !important;
}
.inputs input  ,.player-1 input {
  padding: 20px;
  width: 600px;
  border: solid rgb(150, 98, 101) 3px;
  background-color: rgb(231, 143, 149) !important;
}
.inputs button,
.options button ,.player-1 button{
  font-size: 50px;
  border: solid rgb(147, 102, 102) 3px !important;
  font-family: sans-serif;
  background: linear-gradient(
    rgb(120, 77, 80),
    rgb(189, 95, 102),
    rgb(125, 56, 60),
    rgb(62, 32, 34)
  );
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
img {
  width: 200px;
  height: 300px;
  object-fit: contain;
}
.img-box {
  margin: 10px;
  padding: 10px;
}
.bg-table {
  background-color: rgb(129, 118, 123);
}
.play .xo {
  font-family: sans-serif;
  background: linear-gradient(
    rgb(120, 77, 80),
    rgb(189, 95, 102),
    rgb(125, 56, 60),
    rgb(62, 32, 34)
  );
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.text-dark-blue {
  color: rgb(27, 27, 61) !important;
}
.text-dark-pink {
  color: rgb(105, 57, 65) !important;
}
.menu button {
  text-align: start;
}
.menu {
  top: 5%;
}
.content{
  animation: display 0.6s;
  overflow: hidden;
  animation: display 0.6s;
}
.menu .content {
  width: 15rem;
}

@keyframes display {
  0% {
    height: 5%;
  }

  100% {
    height: 30%;
  }
}