:root {
    --tw-prose-links: var(--links);
    --tw-prose-body: var(--body);
    --tw-prose-headings: var(--headings);
    --tw-prose-lead: var(--lead);
    --tw-prose-links: var(--links);
    --tw-prose-bold: var(--bold);
    --tw-prose-counters: var(--counters);
    --tw-prose-bullets: var(--bullets);
    --tw-prose-hr: var(--hr);
    --tw-prose-quotes: var(--quotes);
    --tw-prose-quote-borders: var(--quote-borders);
    --tw-prose-captions: var(--captions);
    --tw-prose-code: var(--code);
    --tw-prose-pre-code: var(--pre-code);
    --tw-prose-pre-bg: var(--pre-bg);
    --tw-prose-th-borders: var(--th-borders);
    --tw-prose-td-borders: var(--td-borders);
    --tw-prose-invert-body: var(--invert-body);
    --tw-prose-invert-headings: var(--invert-headings);
    --tw-prose-invert-lead: var(--invert-lead);
    --tw-prose-invert-links: var(--invert-links);
    --tw-prose-invert-bold: var(--invert-bold);
    --tw-prose-invert-counters: var(--invert-counters);
    --tw-prose-invert-bullets: var(--invert-bullets);
    --tw-prose-invert-hr: var(--invert-hr);
    --tw-prose-invert-quotes: var(--invert-quotes);
    --tw-prose-invert-quote-borders: var(--invert-quote-borders);
    --tw-prose-invert-captions: var(--invert-captions);
    --tw-prose-invert-code: var(--invert-code);
    --tw-prose-invert-pre-code: var(--invert-pre-code);
    --tw-prose-invert-pre-bg: var(--invert-pre-bg);
    --tw-prose-invert-th-borders: var(--invert-th-borders);
    --tw-prose-invert-td-borders: var(--invert-td-borders);
}

#body-container {
  display: grid;
  height: 100%;
  grid-template-columns: auto 1fr;
}

body {
    height: 100vh;
    margin: 0;
    font-family: 'Merriweather', serif;
    background-color: var(--primary-background-color);
    color: var(--primary-color);
}

a {
    color: var(--links) !important;
}

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
    color: rgb(var(--primary-color)) !important;
}

#sidenav ul li {
    list-style-type: decimal;
    font-size: .8rem;
}

#sidenav {
  height: 100%;
    padding-right: 2rem;
    background-color: var(--secondary-background-color);
}
#sidenav ol {
    padding: 2rem;
}

.navbar * {
    list-style-type: decimal;
}

.navbar a {
    text-decoration: none;
}

.navbar a.anchor {
    display: none;
}

.navbtn:hover {

}
.navbtn {
  /*position: fixed;*/
  height: 100%;
}

a.anchor {
    text-decoration: none;
    color: inherit;
    display: inline-block;
}

a.anchor .hash {
    text-decoration: none;
    opacity: 0;
    margin-left: 5px;
}

a.anchor:hover .hash {
    opacity: 1;
}

.navbar a:hover {
    cursor: pointer;
    text-decoration: underline;
}

.icon-button i.fa {
    font-size: 1.2em;
    color: #8e8e8e;
}

#sidebar-close-sidebar {
    border: none;
    background: none;
    cursor: pointer;
}

#sidebar-close-sidebar i.fa {
    font-size: 1.2em;
    color: #333;
}

top-bar {
    justify-content: space-between;
    align-items: start;
    line-height: 1rem;
}

.menu-title {
    font-size: 1.5rem;
}

#content-container {
    display: grid;
    /*height: 100%;*/
    grid-template-columns: 1fr 14fr 1fr;
    justify-content: space-around;
}

main-container {
    display: flex;
    justify-content: center;
    padding-top: 2rem;
    padding-bottom: 5rem;
}

main-container main {
  width: 80%;
}

@media (max-width: 960px) {
    #sidenav {
        width: 100%;
        display: none;
        position: fixed;
        z-index: 1000;
        top: 0;
        left: 0;
        background-color: var(--secondary-background-color);
    }

    #hamburger-menu {
        display: block;
    }

    #content-container {
        width: 100vw;
        padding-left: 0vw;
        grid-template-columns: 1fr 10fr 1fr;
    }

    #sidebar-close-sidebar {
        display: block;
        padding-top: 1rem;
        padding-bottom: 1rem;
    }
}

@media (min-width: 960px) {
    #sidenav {
        display: block;
    }

    #sidenav button {
        background: none;
        border: none;
    }

    #sidebar-close-sidebar {
        display: none;
    }
}

.mermaid {
    background: whitesmoke !important;
}

table {
    color: rgba(var(--primary-color), .6);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    text-align: center;
}

thead {
    background-color: rgba(var(--ctp-overlay1), .7);
    border-bottom-color: rgba(var(--primary-color), .4);
    color: rgba(var(--secondary-color), .9);
}

tbody {
    background-color: rgba(var(--ctp-overlay3), .8);
}

tr {
    border-bottom-color: rgba(var(--primary-color), .4);
    border-left-color: rgb(var(--primary-color));
}

th {
    color: rgba(var(--ctp-overlay1), var(--tw-text-opacity));
}

tr:nth-child(even) {
    background: rgba(var(--ctp-overlay2), .1)
}

tr:nth-child(odd) {
    background: rgba(var(--ctp-overlay3), .1)
}