/* Mobile First approach is standard in Bootstrap, these are tweaks for our custom classes */

@media (max-width: 575.98px) {
    header h1 {
        font-size: 1.5rem;
    }
    header p {
        font-size: 0.8rem;
    }
    .glass-card {
        padding: 1.5rem;
        margin-top: 1rem;
    }
    .btn-custom {
        width: 100%;
        margin-bottom: 10px;
    }
    #timer-display {
        font-size: 1.2rem;
    }
}

@media (min-width: 768px) {
    .glass-card {
        padding: 3rem;
    }
}

@media (min-width: 992px) {
    .container {
        max-width: 800px; /* Keep the app constrained for readability */
    }
}