/* task10.css - Standalone Media Query Styles */

body {
    margin: 0;
    font-family: sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    transition: background-color 0.5s ease;
    /* Base Color: Mobile */
    background-color: #ff9999; 
}

#view-text::after { content: "Mobile (< 600px)"; }

/* Tablet Breakpoint (600px to 1024px) */
@media screen and (min-width: 600px) {
    body { background-color: #99ffcc; }
    #view-text::after { content: "Tablet (600px - 1024px)"; }
}

/* Desktop Breakpoint (> 1024px) */
@media screen and (min-width: 1024px) {
    body { background-color: #99ccff; }
    #view-text::after { content: "Desktop (> 1024px)"; }
}

.status-box {
    background: white;
    padding: 40px;
    border-radius: 15px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    text-align: center;
}