@import url('../index.css');
@import url('./login.css');
@import url('./baili-logo.css');
@import url('./header.css');
@import url('./typography.css');
@import url('./buttons.css');
@import url('./links.css');
@import url('./icons.css');
@import url('../scroll-bar.css');
@import url('./dialog.css');
@import url('./pin-entry.css');
@import url('./spinner.css');
@import url('./toast.css');
@import url('./login-form.css');
@import url('./footer.css');

body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  margin: 0;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  background-color: var(--primary-background-color);
  color: var(--login-page-text-color);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overscroll-behavior: none;
  background-image: url('../../images/login_bg.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

main {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  flex-grow: 1;
  overflow: auto;
}

.form-container {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: 90%;
  margin: 16px auto;
}

footer {
  margin: auto;
  margin-bottom: 4px;
  text-align: center;
}