body {
  background-color: #FAD961;
  background-image: linear-gradient(155deg, #FAD961 0%, #F76B1C 100%);
}

.login-form {
  max-width: 24rem
}

.btn-brand {
  --clr-text: #FFFFFF;

  --clr-bg: #002D5C;
  --clr-border: #002D5C;

  --clr-bg-hover: #19426c;
  --clr-border-hover: #19426c;

  --clr-bg-active: #32567c;
  --clr-border-active: #32567c;

  --bs-btn-color: var(--clr-text);
  --bs-btn-bg: var(--clr-bg);
  --bs-btn-border-color: var(--clr-border);
  --bs-btn-hover-color: var(--clr-text);
  --bs-btn-hover-bg: var(--clr-bg-hover);
  --bs-btn-hover-border-color: var(--clr-border-hover);
  --bs-btn-focus-shadow-rgb: 49, 132, 253;
  --bs-btn-active-color: var(--clr-text);
  --bs-btn-active-bg: var(--clr-bg-active);
  --bs-btn-active-border-color: var(--clr-border-active);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: var(--clr-text);
  --bs-btn-disabled-bg: var(--clr-bg-active);
  --bs-btn-disabled-border-color: var(--clr-border-active);

}

.btn-microsoft {
  --clr-text: #5E5E5E;

  --clr-bg: #FFFFFF;
  --clr-border: #8C8C8C;

  --clr-bg-hover: #F3F3F3;
  --clr-border-hover: #808080;

  --clr-bg-active: #ECECEC;
  --clr-border-active: #7e7e7e;

  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.75rem;
  border-radius: 0;
  font-family: "Segoe UI", serif;
  font-weight: 600;
  font-size: 15px;

  --bs-btn-color: var(--clr-text);
  --bs-btn-bg: var(--clr-bg);
  --bs-btn-border-color: var(--clr-border);
  --bs-btn-hover-color: var(--clr-text);
  --bs-btn-hover-bg: var(--clr-bg-hover);
  --bs-btn-hover-border-color: var(--clr-border-hover);
  --bs-btn-focus-shadow-rgb: 49, 132, 253;
  --bs-btn-active-color: var(--clr-text);
  --bs-btn-active-bg: var(--clr-bg-active);
  --bs-btn-active-border-color: var(--clr-border-active);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: var(--clr-text);
  --bs-btn-disabled-bg: var(--clr-bg-active);
  --bs-btn-disabled-border-color: var(--clr-border-active);
}