:root {
    --appTitle: 'The Ark Bible';
    --mediumGray: #c3c1c1;
    --headlineBackground: #8e8c8c;
    --blackText: black;
    --whiteText: white;
    --bannerBackground: #022a69;
    --bodyBackground: #f3f3f3;
    --headerBackground: #c02b31;
    --headlineColor: white;
    --mainBackground: white;
    --verseNumber: #0505da;
    --shadowColor: #07070733;

    --lightGreenEmphasis: #07f007;
    --lightGrayEmphasis: #757575;
    --greenEmphasis: #045004;
    --lightMaroonEmphasis: #ba0e0e;
    --lighterMaroonEmphasis: #f10e0e;
    --paleMaroonEmphasis: #f85e5e;
    --maroonEmphasis: #530306;
    --navyEmphasis: navy;

    --gradientLight: #0064d9;
    --gradientDark: #11428c;

}

html { font-size: 110%; }
html,
body { margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden; overflow-y: scroll; }
body { background-color: var(--bodyBackground); color: var(--blackText); z-index: 10; }

p { font-size: 1.06rem; }

.cs-pagesBody { background-color: var(--mainBackground); }
.cs-page { text-align: justify; margin: auto; margin-top: 3em; width: 80%; }

.cs-iconLink { float: left; width: 3%; margin-right: 1em; height: auto; border-radius: 8px; padding-bottom: .3em; }
.cs-iconLink:hover { background-color: #eeeea5; }

.cs-showBox,
.cs-movieBox,
.cs-historyBox { height: max-content; width: 100%; margin: auto; }
.cs-contentsTitle { color: var(--greenEmphasis); width: 100%; }

.cs-showImg,
.cs-movieImg { float: left; margin-right: .5em; height: auto; max-width: 10%;  border-radius: 6px;  border: 4px solid var(--lightGrayEmphasis); }
.cs-showTagImg,
.cs-movieTagImg { text-decoration: none; }

.cs-showTitle,
.cs-movieTitle,
.cs-historyTitle,
.cs-movieCollection { color: var(--lightMaroonEmphasis); font-size: 1.1em; text-decoration: none; }

.cs-qrcode { display: block; position: relative; top: 50%; height: 192px; width: 192px; margin: auto; }
.cs-h2 { width: 90%; height: 10%; margin: auto; text-align: center; }

.cs-qrText { width: 50%; margin-left: auto; margin-right: auto; bottom: 0; font-size: .8rem; text-align: center; }

.cs-GodLovesYou { width: 80%; margin-left: auto; margin-right: auto; bottom: 0; font-size: .8rem; color: var(--whiteText); text-align: center; }
.cs-GodLovesYouPages { color: var(--blackText); }
.cs-copySign { font-size: .75em; }

.cs-showTitleWiki,
.cs-movieCollection,
.cs-showTitle:visited,
.cs-showTitleWiki:visited,
.cs-movieTitleWiki:visited,
.cs-movieTitle:visited,
.cs-movieTitleWiki:visited,
.cs-historyTitleWiki,
.cs-historyTitle:visited,
.cs-historyTitleWiki:visited { color: var(--lightMaroonEmphasis); }

.cs-showTitle:hover,
.cs-movieCollection:hover,
.cs-showTitleWiki:hover,
.cs-movieTitle:hover,
.cs-movieTitleWiki:hover,
.cs-historyTitle:hover,
.cs-historyTitleWiki:hover { color: var(--navyEmphasis); }
.cs-movieCollection:hover { cursor: pointer; }

.cs-movieCollections { display: none; width: 80%; margin: auto; }

.cs-showCopyrights,
.cs-movieCopyrights { width: 90%; margin: auto; text-align: center; font-size: .5rem; }

.cs-aMovieBox { display: none; }

.cs-underline { text-decoration: underline; font-size: 1em; }

.cs-title { display: inline-block; font-size: 1.2; font-weight: 550; padding-bottom: .5em; }

.cs-alphLine { justify-content: space-between; width: 80%; margin: auto; }
.cs-alph { height: auto; width: 100%; background-color: aquamarine; border-radius: 6px; padding: 1em; }
.cs-alphHeader { max-width: max-content; margin: auto; }

.cs-arrowUp { display: none; position: fixed; bottom: 0; left: 50%; transform: translateY(-50%); height: auto;  width: auto; border-radius: 6px; cursor: pointer; font-size: 1.3em; padding: 0; text-decoration: none; background-color: #c8e2f7; }

.cs-emphasis { color: var(--lighterMaroonEmphasis); }

table { border-collapse: collapse; width: 100%; }
th, td { border: 1px solid black; padding: .2em; text-align: left; }
th { background-color: var(--bannerBackground); color: var(--whiteText)}
tr:nth-child(even) { background-color: #f2f2f2; }

@media (max-width: 344px) {
    .cs-page { margin-top: 2em; width: 90%; }
}
@media (min-width: 345px) and (max-width: 360px) {
    .cs-page { margin-top: 2em; width: 90%; }
}
@media (min-width: 361px) and (max-width: 376px) {
    .cs-page { margin-top: 2em; width: 90%; }
}
@media (min-width: 377px) and (max-width: 390px) {
    .cs-page { margin-top: 2em; width: 90%; }
}
@media (min-width: 391px) and (max-width: 414px) {
    .cs-page { margin-top: 2em; width: 90%; }
}
@media (min-width: 415px) and (max-width: 430px) {
    .cs-page { margin-top: 2em; width: 90%; }
}
@media (max-width: 432px) {
    /*Images for mobile movies and shows pages*/
    .cs-showImg,
    .cs-movieImg { max-width: 28%; }
    .cs-iconLink { width: 15%; }
}
@media (min-width: 431px) and (max-width: 540px) {
    .cs-page { margin-top: 2em; width: 90%; }
}
@media (max-width: 540px) { .cs-alph { width: 93%; } }
@media (max-width: 768px) { .cs-endLine { width: 85%; } .cs-TWF { position: relative; width: 90%; top: 1em; } .cs-tbl { font-size: .7em; width: 99%; } }
@media (min-width: 541px) and (max-width: 768px) {
    .cs-page { margin-top: 2em; width: 90%; }
}
@media (min-width: 769px) and (max-width: 820px) {
    .cs-page { margin-top: 2em; width: 90%; }
}
@media (min-width: 821px) and (max-width: 854px) {
    .cs-page { margin-top: 2em; width: 90%; }
}
@media (min-width: 855px) and (max-width: 912px) {
    .cs-page { margin-top: 2em; width: 90%; }
}
@media (min-width: 913px) and (max-width: 1024px) and (max-height: 600px) {
    .cs-page { margin-top: 2em; width: 90%; }
}
@media (min-width: 913px) and (max-width: 1024px) and (min-height: 601px) {
    .cs-page { margin-top: 2em; width: 90%; }
}
@media (min-width: 1025px) and (max-width: 1280px) and (max-height: 720px) {
    .cs-page { margin-top: 2em; width: 90%; }
}
@media (min-width: 1025px) and (max-width: 1280px) and (min-height: 721px) {
    .cs-page { margin-top: 2em; width: 90%; }
}
@media (min-width: 1281px) and (max-width: 1360px) {
    .cs-page { margin-top: 2em; width: 90%; }
}
@media (min-width: 1361px) and (max-width: 1440px) {
    .cs-page { margin-top: 2em; width: 90%; }
}
@media (min-width: 1441px) and (max-width: 1536px) {
    html { font-size: 115%; }
    .cs-page { margin-top: 2em; width: 90%; }
}
@media (min-width: 1537px) and (max-width: 1920px) and (max-height: 1080px) {
    .cs-page { margin-top: 2em; width: 90%; }
}
@media (min-width: 1537px) and (max-width: 1920px) and (min-height: 1081px) {
    .cs-page { margin-top: 2em; width: 90%; }
}
@media (min-width: 1921px) {
    html { font-size: 118%; }
    .cs-page { margin-top: 2em; width: 90%; }
}

/* Hide Scrollbars */
.cs-noScroll { overflow: hidden; overflow-y: scroll; -ms-overflow-style: none;  /* IE and Edge */ scrollbar-width: none;  /* Firefox */ }
/* Hide scrollbar for Chrome, Safari and Opera */
.cs-noScroll::-webkit-scrollbar { display: none; }
/* ********************************************/