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


body {
    font-family: Arial, Helvetica, sans-serif;
    background-color: #E4E4E4;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
} 


form {
    background-color: #F5F5F5;
    padding: 50px;
    width: 420px;
    text-align: center;
    box-shadow: 0 0 20px rgba(0, 0, 0.2);
} 


form h2 {
    font-size: 25;
    color: #1e1e1e);
    text-transform: uppercase;
    margin-bottom: 35px;
}


.input-container {
position: relative;
}

.input-container > i {

padding: 14px;
border-radius: 50%;
background:linear-gradient(90deg,rgba(153,26,123,1) 0%,
rgb(239, 20, 174) 50%)%

color #FCFCFC
border-radius: 50%;
background:#997feea7;
position: absolute;
font-size: 20px;
top: 4px;
left: 10px;
}


    padding: 17px 15px 17px 65px;
    width: 100%;
    margin-bottom: 25px;
border-radius: 35px;
background-color: transparent;
border:2px solid #CBCBCB;
font-size:16PX;
outline: NONE;
color: #1e1e1e;

}
::placeholder {

color: rgb(0, 0, 0);
font-size: 16px;
}

form a {
    display: block;
    color: black;
    font-size:16PX;
    text-decoration:  none;
    margin-bottom: 25px;
}
.btn { 
    background: linear-gradient(90deg,
    rgb(84, 79, 83) 0%
    rgba(117,30,156,1) 50%
 
    );
padding: 20px 80px;
border: 30;
box-shadow: 0 0 20px hsla(18, 84%, 84%, 0);
border-radius: 50px;
color: #54c268;
font-size: 30px;
cursor: pointer;
}


.success {
    position: absolute;
top: 50px;
color: red;
font-size: 20px;

}

@media(max-width:991px) {
    body{padding: 30px;}
    form{wide: 350px;}

}