/* Theme colors */
html[sitethemevar='light'] {
    --bgcolor: #e0e0ff;
    /* hsluv (275 degree) */
    /* SL: (90, 70) */
    --primary: #ccbbf9;
    /* SL: (100, 10) */
    --primary-text: #000000;

    /* hsluv (240 degree) */
    /* SL: (90, 70) */
    --secondary: #89caf5;
    /* SL: (100, 10) */
    --secondary-text: #001e2f;
    /* SL: (95, 80) */
    /* hsluv (275 degree) */
    --analog-p: #cdbefc;
    /* hsluv (240 degree) */
    --analog-s: #52a8f3;
    /* SL: (100, 75) */
    /* hsluv (275 degree) */
    --triadic-p: #c2acff;
    /* hsluv (240 degree) */
    --triadic-s: #3ba0ee;
}

html[sitethemevar='dark'] {
    --bgcolor: #000d0a;
    /* hsluv (150 degree) */
    /* SL: (100, 40) */
    --primary: #006c49;
    /* SL: (90, 70) */
    --primary-text: #b0fae9;
    /* hsluv (210 degree) */
    /* SL: (100, 40) */
    --secondary: #006875;
    /* SL: (90, 90) */
    --secondary-text: #fab79e;
    /* SL: (90, 30) */
    /* hsluv (150 degree) */
    --analog-p: #115138;
    /* hsluv (210 degree) */
    --analog-s: #0a2e33;
    /* SL: (95, 55) */
    /* hsluv (150 degree) */
    --triadic-p: #1b9669;
    /* hsluv (210 degree) */
    --triadic-s: #2a256b;
}

/* --- reset --------------------------------------------------- */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* --- side panels – stay visible while center scrolls -------- */
main {
    flex-direction: row;
    display: flex;
}

#main-left,
#main-right {
    flex: 1;
    position: sticky;
    top: 0;
    max-height: max-content;
    order: 1;
}

#main-center {
    flex: 2;
    order: 1;
}

/* --- responsive stacking ------------------------------------ */
@media (max-width: 900px) {
    main {
        flex-direction: column;
    }

    #main-left,
    #main-right {
        position: static;
        width: 100%;
    }
    #main-center{
        order: 2;
    }
}

/* --- theme color & customizations --------------------------- */

a {
    color: var(--primary-text);
    background-color: var(--triadic-s);
}

body {
    background-color: var(--bgcolor);
    color: var(--primary-text);
}

header {
    background-image: linear-gradient(0deg, var(--secondary), var(--triadic-p));
    padding: 1%;
    text-align: center;
}

header>h1>a {
    text-decoration: none;
    color: var(--secondary-text);
    background: none;
}


#main-left {
    color: var(--secondary-text);
    background-color: var(--secondary);
    flex-direction: column;
    justify-content: center;
    display: flex;
    padding: 2%;
}

#main-left>a {
    width: 100%;
    flex-direction: row;
    background-color: var(--analog-s);
    text-decoration: none;
    text-align: center;
    margin: 1%;
    padding: 2%;
}


#main-center,
#main-right {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    text-align: center;
    padding: 2%;
}

#contact-table,
#index-table {
    width: 100%;
    border-radius: 2px;
    border: solid;
    border-color: var(--primary);
    border-collapse: separate;
    text-align: center;
    border-width: 2px;
    border-spacing: 2px;

    tr,
    th,
    td {
        border-radius: 2px;
        border: solid;
        border-color: var(--primary);
        a {
            text-decoration: none;
        }
    }
}

.video-listing, 
.bibleindex-link-wrapper,
#biblepage-link-wrapper,
.obs-link-wrapper {
    background-color: var(--analog-p);
    margin: 10px;
    padding: 5px;
    white-space: wrap;
}

.bibleindex-link-container,
#biblepage-link-container,
#bibleindex-ref-box,
.obs-link-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    justify-self: center;
    width: 100%;
}

#bibleindex-ref-box > a {
    padding: 5px;
    margin: 5px;
}

.video-listing a,
.bibleindex-chaplink,
.biblepage-chaplink,
.obs-lessonlink {
    height: 30px;
    width: 30px;
    margin: 1%;
    background-color: var(--triadic-p);
    text-align: center;
    text-decoration: none;
    align-content: center;
}

.obs-lessonlink{
    height: auto;
    width: auto;
}

.active-link {
    background-color: var(--analog-s);
}

.bibleindex-chaplink:hover,
.biblepage-chaplink:hover {
    background-color: var(--secondary);
}

#biblepage-content {
    text-align: left;
}

footer {
    text-align: center;
}