:root {
  color-scheme: dark;
  font-family: system-ui, sans-serif;
  background: #101827;
  color: #eef4ff;
}

body {
  display: grid;
  min-height: 100svh;
  margin: 0;
  place-items: center;
}

.login {
  box-sizing: border-box;
  width: min(26rem, calc(100% - 2rem));
  padding: clamp(1.25rem, 5vw, 2rem);
  border: 1px solid #33425c;
  border-radius: 1rem;
  background: #172235;
}

h1 { margin: 0; font-size: 1.55rem; }
p { margin: .75rem 0 1.5rem; color: #b4c4db; line-height: 1.5; }
form, label { display: grid; gap: .5rem; }
form { gap: 1rem; }

input, button {
  box-sizing: border-box;
  min-height: 2.75rem;
  width: 100%;
  border: 1px solid #465a76;
  border-radius: .45rem;
  padding: .55rem .7rem;
  font: inherit;
}

input { background: #101827; color: inherit; }
button { background: #a8c7ff; color: #101827; cursor: pointer; font-weight: 650; }
button:disabled { opacity: .65; cursor: wait; }
:focus-visible { outline: 2px solid #a8c7ff; outline-offset: 2px; }
.error { margin: 0; color: #ffb4ab; }