@import url('/login/styles/variables.css');
@import url('/login/styles/global.css');
@import url('/login/styles/input.css');
@import url('/login/styles/button.css');

#login {
  grid-area: body;

  display: grid;
  grid-template-areas:
    'main'
    'footer';
  grid-template-rows: 1fr max-content;
  height: 100vh;
  overflow-y: auto;
  line-height: 1.5rem;
  background: var(--icon-primary);
}

main {
  place-self: center;

  display: grid;
  grid-template:
    'logo' max-content
    'form' 1fr
    / 1fr;

  grid-gap: 1rem;
}

footer {
  text-align: center;
  padding: 1rem;
  color: var(--text-secondary);
}

.logo {
  font-size: 2rem;

  grid-area: logo;

  display: grid;
  grid-auto-flow: column;

  place-content: center;
}

.form {
  grid-area: form;

  display: grid;

  grid-auto-flow: row;
  grid-gap: 1rem;
}

.form p,
.form span {
  text-align: center;
  font-size: 1.125rem;
  line-height: 1.75rem;
  color: var(--text-primary);
  user-select: text;
  margin: 0;
}