.login {
  place-items: center;

  background-image: url(https://images.unsplash.com/photo-1686153957738-fed649408234?ixlib=rb-4.1.0&q=85&fm=jpg&crop=entropy&cs=srgb&dl=ev-zjeZXMU1SKE-unsplash.jpg);
  background-size: cover;

  font-size: calc(0.75rem + 2.25vmin);

  color-scheme: dark;
  color: var(--fg);

  font-family: 'Domine', 'Times New Roman', Times, serif;

  h1 {
    font-size: 200%;
    font-weight: bold;
    margin: 0 .5rem;
  }

  hr {
    width: 75%;
    border: 1px solid;
  }

  form {
    display: flex;
    flex-direction: column;

    gap: 0.5em;
  }

  legend {
    display: grid;
    grid-auto-flow: column;
    grid-template-columns: min-content 1fr;
    align-items: center;

    gap: 0.5em;
  }

  input[type="text"], input[type="password"] {
    all: unset;

    font-family: Roboto, Arial, sans-serif;

    padding: 0.25em;
    
    border-radius: 0.5em 0 0.5em 0;

    background-color: var(--fg);
    color: var(--bg);
  }
}