
    <style>
    /* Content Styles */
        body {
            font-family: Helvetica, sans-serif; 
            margin: 0; 
            padding: 0; 
            font-size: 16px; 
        }

        .theme { 
            color: black; 
            font: 16px 'Times'; 
        }

        .bodytext {
            font-size: 1.1rem;
            color: #333;
            line-height: 1.6; 
            margin: 20px;
        }

        .head-text {
            font-size: 1.1rem;
            color: #333;
            line-height: 1.6;
            top: 50px;
            margin: 20px; 
        }

        h1 {
            font-family: Times, serif;
            font-size: 2rem; 
            color: black; 
            text-align: center;
            margin: 20px; 
        }

         h1 a {
            color: black;          /* makes the text black */
            text-decoration: none; /* removes underline */
        }

        h1 a:hover {
            color: darkred;           /* optional: change color on hover */
        }

        h2 {
            font-size: 16px;
            font-family: Times, serif;
            font-weight: bold;
        }


        /* Home Page Styles */
        .content {
            padding: 20px; 
        }

        .content img {
            width: 400px;
            height:auto;
            cursor:pointer;
            position: absolute;
        }

        /* Home button (top left corner) */
        .home-button {
            position: absolute; 
            top: 10px; 
            left: 10px; 
            z-index: 1000;
        } 

        .home-button img {
            width: 75px; 
            height: auto; 
            cursor: pointer; 
        }

        /* City button (top right corner) */
        .city-button {
            position: absolute; 
            top: 10px; 
            right: 10px; 
            z-index: 1000;
        } 

        .city-button img {
            width: 75px; 
            height: auto; 
            cursor: pointer; 
        }
        

        
         /* Nav bar styles */
        nav {
            background-image: url("http://mcsmithwebsite.com/IMAGE_FILES/chrome_bar4.png");
            background-size: contain; /* scale image to cover full width */
            background-repeat: no-repeat; /* prevent tiling */
            background-position: center; /* center the image */
            padding: 10px;
        }

        nav ul {
            display: flex;
            justify-content: center;
            list-style-type: none;
            padding: 10px;
            margin: 10px;
            gap: 30px; 
        }

        nav li {
            margin: 0;
        }

        nav a {
            color: blue; 
            font-size: 1rem; 
            font-style: bold;
            padding: 10px 10px;
            text-decoration: none; 
        }

        nav a:visited {
            color: blue; 
        }

        nav a:hover {
            background-color: #FFDE21;
            color: white; 
        } 

        /* Points box 
        #points-box {
            display: inline-block;
            margin-left: 5px; 
            color: #333;
            background-color: #FFDE21;
            border: none;
            border-radius: 0;
            padding: 15px 15px;
            font-family: Times, serif;
            font-size: 15px;
            font-weight: bold; 
            */
            /* Star Shape 
            clip-path: polygon(
                50% 0%,
                61% 35%,
                98% 35%,
                68% 57%,
                79% 91%,
                50% 70%,
                21% 91%,
                32% 57%,
                2% 35%,
                39% 35%
            );
        }
        */

        /* ------- ART Page ------ */
        
        .art-content {
            padding: 0 20px;
        }

        .art-content h1, 
        .art-content h2, 
        .art-content p, 
        .art-content img {
            margin-left: 0;
            padding-left: 0;
        }

        .art-content p {
            line-height: 1.6;
            margin-bottom: 15px;
            color: black;
        }

        .art-content img {
            display: block;
            width: 900px;
            max-width: 100%;
            height: auto;
            margin: 0 0 20px 0;
        }

        .art-post {
            display: block;
            margin-left: 20px;
            padding: 20px;
            font-family: Helvetica, sans-serif;
            font-size: 14px;
        }



        /* ------------ MOBILE STYLES ------------*/
        @media (max-width: 600px) {
            body { font-size: 14px; }
            h1 { font-size: 1.5rem; }
            h2 { font-size:1.0rem; }

            nav {

            }

            /*nav ul {
                flex-direction: column; 
                gap: 10px; 
            }

            nav a {
                font-size: 0.9rem; 
                padding: 10px; 
            } *

             /* Points box Mobile */
            #points-box {
                position: inline-block;
                margin-left: 0px; /* space between XP+ and the box */
                color: #333;
                background-color: #FFDE21;
                border: none;
                border-radius: none;
                padding: 15px 15px;
                font-family: Times, serif;
                font-size: 0.9rempx;
                font-weight: bold; 

                /* Star Shape */
                clip-path: polygon(
                    50% 0%,
                    61% 35%,
                    98% 35%,
                    68% 57%,
                    79% 91%,
                    50% 70%,
                    21% 91%,
                    32% 57%,
                    2% 35%,
                    39% 35%
                    );
                }

               /* Home button (top right corner) */
            .home-button {
                position: absolute; 
                top: 10px; 
                right: 10px; 
                z-index: 1000;
            } 

            .home-button img {
            width: 30px; 
            height: auto; 
            cursor: pointer; /* hand icon when hover */
            } 

        }
        </style>