#hold_sign_in_wrapper {
  position: absolute;
  top: 170px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

#sign_in_wrapper {
    display: grid;
}

[id^=sign_in_item_] {
    display: flex;
    align-items: center;
    justify-items: center;
    flex-direction: column;
}

#sign_in_up_title {
    color: var(--sign_in_up_title_color);
    text-align: center;
    margin-top: -30px;
    margin-bottom: 30px;
    font-size: 20px;
}

#input_email, #input_password, #input_password_confirm {
    width: 300px;
    height: 50px;
    border: none;
    background: transparent;
    border-radius: 4px;
    border-bottom: 2px solid var(--sign_in_up_border_color);;
    border-top: none;
    border-left: none;
    border-right: none;
    font-size: 18px;
    color: var(--sign_in_up_input_color);
}

#eyeball {
  filter : var(--eyeball_filter);
}

#input_password, #input_password_confirm {
    margin-top: 15px;
}

#input_email::placeholder,
#input_password::placeholder,
#input_password_confirm::placeholder {
  color: var(--placeholder_color);
}

#forgot_password {
  margin: 10px;
  color: var(--forgot_password_color);
  cursor: pointer;
}

#cancel_button {
    background: grey;
    color: white !important;
}

#hold_buttons_wrapper {
    display: grid;
    gap: 10px;
    grid-template-rows: auto;
    grid-template-columns: auto auto auto;
    margin-top: 30px;
}

#sign_in_button, #sign_up_button, #sign_up_cancel_button, #sign_in_cancel_button {
    height: auto; 
    border: none;
    border-radius: 4px;
    font-size: 18px;
    padding: 10px;
    cursor: pointer;
    color: black;
}

#sign_in_button {
    background: #ffda79;
}

#sign_up_button {
  background: purple;
  color: white;
}

#sign_up_cancel_button, #sign_in_cancel_button {
  background: #d1ccc0;
}

.rubberband {
    animation: rubberband 1s ease 1;
}

.red_outline {
    outline: 2px solid red;
}

@keyframes rubberband {
    0% {
      transform: scaleX(1);
    }
    20% {
      transform: scaleX(1.25) scaleY(0.75);
    }
    40% {
      transform: scaleX(0.75) scaleY(1.25);
    }
    60% {
      transform: scaleX(1.15) scaleY(0.85);
    }
    80% {
      transform: scaleX(0.95) scaleY(1.05);
    }
    100% {
      transform: scaleX(1) scaleY(1);
    }
  }