: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: white;
  --bg-dark: #111;
  --bg-dark-2: #444;
  --text-color-light: black;
  --text-color-dark: white;
}

main {
  padding-top: calc(100vh*0.28);
  width: 100%;
  margin: 0 auto;
  text-align: center;
}

h1 {font-size: 32px;}

footer {
  position: fixed;
  bottom: 0px;
  width: 100%;
  text-align: center;
  padding: 25px 0;
}

@media screen and (min-width: 992px) {
  main {width: 62%;}
  h1 {font-size: 68px;}
}

@media (prefers-color-scheme: dark) {
  html, body {
    background: var(--bg-dark);
    color: var(--text-color-dark);
  }
  input, input:focus {
    background-color: var(--bg-dark-2);
  }
}

@media (prefers-color-scheme: light) {
  html, body {
    background: var(--bg-light);
    color: var(--text-color-light);
  }
}