html {
  font-family: system-ui;
  margin-left: 35%;
  margin-right: 35%;
  font-size: 26px;
}
@media (max-width: 500px) {
  html {
    margin-left: 20px;
    margin-right: 20px;
  }
}
header {
  text-align: center;
}
a {
  color: #00ffff;
}
.button {
  border: 2px red solid;
  text-decoration: none;
  border-radius: 10px;
  padding: 8px;
}
@media (prefers-color-scheme: light) {
  html {
    background-color: #ffffff;
    color: #2a2a2a;
  }
}
@media (prefers-color-scheme: dark) {
  html {
    background-color: #2a2a2a;
    color: #ffffff;
  }
}
form {
  margin-left: 50px;
  margin-right: 50px;
  text-align: center;
}
@media (max-width: 500px) {
  form {
    margin-left: 0px;
    margin-right: 0px;
  }
}
input {
  border-radius: 12px;
  height: 30px;
  font-size: 26px;
  font-family: monospace;
  margin: 5px;
  height: 100%;
  padding: 10px;
}
input[type=submit] {
  margin: 22px;
}
input:invalid + span:after {
  content: '✖';
  padding-left: 10px;
}
input:valid + span:after {
  content: '✓';
  padding-left: 10px;
}
@media (prefers-color-scheme: light) {
  input {
    background-color: #ffffff;
    color: #2a2a2a;
    border: 2px solid #2a2a2a;
  }
  input:hover {
    box-shadow: 0px 0px 10px #2a2a2a;
  }
  input:focus {
    box-shadow: 0px 0px 15px #00ffff;
    border: 2px #00ffff solid;
  }
}
@media (prefers-color-scheme: dark) {
  input {
    background-color: #2a2a2a;
    color: #ffffff;
    border: 2px solid #ffffff;
  }
  input:hover {
    box-shadow: 0px 0px 10px #ffffff;
  }
  input:focus {
    box-shadow: 0px 0px 15px #00ffff;
    border: 2px #00ffff solid;
  }
}