@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,500&display=swap');

 * {
     margin: 0;
     padding: 0;
     font-family: 'Poppins', sans-serif;
     box-sizing: border-box;
 }

 ::selection {
     color: #fff;
     background: #005596;
 }

 .container {
     width: 100%;
     height: 100vh;
     background-image: linear-gradient(rgba(0, 0, 50, 0.4), rgba(0, 0, 50, 0.4)), url(./img/signup-background.jpg);
     background-position: center;
     background-size: cover;
     position: relative;
 }

 .formbox {
     width: 90%;
     max-width: 450px;
     position: absolute;
     top: 50%;
     left: 50%;
     border-radius: 10px;
     transform: translate(-50%, -50%);
     background: #fff;
     padding: 50px 60px 70px;
     text-align: center;
 }

 /*.shake*/
 .input-field.shake,
.input-field.shake + .error-txt{
     animation: shake 0.3s ease-in-out infinite;
 }

 @keyframes shake {

     0%,
     100% {
         margin-left: 0;
         margin-right: 12px;
     }

     20%,
     80% {
         margin-left: -10px;
         margin-left: -12px;
     }

     40%,
     60% {
         margin-left: 10px;
         margin-right: 0px;
     }
 }

 .logo {
     width: 25%;
 }

 .formbox h2 {
     font-size: 30px;
     margin-bottom: 60px;
     color: #5B5B5B;
     position: relative;
     font-weight: 300;
 }

 .formbox h2::after {
     content: "";
     width: 80px;
     height: 4px;
     border-radius: 3px;
     background: #005596;
     position: absolute;
     bottom: -12px;
     left: 50%;
     transform: translatex(-50%);
 }

 .input-field {
     border: 1px solid #bfbfbf;
     border-bottom-width: 2px;
     border-radius: 5px;
     margin: 15px 0 10px;
     border-radius: 3px;
     display: flex;
     /*icon 文字會同行*/
     align-items: center;
     max-height: 65px;
     transition: max-height 0.5s;
     overflow: hidden;
 }

 form .input-field input:focus {
     border-color: #005596;
 }

 input {
     width: 100%;
     background: transparent;
     border: 0;
     outline: none;
     font-size: 16px;
     padding: 14px 15px;
     caret-color: #005596;
 }

 .input-field i {
     margin-left: 15px;
     color: #999;
 }

 .input-group {
     height: 300px;
 }


 /*錯誤icon*/
 form .fa-sharp {
     padding-right: 5%;
     color: rgb(243, 96, 120);
 }

 form .error-txt {
     color: rgb(243, 96, 120);
     text-align: left;
     font-size: 14px;
 }

 form input::placeholder {
     color: #bfbfbf;
     font-size: 16px;
 }

 /*按鈕設計*/
 .btn-field {
     width: 100%;
     display: flex;
     justify-content: space-between;
 }

 .btn-field button {
     flex-basis: 48%;
     background: #005596;
     color: #fff;
     height: 40px;
     border-radius: 20px;
     border: 0;
     outline: 0;
     cursor: pointer;
     transition: 1;
 }

 .btn-field button.disable {
     background: lightgrey;
     color: #555;
 }

 button {
     transition: all 0.3s ease;
     margin-top: 20px;
 }

 button:hover {
     background: #1471b8;
 }

 /*密碼密碼?加入會員*/
 .sign-txt {
     margin-top: 40px;
 }

 .formbox p {
     text-align: left;
     font-size: 16px;
 }

 .formbox p a {
     text-decoration: none;
     color: #005596;
 }

 .formbox p a:hover {
     text-decoration: underline;
 }

 /*input 後 border 變色*(正常)*/
 form .input-field:focus-within,
 form .input-field.valid input {
     border-color: #5372F0;
 }

 /*input 後 icon 變色*(正常)*/
 form .input-field:focus-within .icon,
 form .input-field.valid .icon {
     color: #5372F0;
 }

 /*input 後 border 變色*(錯誤)*/
 form .input-field.shake input,
 form .input-field.error input {
     border-color: rgb(243, 96, 120);
 }

 /*input 後 icon & 錯誤提醒 變色*(錯誤)*/
 form .input-field .error-icon{
     color: rgb(243, 96, 120);
 }

 /*密碼錯誤訊息*/
 form .error-txt, form .error-icon {
     display: none;
 }

 form .input-field.shake .error,
 form .input-field.error .error {
     display: block;
 }