* {margin: 0;padding: 0;box-sizing: border-box;font-family: Poppins, sans-serif }body {background: #ecf0f3 }.wrapper {max-width: 350px;min-height: 370px;margin: 80px auto;padding: 40px 30px 30px;background-color: #ecf0f3;border-radius: 15px;box-shadow: 13px 13px 20px #cbced1, -13px -13px 20px #fff }.logo {width: 130px;margin: auto }.logo img {width: 100%;max-width: 100%;height: 100%;border-radius: 50%;}.wrapper .name {font-weight: 600;font-size: 1.4rem;letter-spacing: 1.3px;padding-left: 10px;color: #555 }.wrapper .form-field input {width: 100%;display: block;border: none;outline: 0;background: 0 0;font-size: 1.2rem;color: #666;padding: 10px 15px 10px 10px }.wrapper .form-field {padding-left: 10px;margin-bottom: 20px;border-radius: 20px;box-shadow: inset 8px 8px 8px #cbced1, inset -8px -8px 8px #fff }.wrapper .form-field .fas {color: #555 }.wrapper .btn {box-shadow: none;width: 100%;height: 40px;background-color: #442d24;color: #fff;border-radius: 25px;box-shadow: 3px 3px 3px #b1b1b1, -3px -3px 3px #fff;letter-spacing: 1.3px }.wrapper .btn:hover {background-color: #78635c;}.wrapper a {text-decoration: none;font-size: .8rem;color: #442d24;font-weight: 550 }.wrapper a:hover {color: #00c55d }@media(max-width:380px) {.wrapper {margin: 30px 20px;padding: 40px 15px 15px }}.animatedDots {text-align: center;padding: 1.8rem .8rem .8rem;border-radius: 5px }.dot {display: inline-block;width: 15px;height: 15px;border-radius: 50%;background-color: #78635c;}.animatedDots .dot:nth-last-child(3) {animation: .6s ease-in .1s infinite jumpingAnimation }.animatedDots .dot:nth-last-child(2) {animation: .6s ease-in .2s infinite jumpingAnimation }.animatedDots .dot:last-child {animation: .6s ease-in .3s infinite jumpingAnimation }@keyframes jumpingAnimation {0%, 100%, 33% {transform: translate(0, 0) }16% {transform: translate(0, -15px) }}.invalid {border: 2px solid red !important;}