/* Light Mode Styles - @media query for preferred light mode */
@media (prefers-color-scheme: light) {
    /* Additional Styling for UL Elements */
    .toc-list ul {
        list-style: none;
        margin: 0.5rem 1rem 0 0.1rem;
        padding: 0;
    }

    /* Styling for the Table of Contents */
    .table-of-contents {
        background-color: #f8f8f8;
        border: 1px solid #eaeaea;
        padding: 15px;
        border-radius: 5px;
        margin-bottom: 20px;
    }

    .toc-header {
        display: flex;
        align-items: center;
        margin-bottom: 0px;
    }

    .toc-toggle {
        font-size: 1.2rem;
        margin-right: 10px;
    }

    .toc-toggle a {
        color: #0073e5;
        text-decoration: none;
    }

    .toc-toggle a:hover {
        text-decoration: underline;
    }

    .toc-list {
        list-style: none;
        padding: 0;
        margin-top: 20px;
    }

    .toc-item {
        margin-left: 0; /* Reset margin for each item */
    }

    .toc-item.toc-subitem {
        margin-left: 15px; /* Adjust the indentation for subitems */
    }

    .toc-list a {
        color: #0073e5;
        text-decoration: underline;
    }

    .toc-list a:hover {
        text-decoration: underline;
    }

    .toc-content {
        opacity: 1;
        max-height: 1000px; /* Adjust as needed */
        overflow: hidden;
        transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out;
        margin-top: 0px;
    }

    .collapsed .toc-content {
        opacity: 0;
        max-height: 0;
    }

    /* Styles for toc-levels */
    .toc-item.toc-level-1 { margin-left: 15px; font-weight: bold; }
    .toc-item.toc-level-2 { margin-left: 15px; }
    .toc-item.toc-level-3 { margin-left: 30px; }
    .toc-item.toc-level-4 { margin-left: 45px; }
    .toc-item.toc-level-5 { margin-left: 60px; }
    .toc-item.toc-level-6 { margin-left: 75px; }

    .toc-toggle button {
    background: #f8f8f8;
    color: var(--color-content-heading);
    }
    ul#toc-list {
    margin-left: 0px; }
}





/* Light Mode Styles - @media query for preferred light mode */
@media (prefers-color-scheme: dark) {
    /* Additional Styling for UL Elements */
    .toc-list ul {
        list-style: none;
        margin: 0.5rem 1rem 0 0.1rem;
        padding: 0;
    }

    /* Styling for the Table of Contents */
    .table-of-contents {
        background-color: #121212;
        border: 0px solid #eaeaea;
        padding: 15px;
        border-radius: 5px;
        margin-bottom: 20px;
		box-shadow: 0 0.1rem 0.2rem rgba(0,0,0,0.1), 0 0.33rem 1rem rgba(0,0,0,0.1);
		color: var(--color-content-heading);
		transition-duration: 0.3s;
    }

    .toc-header {
        display: flex;
        align-items: center;
        margin-bottom: 0px;
    }

    .toc-toggle {
        font-size: 1.2rem;
        margin-right: 10px;
    }

    .toc-toggle a {
        color: #0073e5;
        text-decoration: none;
    }

    .toc-toggle a:hover {
        text-decoration: underline;
    }

    .toc-list {
        list-style: none;
        padding: 0;
        margin-top: 20px;
    }

    .toc-item {
        margin-left: 0; /* Reset margin for each item */
    }

    .toc-item.toc-subitem {
        margin-left: 15px; /* Adjust the indentation for subitems */
    }

    .toc-list a {
        color: #0073e5;
        text-decoration: underline;
    }

    .toc-list a:hover {
        text-decoration: underline;
    }

    .toc-content {
        opacity: 1;
        max-height: 1000px; /* Adjust as needed */
        overflow: hidden;
        transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out;
        margin-top: 0px;
    }

    .collapsed .toc-content {
        opacity: 0;
        max-height: 0;
    }

    /* Styles for toc-levels */
    .toc-item.toc-level-1 { margin-left: 15px; font-weight: bold; }
    .toc-item.toc-level-2 { margin-left: 15px; }
    .toc-item.toc-level-3 { margin-left: 30px; }
    .toc-item.toc-level-4 { margin-left: 45px; }
    .toc-item.toc-level-5 { margin-left: 60px; }
    .toc-item.toc-level-6 { margin-left: 75px; }

    .toc-toggle button {
    background: #121212;
    color: var(--color-content-heading);
    }
    ul#toc-list {
    margin-left: 0px; }
	
	h3.toc-toggle a {
    color: #afafaf;
    }

    li.toc-item.toc-level-2 a {
    color: #5f9ea0;
    }

    li.toc-item.toc-level-3 a {
    color: #778899;
    }
	
    li.toc-item.toc-level-1 a {
    color: #db7093;
    }
}