body {
  font-family: sans-serif;

  margin: 5px;
  display: flex;
  flex-direction: column;
}
a {
  color: #0057af;
}
a:visited {
  color: #551a8b;
}
#input {
  font-size: 30px;
  font-family: inherit;

  text-align: center;

  margin-top: 40px;
  margin-bottom: 10px;

  resize: none;

  background-color: inherit;
  color: inherit;
}
.button-place {
  font-size: 20px;
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.button-place > * {
  font-family: inherit;
  font-size: inherit;
  text-align: center;

  margin-top: 10px;
  padding: 5px;

  border-style: solid;
  border-width: 5px;
  border-color: transparent;
  border-radius: 10px;
}
.button-place > button {
  border-color: #0b599d;
  background-color: #0b599d;
  color: white;
}
.button-place > button:active {
  border-color: #148;
  background-color: #148;
}
.button-place > button:disabled {
  border-color: gray;
  background-color: gray;
}
#generate {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
#number {
  border-color: #0b599d;
  background-color: inherit;
  color: inherit;
  width: 100px;

  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
#generate:active + #number {
  border-color: #148;
}
#generate:disabled + #number {
  border-color: gray;
}
#number:focus {
  border-color: #8ce;
}
footer {
  font-size: 20px;
  text-align: center;

  margin-top: 20px;
  margin-bottom: 20px;
}
@media (prefers-color-scheme: dark) {
  body {
    background-color: black;
    color: white;
  }
  a {
    color: #3197ff;
  }
  a:visited {
    color: #b47de7;
  }
}