@media screen and (max-width: 950px) {
  body {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .join_logo_intro_background {
    animation: blueBackground 5.5s ease;
  }

  .join_logo_container {
    opacity: 1;
    width: 64px;
    height: 70px;
    top: 30px;
    left: 30px;
    animation: moveJoinLogoMobile 1s ease-in;
  }

  #password_failed {
    display: flex;
    margin-top: -12px;
    color: #ff919e;
    font-size: 12px;
  }

  h1 {
    font-family: "Inter", sans-serif;
  }

  .card {
    max-height: 466px;
    background-color: #fff;
    border-radius: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0px 0px 14px 3px #0000000a;
    padding: 16px;
    top: 140px;
    width: 364px;
    gap: 0px;
  }

  .headline_container {
    width: 139px;
    height: 115px;
    gap: 16px;
    font-size: 47px;
    display: block;
  }

  .headline_container h1 {
    font-size: 47px;
  }

  .h1_underline {
    margin-bottom: 20px;
  }

  .login_input_container {
    width: 320px;
    height: 192px;
    gap: 21px;
  }

  .signup_card > .input_border {
    width: 275px;
  }

  .input_border {
    width: 275px;
  }

  .login_button_container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 21px;
  }

  .login_button_container button {
    width: 180px;
    height: 51px;
  }

  .login_footer_links {
    top: 590px;
    justify-content: center;
    gap: 20px;
  }

  .secondary_button {
    font-size: 16px;
    font-weight: 700;
  }

  .primary_button {
    font-size: 16px;
    font-weight: 700;
  }

  #go_back_to_login_card img {
    top: -1px !important;
    left: 0;
    position: none;
  }

  #go_back_to_login_card {
    top: 37px;
    left: 20px;
  }
}
@media screen and (max-width: 4400px) {
  .signup_container {
    top: 695px;
  }
  .login_footer_links {
    top: 748px;
    justify-content: center;
    gap: 20px;
  }
}

@media screen and (max-width: 377px) {
  .card {
    width: 256px;
    max-height: 348px;
  }
  .input_border {
    width: 218px;
  }
  .login_input_container {
    width: 262px;
    gap: 9px;
    height: 158px;
  }
  .login_button_container {
    gap: 7px;
    margin-top: 10px;
  }
  .login_button_container button {
    width: 128px;
    height: 33px;
  }
  body {
    margin: 0;
  }
  .join_logo_container {
    height: 50px;
  }
  .login_footer_links {
    top: 604px;
  }
  .signup_container {
    top: 536px;
  }
}

@media screen and (max-width: 345px) {
  .card {
    width: 254px;
    height: 345px;
  }
  .signup_container {
    top: 536px;
  }
  .login_footer_links {
    top: 604px;
  }
}

@media (width: 360px) {
  .signup_container {
    top: 576px;
  }
  .headline_container h1 {
    font-size: 37px;
  }
  .login_footer_links {
    top: 630px;
  }
}
/* Ipad mini */
@media (width: 768px) and (height: 1024px) {
  .signup_container {
    top: 743px !important;
  }
  .login_footer_links {
    top: 800px;
  }
}

@media (width: 414px) and (height: 896px) {
  .signup_container {
    top: 680px !important;
  }
}

@media (width: 390px) and (height: 844px) {
  .signup_container {
    top: 680px !important;
  }
}

@media (width: 430px) and (height: 932px) {
  .signup_container {
    top: 700px !important;
  }
  .login_footer_links {
    top: 800px;
  }
}

@media (width: 412px) and (height: 915px) {
  .signup_container {
    top: 700px !important;
  }
  .login_footer_links {
    top: 800px;
  }
}

@media (width: 360px) and (height: 740px) {
  .signup_container {
    top: 600px !important;
  }
  .login_footer_links {
    top: 660px;
  }
}

@media (width: 820px) and (height: 1180px) {
  .signup_container {
    top: 900px !important;
  }
  .login_footer_links {
    top: 1000px;
  }
}

@media (width: 1024px) and (height: 1366px) {
  .signup_container {
    top: 1000px !important;
    left: 380px;
  }
  .login_footer_links {
    top: 1220px;
  }
}

@media (width: 912px) and (height: 1368px) {
  .signup_container {
    top: 1000px !important;
    left: 300px;
  }
  .login_footer_links {
    top: 1220px;
  }
}

@media (width: 540px) and (height: 720px) {
  .signup_container {
    top: 600px !important;
    left: 140px;
  }
  .login_footer_links {
    top: 680px;
  }
}