/* Global styles for the body */
        body {
            font-family: Arial, sans-serif;
            /* Use padding that scales but has a reasonable minimum/maximum */
            padding: 20px; /* Default for small screens */
            max-width: 800px; /* Max width for large screens */
            margin: auto; /* Centers the content */
            /* Use em/rem for line-height, not vw */
            line-height: 1.6; 
            color: #333; /* A standard text color */
        }

        /* Adjusting the main container width for different screen sizes */
        @media (min-width: 600px) {
            body {
                padding: 40px; /* More padding on medium screens */
            }
        }

        /* Ensure text sizes are relative to the screen size or default font size */
        h1 {
            font-size: 2em; /* Twice the base font size */
            margin-bottom: 0.5em;
        }

        p, ul, li, a {
            font-size: 1rem; /* Base font size */
        }

        /* Footer styling adjustments */
        .footer {
            margin-top: 40px; /* Use px for margin top that stays consistent */
            color: #777;
            border-top: 1px solid #eee;
            padding-top: 20px;
        }

        /* Basic link styling */
        a {
            color: #007BFF;
            text-decoration: none;
        }
        a:hover {
            text-decoration: underline;
        }

        #styled-list li::marker{
                font-size: 24px; 
                font-weight: bold; 

        }