:root {
  --c0: #000;
  --c1: #222;
  --c2: #555;
  --c3: #888;
  --c4: #bbb;
  --c5: #eee;
  --c6: #fff;

  --cg: #2b2;
  --cr: #b22;
  --cb: #44b;
  --cy: #ea2;

  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
  line-height: 1.5;
  font-weight: 400;

  color-scheme: light dark;
  color: var(--c1);
  background-color: var(--c1);

  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html {
  margin: 0;
}

body {
  margin: 0;
  min-height: 100vh;
  border: 5px solid var(--c1);
  padding: 0 0 60px 0;
  box-sizing: border-box;
  background-color: var(--c5);
  position: relative;
}

header {
  background-color: var(--c4);
}

header > div {
  display: flex;
  flex-direction: row;
  font-size: 13px;
  gap: 5px;
  align-items: center;
  padding: 10px;
  margin: 0 auto;
  max-width: 960px;
}

footer {
  background-color: var(--c4);
  font-size: 13px;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

footer > div {
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: center;
}

form {
  margin: 0;
}

.row {
  display: flex;
  align-items: center;
  flex-direction: row;
  gap: 10px;
  margin-bottom: 10px;
}

a {
  text-decoration: none;
}

a:not(.button) {
  color: var(--c1);
  border-bottom: 2px dashed var(--c3);
}

a:hover:not(.button) {
  border-bottom: 2px solid var(--c1);
}

.content {
  padding: 10px;
  margin: 0 auto;
  max-width: 960px;
}

.left {
  text-align: left;
}

.center {
  text-align: center;
}

.right {
  text-align: right;
}

main {
  font-size: 125%;
}

table, th, td, button {
  font-size: inherit;
}

button, .button {
  display: inline-block;
  text-align: center;
  padding: 5px;
  background: var(--c5);
  color: var(--c1);
  border: 2px solid var(--c1);
  cursor: pointer;
  font-family: monospace;
  font-weight: bold;
}

button:hover, .button:hover {
  background: var(--c4);
}

button:active, .button:active {
  background: var(--c3);
}

.s {
  min-width: 128px;
}

.m {
  min-width: 192px;
}

.l {
  min-width: 256px;
}

img, svg {
  max-width: 100%;
  height: auto;
}

table {
  border-collapse: collapse;
  border: 1px solid var(--c2);
}

th {
  text-align: left;
  background-color: var(--c4);
}

td, th {
  padding: 4px 8px;
  border: 1px solid var(--c2);
}

input[type="text"], input[type="email"] {
  box-sizing: border-box;
  border: 2px solid var(--c1);
  font-family: monospace;
  font-weight: bold;
  font-size: 20px;
  background-color: var(--c6);
  color: var(--c1);
  padding: 5px;
  outline: none;
}

.mono {
  font-family: monospace;
}

.stretch {
  flex-grow: 1;
}

.display-name {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 5px;
}

.logo {
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 5' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 5h6V0H3v1h1v3H2V3H0zM7 5h2V3h2v2h2V0H7zm2-3V1h2v1zm5 3h2V0h-2z'/%3E%3C/svg%3E");
}

.icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  background-color: var(--c2);
}

.icon-li {
  mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMiAzMiI+PHBhdGggZD0iTTAgMFYzMkgzMlYtMzJ6IE02LjQgMTEuM0gxMVYyNkg2LjRWMTEuM1pNMjEuNSAxMWM0LjcgMCA1LjUgMyA1LjUgNi45VjI2aC00LjZWMTguOGMwLTEuNyAwLTMuOS0yLjQtMy45cy0yLjUgMS45LTIuNSAzLjhWMjZIMTNWMTEuM2g0LjR2MmguMWMuNS0xLjEgMS44LTIuMyA0LTIuM1pNOC42IDRjMS41IDAgMi42IDEuMiAyLjYgMi42IDAgMS41LTEuMiAyLjctMi42IDIuN1M2IDguMSA2IDYuNiA3LjIgNCA4LjYgNFoiLz48L3N2Zz4=");
}

.icon-gh {
  mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMiAzMiI+PHBhdGggZD0iTTAgMFYzMkgzMlYtMzJ6TTE2IDRjNi42IDAgMTIgNS40IDEyIDEyIDAgNS4zLTMuNCA5LjgtOC4yIDExLjQtLjYuMS0uOC0uMy0uOC0uNiAwLS40IDAtMS43IDAtMy4zIDAtMS4xLS40LTEuOC0uOC0yLjIgMi42LS4zIDUuNS0xLjMgNS41LTUuOSAwLTEuMy0uNS0yLjQtMS4zLTMuMi4xLS4zLjYtMS42LS4xLTMuMiAwIDAtMS0uMy0zLjMgMS4yLTEtLjMtMi0uNC0zLS40cy0yIC4xLTMgLjRDMTAuNyA4LjcgOS43IDkgOS43IDljLS43IDEuNi0uMiAyLjktLjEgMy4yLS44LjgtMS4zIDEuOS0xLjMgMy4yIDAgNC42IDIuOCA1LjYgNS41IDUuOS0uMy4zLS42LjgtLjggMS42LS42LjMtMi40LjgtMy40LTEgMCAwLS43LTEuMS0xLjktMS4yIDAgMC0xLjIgMC0uMS43IDAgMCAuOC40IDEuNCAxLjggMCAwIC43IDIuMyA0IDEuNiAwIDEgMCAxLjcgMCAycy0uMi43LS44LjZDNy40IDI1LjggNCAyMS4zIDQgMTYgNCA5LjQgOS40IDQgMTYgNFoiLz48L3N2Zz4=");
}

.home-logo {
  width: 192px;
  height: 60px;
  margin: 20px auto 10px;
  background-color: var(--c1);
}

.header-logo {
  width: 45px;
  height: 20px;
  background-color: var(--c2);
}

.header-note {
  font-family: monospace;
  color: var(--c3);
}

.time {
  font-family: monospace;
  font-weight: bold;
}

.passed, .error {
  font-family: monospace;
  font-weight: bold;
  color: var(--c5);
  padding: 2px 4px;
}

.passed {
  background: var(--cg);
}

.error {
  background: var(--cr);
}

.form-grid {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 15px 15px;
  align-items: center;
  max-width: 500px;
}
.form-label {
  white-space: nowrap;
}
.form-input {
  max-width: 300px;
}
.form-grid button {
  justify-self: start;
}