#color-font {
    color: white
}

.input-container {
    background: rgb(255 255 255 / 20%);
    padding: 30px;
    border-radius: 15px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    max-width: 400px;
    margin: 0 auto;
    border: 2px solid rgba(255, 255, 255, 0.4);
}

h3, p {
    color: #333333;
}

.custom-input {
    width: 100%;
    background: #f8f9fa;
    border: 2px solid transparent;
    border-radius: 50px;
    padding: 15px 20px;
    font-size: 16px;
    transition: all 0.3s ease-in-out;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

    .custom-input:focus {
        border-color: #007bff;
        background: #ffffff;
        box-shadow: 0 4px 15px rgba(0, 123, 255, 0.2);
        transform: scale(1.02);
        outline: none;
    }

    .custom-input::placeholder {
        color: #6c757d;
        opacity: 0.7;
        transition: opacity 0.3s ease-in-out;
    }

    .custom-input:focus::placeholder {
        opacity: 0.4;
    }