:root {
  --zinc-700: rgb(66, 71, 81);
  --success: rgb(0, 166, 110);
  --danger: rgb(155, 35, 24);
}

body {
  display: flex;
  flex-direction: column;
}

main {
}

.margin-top-sm {
  margin-top: 2em;
}

.margin-top-md {
  margin-top: 2.5em;
}

.margin-bottom-xs {
  margin-bottom: 1.5em;
}

.centered-body {
  min-height: 100vh;
  justify-content: center;
}

.base-container {
  border: 1px solid var(--zinc-700);
  border-radius: 10px;
  padding: 1.75em 1.2em;
}

.box-shadow-container {
  box-shadow: 1px 1px 52px 2px rgba(0, 0, 0, 0.42);
}

.login-container {
  max-width: 50ch;
  form :last-child {
    margin-bottom: 0;
  }
  form button {
    float: right;
  }
}

.authorize-container {
  max-width: 100ch;
}

button {
  width: unset;
  min-width: 16ch;
}

.button-row {
  display: flex;
  gap: 1ch;
  justify-content: end;
}

.alert {
  border: 1px solid var(--zinc-700);
  border-radius: 10px;
  padding: 1em 1em;
  p {
    color: white;
    margin-bottom: unset;
  }
}

.alert-success {
  background-color: var(--success);
}

.alert-danger {
  background-color: var(--danger);
}