body {
    font-family: 'Times New Roman', Times, serif, Arial, sans-serif;
    background-color: white;
    font-size: 1.1rem; /* Base font size */
}

#toc {
    background-color: #f4f4f4;
    padding: 10px;
    border: 1px solid #ccc;
    width: 43rem;
}

    #toc ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
    }

        #toc ul li {
            margin: 5px 0;
        }

            #toc ul li a {
                text-decoration: none;
                color: #333;
            }

                #toc ul li a:hover {
                    text-decoration: underline;
                }


@media (max-width: 1024px) {
    #toc {
        width: 70%; /* 40%;*/
        /*background-color: lightskyblue;*/
        /* background-color: hsla(0, 0%, 83%, 0.7);  */
    }
}

/* Media Query for Tablets (screens up to 768px wide) */
@media (max-width: 768px) {
    #toc {
        width: 90%;
        /*background-color: lightcoral;*/
    }
}

/* Styles for medium screens: In between Phone and Tablet View
        @media (min-width: 577px) and (max-width: 767px) {
            #toc {
                min-width: 45%;
                max-width: 50%;
                background-color: cyan;
            }
        }
*/

/* Media Query for Mobile Phones (screens up to 480px wide) */
@media (max-width: 576px) {
    #toc {
        width: 95%;
        /*background-color: lightseagreen;*/
    }

    body {
        font-size: 1.1rem; /* Smaller text for mobile */
        /*font-size: clamp(1rem, 2.5vw, 1.5rem);*/ /* Adjusts between 1rem and 1.5rem */
    }
}