* {
  padding: 0%;
  margin: 0%;
  box-sizing: border-box;
}

a {
  text-decoration: none;
  color: black;
}

body {
  width: 100%;
  height: 100vh;
  background-image: url("../../image/header_img.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.section-sign-page {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
}

.overlay {
  position: fixed;
  inset: 0;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  background: rgba(19, 19, 19, 0.2);
}

section {
      display: flex;
    gap: 10px;
      max-width: 376px;
    width: 100%;
        align-items: center;
    overflow: hidden;
}

#signUp-page.active {
  transform: translateX(-100%)
}
#signIn-page.active {
  transform: translateX(-385px)
}

#signUp-page,
#signIn-page {  
    display: flex;
        height: -webkit-fit-content;
        height: -moz-fit-content;
        height: fit-content;
    justify-content: center;
    min-width: 376px;
    width: 100%;
    background: white;
    border-radius: 15px;
    padding-block: 30px;
    padding-inline: 30px;
    transition-duration: 0.4s;

  .form-signUp,
  .form-signIn {
    max-width: 325px;
    width: 100%;

    .logo-form {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-bottom: 20px;

      h3 {
        font-size: 20px;
        font-family: system-ui;
        font-weight: 500;
      }
    }

    .inputs-form {
      display: grid;
      gap: 9px;

      .firstName-input,
      .lastName-input,
      .email-input,
      .password-input {
        display: flex;
        flex-direction: column;
        gap: 7px;

        label {
          font-size: 16px;
          font-family: system-ui;
        }

        input {
          border: 1px solid #bbbbbb;
          border-radius: 6px;
          padding-inline: 10px;
          padding-block: 10px;
          outline: none;
          color: #727272;

          &:focus {
            border: 1px solid #fd5c38;
          }
        }
      }
    }

    .submit {
      width: 100%;
      height: 45px;
      border: none;
      border-radius: 7px;
      margin-top: 21px;
      background-color: #fd5c38;
      color: white;
      cursor: pointer;
      transition-duration: 0.4s;

      &:active {
        transform: scale(0.9);
      }
    }

    .message-form {
      font-size: 14px;
      font-family: system-ui;
      margin-top: 7px;

      span {
        color: #fd5c38;
        cursor: pointer;
      }
    }
  }
}

.warning-message {
  background: #f44336;
  position: fixed;
  bottom: 11px;
  right: 12px;
  color: white;
  font-size: 16px;
  font-family: system-ui;
  width: 100%;
  max-width: 300px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 6px;
  transform: translateY(100%);
  opacity: 0;
  transition: transform 0.4s, opacity 0.4s;

  &.active {
    transform: translateY(0);
    opacity: 1;
    -webkit-animation: shake 0.4s ease-in-out;
            animation: shake 0.4s ease-in-out;
  }
}

/* Animation */
@-webkit-keyframes shake {
  0% {
    transform: translateY(0) translateX(0);
  }
  20% {
    transform: translateY(0) translateX(-5px);
  }
  40% {
    transform: translateY(0) translateX(5px);
  }
  60% {
    transform: translateY(0) translateX(-4px);
  }
  80% {
    transform: translateY(0) translateX(4px);
  }
  100% {
    transform: translateY(0) translateX(0);
  }
}
@keyframes shake {
  0% {
    transform: translateY(0) translateX(0);
  }
  20% {
    transform: translateY(0) translateX(-5px);
  }
  40% {
    transform: translateY(0) translateX(5px);
  }
  60% {
    transform: translateY(0) translateX(-4px);
  }
  80% {
    transform: translateY(0) translateX(4px);
  }
  100% {
    transform: translateY(0) translateX(0);
  }
}