:root {
  --font: 'Courier New', Courier, monospace; /* 'Fira Code', monospace || 'JetBrains Mono', monospace || 'Courier New', Courier, monospace || 'Inter', sans-serif*/
  /* --font: 'JetBrains Mono', monospace;  */
  --font-weight: normal; /* normal */
  --font-weight-bolder: bolder; /* bolder */
  --bg-light: #e0e0e0; 
  --bg-dark: #222;
  --input-bg-light: white;
  --input-bg-dark: #333;
  --body-bg-light: white;
  --body-bg-dark: #111;
  --text-color-light: black;
  --text-color-dark: white;
  --border-color-light: #a9a9a9;
  --border-color-dark: #444;
}
html, body {margin: 0; padding: 0; width: 100vw; height: 100vh; font-size: 1rem;}
main {display: block; margin: 0 auto; width: 100%; height: 100vh;}
#login, #error {display: flex; justify-content: center; align-items: center; height: calc( 100vh - 72px );}
h1.e404 {display: inline-block; padding: 25px; text-align: center; border-radius: 6px; font-weight: 100;}
h1.e401 {display: inline-block; padding: 25px; text-align: center; background: red; color: white; border: 1px solid white; border-radius: 6px; font-weight: 100;}
form {display: block; width: 100%; margin: 0 5px; padding: 25px; border-radius: 6px;}
input, label {padding: 5px; width: 100%; font-size: 1rem; }
input {outline: none; box-shadow: none; }
input[type=submit]:hover {cursor: pointer; opacity: 0.8;}
footer { display: block; position: fixed; bottom: 0px; width: 100%; text-align: center; padding: 25px 0; font-size: 1rem; }

@media screen and (min-width: 992px) { main { width: 28%; } }

@media (prefers-color-scheme: dark) { 
  html, body { background: var(--body-bg-dark); color: var(--text-color-dark); } 
  form {background: var(--bg-dark); border: 1px solid var(--border-color-dark); color: var(--text-color-dark); }
  input {background: var(--input-bg-dark); border: 1px solid var(--border-color-dark); color: var(--text-color-dark); }
  h1.e404 { background: var(--bg-dark); color: var(--text-color-dark); border: 1px solid var(--border-color-dark); }
}

@media (prefers-color-scheme: light) { 
  html, body { background: var(--body-bg-light); color: var(--text-color-light); } 
  form {background: var(--bg-light); border: 1px solid var(--border-color-light); color: var(--text-color-light); }
  input {background: var(--input-bg-light); border: 1px solid var(--border-color-light); color: var(--text-color-light); }
  h1.e404 { background: var(---bg-light); color: var(--text-color-light); border: 1px solid var(--border-color-light); }
}