/* STYLING FOR /accounts/login PAGE */

.splash-container {
    height: 100vh;
    margin-bottom: -7rem; /* gets rid of padding bottom set on all content */
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    overflow: hidden;
  }

  .splash-content {
    text-align: center;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding-top: 8rem;
  }

  .splash-logo svg {
    height: 18rem;
    width: 100%;
  }

  .splash-text {
    font-weight: bold;
    padding: 0 1.6rem;
    max-width: 70rem;
    margin: 0 auto;
  }

  .splash-desc{
      max-width: 70rem;
      margin: 1rem auto;
      padding: 2rem 1.6rem;
      background-color: rgba(0, 0, 0, 0.7);

  }

  .splash-desc p{
    font-size: 1.4rem;
    color:var(--light-text);
  }

  .splash-terms {
    margin-bottom: 2rem;
    width: 100%;
    font-size: 1.2rem;
    color: var(--dark-text);
  }

  .splash-content .splash-cta {
    position: fixed;
    bottom: 2rem;
    padding: 0 1.6rem;
    width: 100%;
  }

  .splash-cta .auth-btn-container {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    width: 100%;
  }

  .splash-cta .auth-btn-container form {
    width: 100%;
  }

  .splash-content .button {
    border-radius: 0;
    padding: 2rem;
    background-color: var(--primary);
    width: 100%;
    max-width: 40rem;
    margin: 0 auto;
  }

  .splash-content .button:focus {
    background-color: var(--primary);
    filter: brightness(80%);
  }

  .splash-content .button:hover {
      box-shadow: rgba(0, 0, 0, 0.5) 0px 5px 15px;
    }

  .splash-content .google .button {
    background-color: var(--google);
    color: var(--light-text);
  }

  .splash-content .microsoft .button {
    background-color: var(--microsoft);
    color: var(--dark-text);
  }

  .splash-content .apple .button {
    background-color: var(--apple);
  }

  @media only screen and (min-width: 700px) {
    .splash-content {
      padding-top: 10rem;
    }

      .splash-content .splash-cta {
          bottom: 8rem;
        }

    .splash-content .button {
      width: 40rem;
    }
  }