body {

    background: #236d9e;

    display: flex;

    justify-content: left;

    align-items: left;

    height: 30vh;

    flex-direction: column;

}

*{

    font-family: Arial;

    box-sizing: padding-box;

}

form {

    position:relative;

    width: 600px;

    border: 3px solid rgb(177, 142, 142);

    padding: 20px;

    background: #ffe4e1;

    border-radius: 20px;

}

h2 {

    text-align: center;

    margin-bottom: 40px;

}

input {

    display: block;

    border: 2px solid #ccc;

    width: 96%;

    padding: 10px;

    margin: 10px auto;

    border-radius: 5px;

}

label {

    color: #888;

    font-size: 18px;

    padding: 10px;

}

button {

    float: right;

    background: #0707fa;

    color: #faf8f8;

    padding: 10px 15px;

    border-radius: 5px;

    margin-right: 10px;

    border: none;

}

button:hover{

    opacity: .10;

}

.error {

   background: #F2DEDE;

   color: #0c0101;

   padding: 10px;

   width: 95%;

   border-radius: 5px;

   margin: 20px auto;

}

h1 {

    text-align: center;

    color: rgb(134, 3, 3);

}

a {

    float: right;

    background: rgb(183, 225, 233);

    padding: 10px 15px;

    color: #fff;

    border-radius: 10px;

    margin-right: 10px;

    border: none;

    text-decoration: none;

}

a:hover{

    opacity: .7;

}

.password-container {
    display: flex;
    align-items: center; /* Align items vertically */
    position: relative;
}

.password-container input[type="password"] {
    flex-grow: 1; /* Input field takes up the available space */
    padding-right: 40px; /* Padding for the icon */
    /* Other styles... */
}

.password-container input[type="text"] {
    flex-grow: 1; /* Input field takes up the available space */
    padding-right: 40px; /* Padding for the icon */
    /* Other styles... */
}

.password-container span {
    position: absolute;
    right: 10px;
    cursor: pointer;

}