body {
    font-family: 'Jost', sans-serif;     
    margin: 0;
    padding: 0;
    background: radial-gradient(1100px 800px at 12% 18%, rgba(147,197,253,.38), transparent 62%), radial-gradient(900px 700px at 86% 22%, rgba(216,180,254,.36), transparent 62%), radial-gradient(1000px 800px at 82% 86%, rgba(253,230,138,.42), transparent 62%), radial-gradient(900px 700px at 10% 86%, rgba(167,243,208,.32), transparent 62%), linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.96)); 
    color: #1f2937;    
}
.content-wrapper { padding: 20px;}
h1 {
    font-size: 2em;
    font-weight: 300;
    color: #555;
    text-align: center;
    margin: 0.5em 0;
}
.logo { height: auto; max-width: 900px; display: block; margin: 0 auto;}      
.container {
    max-width: 50%; 
    width: 30%; 
    margin: 80px auto;
    background-color: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 5px 7px -2px rgba(0,0,0,0.1), 0 12px 18px 0 rgba(0,0,0,0.2);
}
.form-group {
    display: flex;
    flex-direction: column;
    margin-bottom: 10px;
}
.form-group label {
    margin-bottom: 5px;
    color: #555;
    text-align: center;
}
.form-group input {
    padding: 10px;
    border-radius: 4px;
    width: 24.5%; /* 35% of 70% */
    margin-left: auto;
    margin-right: auto;
    display: block;
    text-align: center;
    border: 1px solid #ccc;
}
.password-hint {
    display: block;
    margin-top: 5px;
    color: #666;
    font-size: 12px; /* Adjust the font size as necessary */
}
.form-group button {
    padding: 10px;
    border-radius: 4px;
    width: 120px; /* Fixed width for the button */
    margin-left: auto;
    margin-right: auto;
    display: block;
    text-align: center;
    background: linear-gradient(90deg, #06ABB7 0, #06ABB7 100%);
    color: white;
    border: none;
    cursor: pointer;
    transition: background-color .2s ease;
}
.form-group button:hover {
    background-color: #45a049;
}
.error, .success {
    text-align: center;
    margin-bottom: 10px;
}
.error {
    color: red;
}
.success {
    color: green;
}
@media (max-width: 600px) {
    h1 {
        font-size: 1.5em; 
    }
    .form-group input, .form-group button {
        width: 80%; /* Ensuring the inputs and button fit mobile screens */
    }
    
    .container {
        max-width: 80%; 
        width: 50%; 
        margin: 80px auto;
        background-color: #fff;
        padding: 20px;
        border-radius: 10px;
        box-shadow: 0 5px 7px -2px rgba(0,0,0,0.1), 0 12px 18px 0 rgba(0,0,0,0.2);
    }
}