/* ----- Root properties ----- */

/*:root {
    --font-family: Rubik, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    --background-darkmode: #1B1B1E;
    --background-selected-darkmode: #343135;
    --background-lightmode: white;
    --background-selected-lightmode: rgb(240, 240, 240);
    --text-lighter-darkmode: lightgrey;
    --text-darkmode: #E6E8E6;
    --text-lightmode: #1B1B1E;
    --strong: #0096E0;
    --strong-hover: #0075af;
}*/

/* ----- Body, fonts, and base ----- */
@font-face {
    font-family: Rubik;
    src: url("../media/fonts/Rubik-VariableFont_wght.ttf");
}

* {
    font-family: Rubik, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: 500;
    transition: background-color 0.25s;
}

figure, .figure {
    display: block;
    text-align: center;
}

figcaption, .figure-caption {
    display: block;
    margin: 0 auto;
    font-style: italic;
    font-size: 11px;
}

p {
    font-size: 20px;
    line-height: 1.6;
}

strong {
    color: #0096E0;
    font-style: italic;
}

time, abbr, sup, cite, li, i {
    color: inherit;
    font-weight: inherit;
}

h1, h2, h3, h4, h5, h6 {
    text-align: center;
    margin: 0;
    text-shadow: 1px 1px 1px #0096E0;
}

p, section:nth-of-type(1) { /* All paragrahs, or first section */
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 10px;
    padding-bottom: 10px;
}

section {
    margin-top: 40px;
    margin-bottom: 40px;
}

caption {
    font-size: 0;
    visibility: hidden;
}

table {
    text-align: center;
}

th { /* Always keep headers on strong, even when hovered over */
    color: #0096E0!important;
}

/* ----- Content ----- */
.round-img {
    border-radius: 50%;
    height: 100px;
    width: 100px;
}

/* ----- Content header (image) ----- */
.content-header-image {
    padding: 20px;
    padding-bottom: 0;
}

.content-header-image-wrap {
    display: flex;
    position: relative;
    justify-content: center;
    align-items: center;
}

.content-header-image-wrap:before {
    content: '';
    position: absolute;
    top: 50%;
    border-top: 1px solid #0096E0;
    background: #0096E0;
    width: 100%;
    transform: translateY(-50%);
    z-index: -10;
}

/* ----- References ----- */
.references li {
    font-size: 16px;
    padding: 3px;
}

/* ----- Navbar -----*/
.navbar-header {
    display: flex;
    justify-content: center;
}

.navbar div:not(div.wrapped) {
    margin-left: 1.5rem;
}

/* ----- Header (navbar) ----- */
.header-content {
    position: sticky;
    top: 0;
    z-index: 3;
    background-color: #343135;
    border-bottom-color: #0096E0;
    border-bottom-style: solid;
}

.header-content h1 {
    font-size: 40px;
    font-weight: bold;
    margin: 0;
}

.header-content a {
    display: inline;
    text-decoration: none;
    font-size: 30px;
    font-weight: 700;
}

.header-content nav a.nav-link {
    display: block;
    font-size: large;
    text-decoration: none;
    padding: 16px 8px;
    transition: background-color 0.25s;
}

/* ----- Table of contents ----- */
@media (min-width: 768px) {
    .links {
        position: sticky;
        top: 5rem; /* Navbar is collapsed*/
        height: calc(100vh - 9rem); /* 100% viewport height - 9 units*/
        padding-left: 0.25rem;
        margin-left: -0.25rem;
    }
}

@media (min-width: 992px) {
    .links {
        top: 8rem; /* When the navbar has expanded down, move the top of the links down*/
    }
}

/* ----- Jump to top button ----- */
#jump-to-top-button {
    display: none;
    position: fixed;
    top: 87vh;
    left: 80vw;
    border: 2px solid #1B1B1E;
    background-color: #0096E0;
    padding: 15px;
    border-radius: 50%;
    z-index: 1; /* Keep above all content */
}

#jump-to-top-button img {
    width: 40px;
}

/* ----- Fix anchors for table of contents ----- */
section > h1:before, section > h2:before, section > h3:before, section > h4:before {
    content: '';
    display: block;
    position: relative;
    width: 0;
    height: 5em;
    margin-top: -5em
}

body.darkmode, body.darkmode .content-header-image, body.darkmode .list-group-item:not(.list-group-item.active),
body.darkmode #fader {
    background-color: #1B1B1E;
}
body.lightmode, body.lightmode .content-header-image, body.lightmode .list-group-item, body.lightmode #fader {
    background-color: white;
}

body.darkmode .header-content, body.darkmode .tab-content {
    background-color: #343135;
}
body.lightmode .header-content, body.lightmode .tab-content {
    background-color: rgb(240, 240, 240);
}

body.darkmode a.list-group-item, body.darkmode p,
body.darkmode h1, body.darkmode h2, body.darkmode h2, body.darkmode h3,
body.darkmode h4, body.darkmode h5, body.darkmode h6, body.darkmode figcaption,
body.darkmode ol.references, body.darkmode label:not(.form-floating label),
body.darkmode .nav-link {
    color: #E6E8E6;
}

a.nav-link .active, body.lightmode a.list-group-item, body.lightmode p,
body.lightmode h1, body.lightmode h2, body.lightmode h2, body.lightmode h3,
body.lightmode h4, body.lightmode h5, body.lightmode h6, body.lightmode figcaption,
body.lightmode ol.references, body.lightmode label:not(.form-floating label),
body.lightmode .nav-link:not(nav-link.active),
body.lightmode .nav-link:not(nav-link.active) {
    color: #1B1B1E;
}

.nav-link:hover, .list-group-item.active, .nav-link.active {
    color: #E6E8E6!important;
    background-color: #0096E0!important;
}

/* ----- Fader ----- */
#fader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 999999;
    pointer-events: none;
    animation-duration: 300ms;
    animation-timing-function: ease-in-out;
}
@keyframes fade-out {
    from { opacity: 1 }
      to { opacity: 0 }
}

@keyframes fade-in {
    from { opacity: 0 }
      to { opacity: 1 }
}

#fader.fade-out {
    opacity: 0;
    animation-name: fade-out;
}

#fader.fade-in {
    opacity: 1;
    animation-name: fade-in;
}