* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.wrapper {
  height: 100vh;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.board {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  /* border: 1px solid black; */
  border-radius: 10px;
}

.cell {
  height: 23px;
  width: 23px;
  margin: 1px;
  border: 1px solid lightgray;
  border-radius: 40%;
}

.cell:hover {
  background-color: #eee;
  
  transition: all .4s;
}

.control {
  margin-top: 1rem;
  text-transform: uppercase;
  color: rgb(87, 87, 87);
}

button {
  margin: 0.3rem;
  padding: .5rem;
  font-size: 1rem;
  border-radius: 10px;
  border: .5px solid lightgray;
  text-transform: uppercase;
  color: rgb(87, 87, 87);
}

input {
  margin-right: 0.3rem;
  padding: .5rem 0;
  border-radius: 10px;
  border: .5px solid lightgray;
  width: 4rem;
  font-size: 1rem;
  color: rgb(87, 87, 87);
  text-align: center;
}

input:disabled {
  color: rgba(87, 87, 87, 0.2);
  background-color: rgb(238, 236, 236);
}

#random-btn {
  background-color: rgba(238, 252, 162, 0.5);
  transition: all .6s;
}
#random-btn:hover {
  background-color: rgb(238, 252, 162);
}

#start-btn {
  background-color: rgba(162, 252, 162, 0.5);
  transition: all .6s;
}
#start-btn:hover {
  background-color: rgba(162, 252, 162, 1);
}

#stop-btn {
  background-color: rgba(247, 166, 166, 0.5);
  transition: all .6s;
}

#stop-btn:hover {
  background-color: rgb(247, 166, 166);
}

#step-btn {
  background-color: rgba(202, 202, 202, 0.5);
  transition: all .6s;
}

#step-btn:hover {
  background-color: rgba(202, 202, 202, 1);
}

#clear-btn {
  background-color: rgba(162, 190, 252, 0.5);
  transition: all .6s;
}
#clear-btn:hover {
  background-color: rgb(162, 190, 252);
}