:root {
  --bs-font-sans-serif: 'Roboto Mono', sans-serif;
  --color-primary: #1e367b;
  --color-dark: #111f47; }

  h1, h2, h3, h4, h5, h6 {
    color: #1e367b;
    letter-spacing: -0.075rem;
    font-style: italic;
    font-weight: 400; }

    hr {
      background-color: #6b82c7; }

      a, a:visited:not(.btn) {
        transition: all 0.05s;
        color: #1e367b;
        text-decoration: underline dotted #111f47;
        text-underline-offset: 3px;
        cursor: pointer; }

        a:hover, a:focus {
          text-decoration-style: solid;
          color: #111f47; }

          .header__logo {
            width: 100%;
            max-width: 14rem;
            margin-bottom: 1.5rem; }

@keyframes fadeIn {
  0% {
    opacity: 0;   }
    100% {
      opacity: 1;   }
}

@keyframes textScaleDown {
  0% {
    letter-spacing: 1rem;
    font-size: 3rem;   }
    15% {
      letter-spacing: 1rem;
      font-size: 3rem;   }
      100% {
        letter-spacing: normal;
        font-size: inherit;   }
}

.login-content {
  margin: 0.75rem 1rem; }
  @media screen and (min-width: 576px) {
    .login-content {
      margin: 1rem 2rem;   }
}
    @media screen and (min-width: 768px) {
      .login-content {
        margin: 1rem 3rem;   }
}

#logo-animation {
  max-width: 90%;
  width: 640px;
  height: 119px; }

  #logo-name {
    animation: fadeIn 0.7s, textScaleDown 4s;
    letter-spacing: normal; }

    #logo-description {
      opacity: 0;
      display: none; }

      #login-divider, #login-buttons, #login-alert {
        opacity: 0;
        visibility: hidden; }

        .fadein #logo-description {
          animation: fadeIn 0.3s;
          opacity: 1;
          display: inline; }
          .fadein #login-divider, .fadein #login-buttons, .fadein #login-alert {
            animation: fadeIn 0.3s linear;
            opacity: 1;
            visibility: visible; }

.req-header-toggle {
  position: relative;
  user-select: none;
  opacity: 0.8;
  transition: opacity 0.05s; }
  .req-header-toggle:hover {
    opacity: 1; }
    .req-header-toggle::before {
      content: '>';
      font-style: normal;
      left: -1.25rem;
      position: absolute;
      transition: all 200ms; }
      .req-header-toggle[aria-expanded='true']::before {
        transform: rotate(90deg); }

.decision-text {
  margin-top: 0.5rem; }

  .form-copy-input {
    position: relative; }
    .form-copy-input .form-copy {
      position: relative; }