body {
    position: relative;
}

a {
	text-decoration: none;
}
a:hover {
	text-decoration: underline;
}

.hero-logo {
    max-height: 120px;
}

.section-style-1 {
    background-color: #3882d2;
    color: var(--bs-light);
}

.section-style-2 {
    background-color: #f8f9fa;
    color: var(--bs-dark);
}

.section-style-3 {
    background-color: white;
    color: var(--bs-dark);
}

.odin-menu {
    min-height: 59px;
}

.odin-footer {
    background-color: #343a40 !important;
    color: var(--bs-light);
    min-height: 292px;
}

#TableOfContents ul {
    list-style: none;
    padding: 0;
}

#TableOfContents li:not(:last-child) {
    margin-bottom: 0.25rem;
}

#TableOfContents li > ul {
    padding-left: 1.0rem;
    padding-top: 0.1rem;
    padding-right: 0.1rem;
}

#TableOfContents a {
    font-family: var(--bs-font-sans-serif);
    font-size: 0.75rem;
    font-weight: 400;
    color: inherit;    
}
    
#TableOfContents {
    color: var(--bs-primary);
}

#TableOfContents li {
    transition: color 50ms, border-left 50ms;
    transition-timing-function: linear;
}

#TableOfContents li.active {
    color: var(--bs-secondary);
    font-weight: bold;
    border-left: 2px solid;
    padding: 0px 0px 0px 3px;
}

.odin-below-navbar {
    top: 59px; /* menu bar height */
    z-index: 0;
    max-height: calc(100vh - 59px); /* menu bar height */
    overflow: auto;
}

/* The glorious scroll-to element with sticky header offset hack. */
.odin-article h1,
.odin-article h2,
.odin-article h3,
.odin-article h4,
.odin-article h5 {
    margin-top: -59px; /* menu bar height */
    padding-top: calc(59px + 1.5rem); /* menu bar height */
}

.odin-main {
    min-height: calc(100vh - 59px - 292px); /* menu bar height and footer height */
}

/* Borders for left and right sidebars. Border style and breakpoint width are
copied form Bootstrap. This has the effect of showing borders when the sidebars
are on the sides, and hiding them when they're collapsed into a column.*/
@media only screen and (min-width: 992px) {
    .odin-sidebar-border {
        border-right: 1px solid #dee2e6;
    }
    .odin-toc-border {
        border-left: 1px solid #dee2e6;
    }
}

.showcase-preview {
    display: block;
    max-width: 100%;
    max-height: 300px!important;
    margin: 1em 0;
    text-align: center;
}

@media only screen and (max-width: 991px) {
    .showcase-preview {
        max-width: 100%;
    }
}

.showcase-left, .showcase-right {
    width: 100%;
}
@media only screen and (min-width: 992px) {
    .showcase-left, .showcase-right {
        width: 48%;
    }
    .showcase-left, .showcase-right {
        margin-top: 0.3em;
        margin-bottom: 0.125em;
    }
    .showcase-left {
        float: left;
        margin-right: 1em;
    }
    .showcase-right {
        float: right;
        margin-left: 1em;
    }

    .dark-mode-appearance {
        display: none;
    }
}

/* remove navbar and table of contents when smaller than lg */
@media only screen and (max-width: 991px) {
    .odin-main > nav {
        display: none;
    }

    #TableOfContents {
        display: none
    }


    .dark-mode-appearance {
        display: inline;
    }
}

code.hljs {
    border-radius: 0.5em;
}

:root {
    --dark-border: #242f3f;
    --dark-background: #0d1117;
    --dark-blue: HSL(211, 63%, 32%);
    --dark-third: #1c1c20;
    --dark-orange: HSL(28, 86%, 42%);
    --dark-orange-border: HSL(28, 30%, 70%);
    --pale-orange: #fa4;
    --dark-code: #182028;
}

:root .dark-mode {
    --bs-light: #e0f0ff;
    --bs-primary: #7aade5;
    --bs-secondary: var(--pale-orange);
}

@media only screen and (min-width: 992px)  {
    .dark-mode .odin-sidebar-border {
        border-right-color: var(--dark-border);
    }
    .dark-mode .odin-toc-border {
        border-left-color: var(--dark-border);
    }
}

.dark-mode .nav-link:hover {
  color: var(--pale-orange) !important;
}

body.dark-mode {
    background-color: var(--dark-background);
    color: var(--bs-light);
}

.dark-mode .section-style-1 {
    background-color: var(--dark-blue)!important;
    color: var(--bs-light);
}

.dark-mode .section-style-2 {
    background-color: var(--dark-background);
    color: var(--bs-light);
}

.dark-mode .section-style-3 {
    background-color: var(--dark-third);
    color: var(--bs-light);
}

.dark-mode .bg-primary {
    background-color: var(--dark-blue)!important;
}

.dark-mode .bg-secondary {
    background-color: var(--dark-orange) !important;
}
.dark-mode .btn-secondary {
    background-color: var(--dark-orange) !important;
    border-color: var(--dark-orange-border) !important;
}

.dark-mode .form-select {
    background-color: var(--dark-code) !important;
    color: var(--bs-light) !important;
    border-color: var(--dark-border) !important;
}

.dark-mode .odin-footer {
    background-color: var(--dark-border)!important;
}

.dark-mode .table {
    color: var(--bs-light) !important;
    border-color: var(--bs-light) !important;
    background-color: var(--dark-background) !important;
}

.dark-mode .table td {
    color: var(--bs-light) !important;
}

.dark-mode .nav-pills .nav-link.active,
.dark-mode .nav-pills .show>.nav-link {
    background-color: var(--dark-blue);
}


.dark-mode code:not(pre *) {
    color: var(--pale-orange);
}

.dark-mode code.hljs {
    background-color: var(--dark-code) !important;
}

.dark-mode  #TableOfContents li.active {
    color: var(--bs-secondary);
}

.btn-dark-mode  {
    cursor: pointer;
}
.btn-dark-mode svg {
    position: relative;
    top: -3px;
    margin-left: 0.5em;
    margin-right: 0.5em;
    padding: 0;
    margin-top: 0;
}

@media only screen and (min-width: 992px) {
    .btn-dark-mode {
        left: -8px;
    }
}
@media only screen and (max-width: 991px) {
    .btn-dark-mode svg {
        left: 0px;
    }
}


.btn-dark-mode svg {
    fill: var(--bs-light);
    width:  1em;
    padding: 0;
    border: 0;
}

#dark-mode-icon {
    display: inline-block;
}
.dark-mode #dark-mode-icon {
    display: none;
}

#light-mode-icon {
    display: none;
}
.dark-mode #light-mode-icon {
    display: inline-block;
}


.dark-mode .img-dark-mode-invert {
    filter: invert(100%);
}