/*
AI Assistance Disclosure:
    Portions of this code were developed with the assistance of generative AI tools.
    All AI-assisted contributions have been reviewed by the developer.
*/

/* index.css */
.container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    padding: 20px;
}

.card {
    background-color: #ffffff;
    border-radius: 20px;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
    padding: 40px 30px;
    max-width: 800px;
    width: 100%;
    text-align: center;
}

h1 {
    font-size: 3rem;
    /* increased from 2.2rem */
    margin-bottom: 12px;
    color: #00796b;
    /* primary teal */
    text-align: center;
    /* center heading */
}

input {
    width: 97%;
    /* reduced from 100% to create margins */
    display: block;
    /* makes the element block-level */
    margin: 0 auto 10px;
    /* center horizontally with auto margins */
    padding: 12px 14px;
    /* uncommented padding */
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    font-size: 1rem;
    outline: none;
    transition: all 0.2s ease;
}