:root {
    --marker-opacity: 0.35;
    --marker-text-opacity: 1;
}



.searched, td a {
    border-radius: 5px;
}

.versemode .verse-title, .transliteration, .translation {
    color: rgb(225, 225, 225);
}

.transliteration, .translation {
    font-family: 'Amiri', sans-serif;
    font-size: 15px;
}

.chapterlist-container, .settings-container, header {
    background: rgb(215, 215, 215);
}

.title-container {
    margin-top: 50px;
}

.verse-title {
    font-weight: bolder;
}

#search {
    position: relative;
    left: 10px;
    width: 70%;
    background: transparent;
    border: none;
    outline: none;
    border-bottom: 1px solid #0099ff;
}

header {
    position: fixed;
    top: 0;
    display: flex;
    height: 50px;
    width: 100%;
    justify-content: space-between;
    padding-top: 10px;
    font-size: 20px;
}

.chapterlist-container li {
    list-style: none;
}

header a {
    color: black;
    font-weight: bold;
    text-decoration: none;
}

header a:hover {
    color: #0099ff;
    transition: all 0.25s ease-in;
}

.bible-container {
    display: flex;
}

.grouping, .book-link {
    font-size: 35px;
}

.chapterlist-container {
    position: fixed;
    top: 50px;
    height: 97vh;
    width: 23vw;
    z-index: 2;
}

.booklist {
    height: 97vh;
    width: 100%;
    padding-bottom: 75px;
}

.chapterlist {
    width: 35%;
    overflow-y: scroll;
}

.memorizationcolors {
    width: 65%;
    overflow-y: scroll;
}

.chapterlist::-webkit-scrollbar {
    display: none;
}

.chapterlist a {
    font-weight: bold;
    font-size: 15px;
    text-decoration: none;
    color: rgb(175, 175, 175);
    transition: all 0.25s ease-in;
}

.booklist {
    display: flex;
}

.left-side {
    width: 23vw;
    height: 100%;
}

.verses-container {
    background: rgb(200, 200, 200);
    text-align: right;
    padding-right: 25px;
    gap: 75px;
    padding-left: 25px;
}

.versemode {
    display: flex;
    flex-direction: column;
}

.versemode .verse-text {
    display: flex;
    flex-direction: column;
}

.versemode .hidden-text {
    display: inline-block;
}

.wide {
    width: 77vw;
}

.slim {
    width: calc(66vw - 75px);
}

.verse-title {
    font-size: 25px;
}

.verse-text {
    font-size: 25px;
    font-weight: normal;
    transition: all 0.25s ease-in;
}

.verse-text .cairo, .verse-text .gandhara {
    font-size: 25px;
}

.verse-flex {
    display: flex;
    flex-direction: row-reverse;
    gap: 25px;
    text-align: center;
}

.verse-number {
    font-weight: bold;
}

.hidden, .hidden-mode, .hidden-text {
    display: none;
}

td a {
    padding: 2px;
    color: black;
    text-decoration: none;
    font-size: 15px;
    padding-left: 15px;
    padding-right: 15px;
}

.purpose {
    font-size: 20px;
}

.settings-container {
    width: 15vw;
    padding-left: 20px;
}

.settings-grouping {
    font-size: 27px;
}
.settings-subgrouping {
    font-size: 22px;
}

/* Base color pallete */
.law {
    background: rgba(255, 155, 0, var(--marker-opacity));
}

.orange {
    color: rgba(255, 155, 0, var(--marker-text-opacity));
}

.history {
    background: rgba(0, 255, 255, var(--marker-opacity));
}

.lightblue {
    color: rgba(0, 255, 255, var(--marker-text-opacity));
}

.poetry {
    background: rgba(255, 0, 255, var(--marker-opacity));
}

.magenta {
    color: rgba(255, 0, 255, var(--marker-text-opacity));
}

.majorprophets {
    background: rgba(11, 218, 81, var(--marker-opacity));
}

.malachite {
    color: rgba(11, 218, 81, var(--marker-text-opacity));
}

.prophets {
    background: rgba(0, 100, 0, var(--marker-opacity));
}

.green {
    color: rgba(0, 100, 0, var(--marker-text-opacity));
}

.gospels {
    background: rgba(255, 215, 0, var(--marker-opacity));
}

.gold {
    color: rgba(255, 215, 0, var(--marker-text-opacity));
}

.letters {
    background: rgba(255, 0, 0, var(--marker-opacity));
}

.red {
    color: rgba(255, 0, 0, var(--marker-text-opacity));
}

.otherletters {
    background: rgba(100, 0, 0, var(--marker-opacity));
}

.darkred {
    color: rgba(100, 0, 0, var(--marker-text-opacity));
}

.prophecy {
    background: rgba(100, 0, 200, var(--marker-opacity));
}

.purple {
    color: rgba(100, 0, 200, var(--marker-text-opacity));
}

/* RGB mode color palette */
.rgbmode .law {
    background: rgba(255, 0, 0, var(--marker-opacity));
}

.rgbmode .orange {
    color: rgba(255, 0, 0, var(--marker-text-opacity));
}

.rgbmode .history {
    background: rgba(255, 155, 0, var(--marker-opacity));
}

.rgbmode .lightblue {
    color: rgba(255, 155, 0, var(--marker-text-opacity));
}

.rgbmode .poetry {
    background: rgba(255, 255, 0, var(--marker-opacity));
}

.rgbmode .magenta {
    color: rgba(255, 255, 0, var(--marker-text-opacity));
}

.rgbmode .majorprophets {
    background: rgba(155, 255, 0, var(--marker-opacity));
}

.rgbmode .malachite {
    color: rgba(155, 255, 0, var(--marker-text-opacity));
}

.rgbmode .prophets {
    background: rgba(0, 255, 0, var(--marker-opacity));
}

.rgbmode .green {
    color: rgba(0, 255, 0, var(--marker-text-opacity));
}

.rgbmode .gospels {
    background: rgba(0, 255, 155, var(--marker-opacity));
}

.rgbmode .gold {
    color: rgba(0, 255, 155, var(--marker-text-opacity));
}

.rgbmode .letters {
    background: rgba(0, 155, 255, var(--marker-opacity));
}

.rgbmode .red {
    color: rgba(0, 155, 255, var(--marker-text-opacity));
}

.rgbmode .otherletters {
    background: rgba(0, 0, 255, var(--marker-opacity));
}

.rgbmode .darkred {
    color: rgba(0, 0, 255, var(--marker-text-opacity));
}

.rgbmode .prophecy {
    background: rgba(255, 0, 255, var(--marker-opacity));
}

.rgbmode .purple {
    color: rgba(255, 0, 255, var(--marker-text-opacity));
}

/* Tiktok mode color pallete */
.tiktokmode .law {
    background: rgba(255, 0, 255, var(--marker-opacity));
}

.tiktokmode .orange {
    color: rgba(255, 0, 255, var(--marker-text-opacity));
}

.tiktokmode .history {
    background: rgba(255, 215, 0, var(--marker-opacity));
}

.tiktokmode .lightblue {
    color: rgba(255, 215, 0, var(--marker-text-opacity));
}

.tiktokmode .poetry {
    background: rgba(0, 255, 255, var(--marker-opacity));
}

.tiktokmode .magenta {
    color: rgba(0, 255, 255, var(--marker-text-opacity));
}

.tiktokmode .majorprophets {
    background: rgba(50, 205, 50, var(--marker-opacity));
}

.tiktokmode .malachite {
    color: rgba(50, 205, 50, var(--marker-text-opacity));
}

.tiktokmode .prophets {
    background: rgba(50, 205, 50, var(--marker-opacity));
}

.tiktokmode .green {
    color: rgba(50, 205, 50, var(--marker-text-opacity));
}

.tiktokmode .gospels {
    background: rgba(128, 0, 128, var(--marker-opacity));
}

.tiktokmode .gold {
    color: rgba(128, 0, 128, var(--marker-text-opacity));
}

.tiktokmode .letters {
    background: rgba(255, 215, 0, var(--marker-opacity));
}

.tiktokmode .red {
    color: rgba(255, 215, 0, var(--marker-text-opacity));
}

.tiktokmode .otherletters {
    background: rgba(0, 0, 255, var(--marker-opacity));
}

.tiktokmode .darkred {
    color: rgba(0, 0, 255, var(--marker-text-opacity));
}

.tiktokmode .prophecy {
    background: rgba(255, 0, 255, var(--marker-opacity));
}

.tiktokmode .purple {
    color: rgba(255, 0, 255, var(--marker-text-opacity));
}

/* Scrollbar stuff */

::-webkit-scrollbar {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: #0099ff;
    border-radius: 25px;
    height: 75px;
}

.options-container {
    background: rgb(175, 175, 175);
    border-radius: 25px;
    height: 25px;
    display: flex;
    justify-content: space-between;
}

.options-container button {
    background: transparent;
    padding-left: 7px;
    padding-right: 7px;
    padding-top: 2px;
    border: none;
    transition: all 0.25s ease-in;
}

.options-container button.selected, .options-container button.selected-style, .options-container button.selected-pallete, .options-container button.selected-highlighter, button.selected-mode, button.searchbutton {
    background: rgb(200, 200, 200);
    border-radius: 25px;
}

.unselected {
    display: none;
}

.searched {
    background: rgba(0, 153, 255, var(--marker-opacity));
}

.book-link {
    background: #0099ff;
    border-radius: 25px;
    text-decoration: none;
    text-align: center;
    color: white;
    padding-right: 5px;
    padding-left: 5px;
    transition: all 0.25s ease-in;
}

/* Highlighting colors */
.highlighted {
    background: rgba(255, 155, 0, var(--marker-opacity));
}

.highlighted-red {
    background: rgba(255, 0, 0, var(--marker-opacity));
}

.highlighted-yellow {
    background: rgba(255, 255, 0, var(--marker-opacity));
}

.highlighted-yellowgreen {
    background: rgba(155, 255, 0, var(--marker-opacity));
}

.highlighted-green {
    background: rgba(0, 255, 0, var(--marker-opacity));
}