html, body {
  width: 100%;
  height: 100%;
  font-family: sans-serif;
  margin: 0;
  padding: 0;
  background-color: #f0e6d8;
}

body {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: center;
  align-content: flex-start;
  font-size: 12pt;
}

body > * {
  width: 100%;
  text-align: center;
  margin-bottom: 10vh;
}

#loginarea {
  height: 80vh;
}

#blurbarea {}

header h1 {
  font-style: italic;
  font-weight: normal;
}

#passheader h1 {
  font-size: 36pt;
}
#passheader #logo {
  height: 50pt;
}
#logo {
  aspect-ratio: 1/1;
  vertical-align: text-bottom;
}

#login {
  justify-content: center;
  align-items: center;
  display: flex;
  flex-flow: column nowrap;
  text-align: center;
}


form {
  margin: 0 auto;
  display: flex;
  flex-flow: column nowrap;
  justify-content: space-around;
  align-items: center;
  padding: 15px 0;
}

form * {
  font-size: 14pt;
}

form > p, form > label, form > button {
  margin-top: 15px;
}


a { color: #2af; }
a:visited { color: #a6f; }


#blurbarea {
  display: none;
}

@media (prefers-color-scheme: dark) {
  html, body {
    color: white;
    background-color: #222;
  }

  #logo {
    filter: invert(1);
  }
}


@media screen and (max-width: 640px) {

}