:root {
    --button-color: #674300;
    --active-button-color: #895b07;
}


main {
    display: flex;
    flex-direction: column;
    align-items: center;
}


.form {
    display: flex;
    flex-direction: column;
    margin: 5rem 0rem 5rem 0rem;
    width: min(100%, 500px);
}


.form fieldset{
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 1rem 3rem 2rem 3rem;
    box-shadow: 0px 8px 24px rgba(149, 149, 149, 0.25);
}


.submit__button {
    border: none;
    background-color: var(--button-color);
    color: wheat;
    font-size: 1rem;
    transition-duration: 0.25s;
    padding: 0.5rem 0.75rem 0.5rem 0.75rem;
}


.submit__button:hover {
    cursor: pointer;
    background-color: var(--active-button-color);
    color: wheat;
}


.error-message {
    text-align: center;
    background-color: rgb(255, 173, 173);
    border: 3px solid rgb(255, 74, 74);
    width: 100%;
    padding: 20px 0px 20px 0px;
}


.password_field {
    display: flex;
    gap: 0.25vw;
}


.password_field input{
    width: 100%;
}


.toggle-password {
    border: none;
    background-color: var(--button-color);
    color: wheat;
    transition-duration: 0.25s;
    padding: 0vh 0.2vw;
}


.toggle-password:hover {
    cursor: pointer;
    background-color: var(--active-button-color);
    color: wheat;
}