h1 {
  font-size: 4rem;
  text-align: center;
  color: yellow;
  font-weight: bold;
  font-family: "Times New Roman";
  width: min-content;
  position: relative;
  display: inline-block;
  padding: 20px 40px;
  z-index: 1;
  user-select: none;
  text-shadow: -2px -2px 0 black, 2px -2px 0 black, -2px 2px 0 black,
    2px 2px 0 black;
}

h1::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 150px;
  height: 150px;
  background-color: red; /* Background color */
  transform: translate(-50%, -50%) rotate(45deg);
  z-index: -1;
  border: solid 5px yellow;
}

#header-div {
  width: min-content;
  margin-inline: auto;
  margin-block: 50px;
}

html {
  background-color: #1b2860;
  color: white;
}

#root {
  width: min-content;
  margin-inline: auto;
}

form {
  text-align: center;
}

form input {
  margin-right: 10px;
  padding: 5px;
  font-family: "Times New Roman";
  font-weight: bold;
  font-size: 22px;
  width: 200px;
  background-color: #ebeef9;
}

button {
  padding-block: 5px;
  padding-inline: 10px;
  background-color: #3852c7;
  font-family: "Times New Roman";
  font-weight: bold;
  color: white;
  font-size: 22px;
}

button:hover,
button:focus {
  cursor: pointer;
  background-color: #2d429f;
}

button:disabled {
  background-color: #ccc; /* Change background color */
  color: #666; /* Change text color */
  cursor: not-allowed; /* Show a not-allowed cursor */
  opacity: 0.7; /* Make the button appear faded */
}

h2 {
  text-align: center;
  font-size: 26px;
}

#game-div button {
  display: block;
  margin: 20px auto;
  font-size: 22px;
}

#game-div input {
  width: 50px;
}

#game-div table {
  font-size: 20px;
  border-collapse: collapse;
  margin: auto;
}

#game-div th {
  border-bottom: solid red 5px;
  padding-block: 3px;
  font-size: 22px;
}

#game-div td {
  padding-block: 5px;
  padding-inline: 15px;
  font-size: 20px;
  border-right: solid #223177 5px;
  border-left: solid #223177 5px;
  border-bottom: solid #223177 5px;
}

#game-div td input {
  font-size: 20px;
  font-family: "Times New Roman";
  background-color: #ebeef9;
}

#game-div li {
  font-size: 22px;
  padding: 5px;
}
#game-div li::marker {
  content: "◆";
  color: red;
  font-size: 20px;
}

#game-div ul {
  margin-left: 25px;
}

#header-diamond {
  color: red;
  font-size: 20px;
}