.page {
  width: 100%;
  height: 100lvh;
  overflow: hidden;

  display: grid;
  grid-template-rows: 10rem 1fr;
  place-items: center;
}
.page .title {
  color: var(--primary);
}
.page .title span {
  color: var(--secondary);
}
.page .content {
  width: 100%;
  height: 100%;

  background-image: url("../resources/images/login_logo.webp");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.page #loginbox {
  background-image: url("../resources/images/login_bg.webp");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;

  color: var(--background);
  border: 1px solid var(--primary);
  border-radius: var(--border-radius);

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  padding-inline: 6rem;
  padding-top: 4rem;
  padding-bottom: 3rem;
}
.page input {
  width: 19rem;
  padding-block: 1rem;
  border: 1px solid var(--primary);
}
.page .error {
  height: 1.25rem;
}
.page button {
  border: 1px solid var(--background);
}