.c10c {
  color: red;
font-size: 1rem;
}

.c11c {
  background: var(--gray1);
border-radius: 4px;
color: black;
cursor: pointer;
padding: 6px;
text-align: center;
user-select: none;
}

.c12c {
  white-space: pre-wrap;
}

.c1c {
  display: flex;
flex-wrap: wrap;
max-width: 1136px;
user-select: none;
white-space: pre;
}

.c2c {
  background: var(--gray1);
border-radius: 4px;
color: black;
cursor: pointer;
height: 112px;
margin: 15px;
text-align: center;
width: 112px;
}

.c3c {
  background: var(--gray1);
border: none;
font-size: var(--font-size1);
width: 4.5em;
}

.c3c::placeholder {
  color: #555;
}

.c3c:focus {
  outline: none;
}

.c4c {
  display: grid;
width: 13em;
}

.c4c > * {
  margin-bottom: 1em;
}

.c5c {
  align-items: start;
}

.c6c {
  display: grid;
gap: .1em;
grid-template-columns: repeat(8, 1.4em);
}

.c7c {
  align-items: center;
background: #873333;
border-radius: .15em;
color: black;
display: flex;
height: 100%;
justify-content: center;
user-select: none;
width: 100%;
}

.c8c input {
  width: 2.3em;
}

.c9c input {
  width: .7em;
}

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

:root {
  --font-size1: 21px;
--gray1: gray;
font: var(--font-size1) sans-serif;
}

body {
  background: black;
color: white;
}

select {
  background: var(--gray1);
font-size: var(--font-size1);
}

@media (min-width: 457px) {
  .c10c {
  display: none;
}

}

@media (min-width: 707px) {
  .c5c {
  display: flex;
}

}