body{

    padding: 0;

    margin: 0;

    background-color: rgb(0, 88, 139);

}











.center{

    font-family: 'Fredoka', sans-serif;

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    width: 400px;

    background: white;

    border-radius: 15px;

    box-shadow: 0 10px 13px 0 rgba(255, 255, 255, 0.39);

  }

  .center h1{

    text-align: center;

    padding: 20px 0;

    border-bottom: 1px solid silver;

  }

  .center form{

    padding: 0 40px;

    font-family: 'Fredoka', sans-serif;

    box-sizing: border-box;

  }

  form .txt_field{

    position: relative;

    border-bottom: 2px solid #adadad;

    margin: 30px 0;

  }

  .txt_field input{

    width: 100%;

    padding: 0 5px;

    height: 40px;

    font-size: 16px;

    border: none;

    background: none;

    outline: none;

  }

  .txt_field label{

    position: absolute;

    top: 50%;

    left: 5px;

    color: #adadad;

    transform: translateY(-50%);

    font-size: 16px;

    pointer-events: none;

    transition: .5s;

  }

  .txt_field span::before{

    content: '';

    position: absolute;

    top: 40px;

    left: 0;

    width: 0%;

    height: 2px;

    background: #2691d9;

    transition: .5s;

  }

  .txt_field input:focus ~ label,

  .txt_field input:valid ~ label{

    top: -5px;

    color: #2691d9;

  }

  .txt_field input:focus ~ span::before,

  .txt_field input:valid ~ span::before{

    width: 100%;

  }

  .pass{

    

    margin: -5px 0 20px 5px;



  }

  .pass:hover{

    text-decoration: underline;

  }



  .pass a{

    color: #a6a6a6;

    cursor: pointer;

    text-decoration: none;

  }



  input[type="submit"]{

    width: 100%;

    height: 50px;

    border: 1px solid;

    background: #2691d9;

    border-radius: 25px;

    font-size: 18px;

    color: #e9f4fb;

    font-weight: 700;

    cursor: pointer;

    outline: none;

  }

  input[type="submit"]:hover{

    border-color: #2691d9;

    transition: .5s;

  }

  .signup_link{

    margin: 30px 0;

    text-align: center;

    font-size: 16px;

    color: #666666;

  }

  .signup_link a{

    color: #2691d9;

    text-decoration: none;

  }

  .signup_link a:hover{

    text-decoration: underline;

  }



.error-msg{

    background-color: rgb(255, 0, 0);

    color: #fff;

    padding: 15px;

    margin: 10px;

    border-radius: 5px;

    text-align: center;

    display: block;

}



.success-msg{

  background-color: rgb(0, 125, 0);

  color: #fff;

  padding: 15px;

  margin: 10px;

  border-radius: 5px;

  text-align: center;

  display: block;

}


@media (max-width: 475px) {
  .center{
    top: 30%;
    width: 80%;
  }
}

@media (max-width: 475px) {
  .center{
    top: 30%;
    width: 95%;
  }
}