body {
  width: 455px;
  margin: 0 auto;
  font-size: 18px;
}

h1,
h3 {
  text-align: center;
}

#spielfeld {
  background-color: black;
  border: 10px solid black;
  --size: 5;
  display: grid;
  width: min(90vw, 400px);
  height: min(90vw, 400px);
  grid-template-columns: repeat(var(--size), 1fr);
  grid-template-rows: repeat(var(--size), 1fr);
  gap: 10px;
  gap: calc(20% / var(--size));
  margin: 10px 0px;
}

input[type="checkbox"] {
  display: none;
}

input[type="checkbox"]:not(:checked) + label {
  background-color: #222;
}

input[type="checkbox"]:checked + label {
  background-color: yellow;
  box-shadow: 0px 0px 10px #ff0b;
}

#spielfeld label {
  border-radius: 5px;
  transition: background-color 200ms, box-shadow 200ms;
  cursor: pointer;
}

.mybutton {
  font: bold 11px Arial;
  text-decoration: none;
  background-color: #ff0000;
  color: #ffffff;
  padding: 2px 6px 2px 6px;
  border-top: 1px solid #cccccc;
  border-right: 1px solid #333333;
  border-bottom: 1px solid #333333;
  border-left: 1px solid #cccccc;
}

.div1 {
  display: flex;
  justify-content: center;
}

fieldset {
  background-color: #e6cfcf;
  overflow: hidden;
}

footer {
  border-radius: 4px;
  text-align: center;
  padding: 0px;
  background-color: DarkSalmon;
  color: white;
}