signup.css

#signUpForm{
    max-width: 450px;
    margin: auto;
    margin-top: 50px; 
    background-color: #0d58a1;
    max-width: 450px;
    margin: auto;
    margin-top: 50px;
    background-image: linear-gradient(45deg, black, transparent);
    border-radius: 1.2rem;
    box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 2px, rgba(0, 0, 0, 0.07) 0px 2px 4px, rgba(0, 0, 0, 0.07) 0px 4px 8px, rgba(0, 0, 0, 0.07) 0px 8px 16px, rgba(0, 0, 0, 0.07) 0px 16px 32px, rgba(0, 0, 0, 0.07) 0px 32px 64px;
}
body{
    font-family: Georgia, 'Times New Roman', Times, serif;
    background-image:linear-gradient(to right,indigo,rgb(243,4,49)) ;

}
.form-content{
    max-width: 430px;
    width: 100%;
    padding: 30px ;
    border-radius: 6px;
    /* background: white;         */
    /* border: 2px solid#0171d3; */
    margin: auto;
    margin-left: 10px;
}
header{
    font-size: 28px;
    font-weight: 600;
    text-align: center;
    color: white;
    margin-right: 50px;
}
form {
    margin-top: 30px;
}
form .field{
    height: 50px;
    width: 80%;
    margin-top: 20px;
    /* border: #0171d3; */
}

.field input,
.field button{
    height: 100%;
    width: 100%;
    border: none;
    font-size: 15px;
    font-weight: 400;
    border-radius: 6px;
}
.field input{
    
    border: 1px solid #CACACA;
    padding: 0 15px;
}
/* .field button{
    background-color: aqua;
    border: #0171d3;
    margin-left: 60px;
    color: red;
} */
.form-link{
    text-align: center;
    margin-top: 10px;
    margin-right: 10px;
}
.login-link input{
    position: relative;
    margin-top: 20px;
    justify-content: center;
    margin-left: 60px;
    padding: 17px 100px;
    border-radius: 10px;
    border: rebeccapurple;
    font-size: large;
    color: white;
    background-color: rgb(0, 125, 109);
}
.form-link span,
.form-link a{
    font-size: 14px;
    font-weight: 400;
}
form a{
    text-decoration: none;
    color: rgba(55, 55, 244, 0.395);
    color: #fff;
}

form a:hover{
    text-decoration: underline;
}

#eyeClosed{
    position: relative;
    bottom: 30px;
    left: 350px;
}
#eyeOpen{
    position: relative;
    display: none;
    bottom: 30px;
    left: 350px;
}
.show{
    display: block;
}
.login-link input:hover{
    background-color:  #fff;
    width: 260px;
    color: black;
}
span{
    color: gray;
}
span a{
    padding-left: .3rem;
}
/* .message{
    display: none;
    color: red;
    font-weight: 500;
    padding: 10px;
} */
 .field input[type='email']{
    border:none;
}
.field input[type="email"]:focus{
outline:none;
} 
.field input[type='text']{
    border:none;
}
.field input[type="text"]:focus{
outline:none;
} 
.field input[type='number']{
    border:none;
}
.field input[type="number"]:focus{
outline:none;
} 
.field input[type='password']{
    border:none;
}
.field input[type="password"]:focus{
outline:none;
} 
.field input::-webkit-outer-spin-button,
.field input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
.field input[type=number] {
  -moz-appearance: textfield;
}