body {
        background: linear-gradient(135deg, rgba(0, 0, 0, 0.8), rgba(50, 50, 50, 0.8));
        font-family: Arial, sans-serif;
        color: white;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .header {
        text-align: center;
        margin: 20px 0;
    }

    .challenge-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: 20px;
        width: 90%;
        max-width: 1200px; /* Limit width for larger screens */
        margin: auto;
    }

    .challenge-item {
        background: rgba(255, 255, 255, 0.1); /* Glassmorphic effect */
        border-radius: 10px;
        padding: 20px;
        color: white;
        text-align: center;
        transition: transform 0.3s, background 0.3s;
        backdrop-filter: blur(10px); /* Adds blur for glassmorphism */
        border: 1px solid rgba(255, 255, 255, 0.2); /* Optional border */
    }

    .challenge-item:hover {
        transform: scale(1.05);
        background: rgba(255, 255, 255, 0.2); /* Darken on hover */
    }

    .timer-container {
        margin: 20px 0;
        font-size: 20px;
        color: white; /* Timer color */
    }

    .success {
        color: green;
    }

    .error {
        color: red;
    }

    /* Media queries for larger screens */
    @media (min-width: 768px) {
        .challenge-grid {
            grid-template-columns: repeat(3, 1fr); /* 3 columns for tablets and laptops */
        }
    }

    @media (min-width: 1024px) {
        .challenge-grid {
            grid-template-columns: repeat(4, 1fr); /* 4 columns for larger laptops/desktops */
        }
        .timer-container {
            font-size: 24px; /* Larger font size for desktops */
        }
        .challenge-item {
            padding: 30px; /* More padding for better aesthetics */
        }
    }

    @media (min-width: 1440px) {
        .challenge-grid {
            grid-template-columns: repeat(5, 1fr); /* 5 columns for extra-large screens */
        }
        .timer-container {
            font-size: 28px; /* Even larger font size for larger screens */
        }
    }

    /* Button styling */
    button {
        background-color: red; /* Button color */
        border: none;
        border-radius: 5px;
        color: white;
        padding: 10px 20px;
        cursor: pointer;
        transition: background-color 0.3s;
    }

    button:hover {
        background-color: darkred; /* Darker shade on hover */
    }

    input[type="text"] {
        width: calc(100% - 20px);
        padding: 10px;
        border-radius: 5px;
        border: 1px solid rgba(255, 255, 255, 0.3);
        background-color: rgba(255, 255, 255, 0.1); /* Input background */
        color: white;
    }

    input[type="text"]:focus {
        outline: none;
        border-color: white; /* Border color on focus */
    }