.grid {
  width: 700px;
  height: 700px;
  display: grid;
  margin: 10px auto;
  box-shadow: 0 0 25px black;
}

h1 {
  font-family: "Rampart One", cursive;
  margin-bottom: 5px;
}

.mode {
  font-family: "Karantina", cursive;
  font-size: 25px;
}

body {
  background-color: rgb(127, 191, 248);
}

.title,
.mode,
.error,
.buttons,
.sizeButtons {
  text-align: center;
}

.error {
  margin: auto;
}

.buttons,
.sizeButtons {
  margin-top: 10px;
  display: flex;
  justify-content: center;
  gap: 30px;
}

.sizeButton {
  background-color: rgb(255, 151, 91);
  font-family: "Karantina", cursive;
  font-size: 25px;
}

button {
  width: 115px;
  height: 35px;
  border-radius: 12px;
}

#blackButton {
  color: white;
  background-color: black;
  font-family: "Karantina", cursive;
  font-size: 25px;
}

#grayButton {
  color: white;
  background-color: gray;
  font-family: "Karantina", cursive;
  font-size: 25px;
}

#randomButton {
  color: white;
  background-image: linear-gradient(
    to right,
    red,
    yellow,
    green,
    blue,
    indigo,
    violet
  );
  font-family: "Karantina", cursive;
  font-size: 25px;
}

#whiteButton {
  color: black;
  background-color: white;
  font-family: "Karantina", cursive;
  font-size: 25px;
}

#resetButton {
  color: black;
  background-color: white;
  font-family: "Karantina", cursive;
  font-size: 25px;
}

button:hover {
  transform: scale(1.2);
}