/* Dark mode */


.theme-swatch {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
}



html.dark-mode .shadow-color::part(base){
    background:#ff0;
    color:#000!important;
}

img.emoji {
  height: 1em;
  width: 1em;
  margin: 0 .05em 0 .1em;
  vertical-align: -0.1em;
}

html.biblical-mode body::before{
    filter:sepia(100%)!important;
}

html.no-transition * {
  transition: none !important;
  animation: none !important;
}

html.dark-mode body{
    color:#fff!important;
}

html.dark-mode wa-button[variant="brand"] {
    --wa-color-fill-loud: #000!important;
    --wa-color-border-loud: #000!important;
    --wa-color-on-loud: #fff!important;
}
html.dark-mode wa-button[variant="neutral"] {
    --wa-color-on-loud: #000!important;
}

html.dark-mode wa-callout[variant="brand"] {
    color:#fff!important;
}

html.dark-mode .scroll-dialog::part(dialog){
-webkit-filter:saturate(0%);
}

html.dark-mode .section-illustration{
-webkit-filter:saturate(0%);
}

html.dark-mode .settings-dialog::part(dialog){
background-color: var(--wa-color-gray-10);
color:#fff!important;
}

.settings-dialog::part(backdrop){
    background-color:rgba(0,0,0,0)!important;
}

.settings-dialog::part(body){
padding:0px;
background-color: var(--wa-color-gray-90);
}

.context-dialog::part(header){
background-color: var(--wa-color-gray-90);
padding-bottom:.8rem;
}

html.dark-mode .context-dialog::part(header){
background-color: var(--wa-color-gray-10);
}


.transcript-container::part(header){
background-color: var(--wa-color-gray-90);
padding-bottom:.8rem;
}


html.dark-mode .transcript-container::part(header){
background-color: var(--wa-color-gray-20);
}

.transcript-container::part(footer){
background-color: var(--wa-color-gray-90);
padding-bottom:.8rem;
justify-content:start;
}


html.dark-mode .transcript-container::part(footer){
background-color: var(--wa-color-gray-20);
}

html.dark-mode .context-dialog::part(body){
background-color: #000;
color:#fff!important;
}

html.dark-mode .settings-dialog::part(body){
padding:0px;
background-color: var(--wa-color-gray-30);
}

.settings-dialog::part(dialog){
background-color: var(--wa-color-gray-90);
}

.settings-dialog::part(title){
color: #000;
padding-bottom:0.8rem;
}

html.dark-mode .settings-dialog::part(title){
color: #fff!important;
}

.settings-dialog .tab-pane.show
{
    background:#fff;
}

.settings-dialog .tab-content
{
    background:#fff;
}

html.dark-mode .settings-dialog .tab-pane.show
{
    background:#000;
}

html.dark-mode .settings-dialog .tab-content
{
    background:#000;
}

.nav-tabs {
    --bs-nav-tabs-border-color: var(--wa-color-gray-90);
}

.nav-tabs .nav-link {
    background-color: var(--wa-color-gray-90);
    font-size:1rem;
}

.display-link{
    border-top-left-radius: 0;
    border-top-right-radius: 1rem!important;

}

.content-link{
    border-top-left-radius: 1rem!important;
    border-top-right-radius: 0!important;

}

.nav-tabs .nav-item{
    margin-inline-start:0;
    margin-inline-end:0;
}

.nav-tabs .nav-link, .nav-tabs .nav-link.active {
    border-color: var(--wa-color-gray-90);
    border-bottom:none;
}

.nav-tabs .nav-link.active {
    border-color: var(--wa-color-gray-90);
    border-bottom:none;
}

html.dark-mode .nav-tabs {
    background-color: var(--wa-color-gray-10)!important;
    border:none!important;
}

:root{
    --wa-color-overlay-modal:rgba(0,0,0,0)!important;
}

html.dark-mode .nav-tabs .nav-link {
    background-color: var(--wa-color-brand-30);
    color:#fff;
}

html.dark-mode .nav-tabs .nav-link.active {
    background-color: #000;
    color:#fff;
}

html.dark-mode .nav-tabs .nav-link, html.dark-mode .nav-tabs .nav-link.active {
    border-color: var(--wa-color-brand-30);
    border-bottom:none;
    color:#fff;
}

html.dark-mode .list-group-item{
    background:#000!important;
    color:#fff!important;
    border:1px #333 solid!important;
}

html.dark-mode .list-group-item:hover{
    background:#111!important;
}

html.dark-mode .text-black-50{
    color:#888!important;
}

html.dark-mode .card{
    background:#000!important;
    border:1px #333 solid!important;
    color:#fff!important;
}


#contentBody{
    margin-left:auto!important;
    margin-right:auto!important;
    padding:0!important;
    overflow:hidden!important;
    box-shadow:0px 0px 45px 45px var(--wa-color-brand-30);
    max-width:1200px;
}

#banners-autoplay img{
box-shadow:0px 0px 15px color-mix(in oklab, rgba(0,0,0,1), var(--wa-color-brand-40) 70%);
}

html.dark-mode .banner-1 {
    content:url('/media/assets/banner-dark.png');
}

html.dark-mode .banner-2 {
    content:url('/media/assets/banner2-dark.png');
}

.banner-1 {
    content:url('/media/assets/banner-dark.png');
    mix-blend-mode:luminosity;
}

.banner-2 {
    content:url('/media/assets/banner2-dark.png');
    mix-blend-mode:luminosity;
}


.banner-3 {
    content:url('/media/assets/banner3.png');
    mix-blend-mode:luminosity;
}

.banner-4 {
    content:url('/media/assets/banner4.png');
    mix-blend-mode:luminosity;
}

.banner-5 {
    content:url('/media/assets/banner5.png');
    mix-blend-mode:luminosity;
}

html.dark-mode #contentBody{
    box-shadow:0px 0px 45px 55px rgba(0,0,0,0.3);
}


.nav-pills {
    --bs-nav-pills-link-active-color: #fff;
    --bs-nav-pills-link-active-bg: var(--wa-color-gray-50);
}

.nav {
    --bs-nav-link-padding-x: 1rem;
    --bs-nav-link-padding-y: 0.5rem;
    --bs-nav-link-font-weight: ;
    --bs-nav-link-color: var(--wa-color-gray-50);
    --bs-nav-link-hover-color: var(--wa-color-gray-70);
    --bs-nav-link-disabled-color: var(--wa-color-gray-90);
}

html{
    font-size: 1rem;
    transition: font-size 1s ease;
}

@media (min-width: 992px) { 
    
    .nav-bar wa-button{
    width:160px!important;
}

.welcome{
        border-radius: 1rem !important;
}



}


@media (min-width: 768px) { 
    
#comicPageWrap{
    border-radius:1.5rem;
}
    
html.large-font{
    font-size:1.1rem!important;
    
}

.scroll-home{
border-image-width: 100px 55px 100px 55px!important;
}

.nav-tabs .nav-item{
    margin-inline-start:1rem;
    margin-inline-end:1rem;
}

.display-link{
    border-top-left-radius: 1rem!important;
    border-top-right-radius: 1rem!important;

}

.content-link{
    border-top-left-radius: 1rem!important;
    border-top-right-radius: 1rem!important;

}

    
}


html.large-font{
    font-size:1.1rem;
}

html.small-font{
    font-size:0.8rem;
}

html{
    --wa-color-text-normal: var(--wa-color-brand-40);
    --wa-color-text-quiet: var(--wa-color-brand-60);
    --wa-color-fill-quiet: var(---wa-color-brand-90);
}

html.dark-mode wa-select[appearance="filled"]{
--wa-color-neutral-fill-quiet:var(--wa-color-brand-20);
--wa-color-neutral-on-quiet:#fff;
}

html.dark-mode wa-input[appearance="filled"]{
--wa-color-neutral-fill-quiet:var(--wa-color-brand-10);
--wa-color-neutral-on-quiet:#fff;
}

html.dark-mode wa-tag[appearance="filled"]{
--wa-color-neutral-fill-quiet:var(--wa-color-brand-30);
--wa-color-neutral-on-quiet:var(--wa-color-brand-80);
}

html.dark-mode wa-button[appearance="filled"]{
--wa-color-neutral-fill-normal:var(--wa-color-brand-40);
--wa-color-on-normal:#fff;
}

html.dark-mode wa-button[appearance="accent"]{
--wa-color-neutral-fill-loud:#fff;
--wa-color-on-normal:#000;
}




wa-accordion[appearance="filled"]{
--wa-color-neutral-fill-quiet: color-mix(in oklab, var(--wa-color-brand-50), transparent 90%);
}

html.dark-mode{
    --wa-color-text-normal: #fff;
    --wa-color-text-quiet: var(--wa-color-brand-80);
    --wa-color-fill-quiet: var(---wa-color-brand-20);
}


body{
    font-weight: 400;
    font-style: normal;
    background-size:250px;
    background-repeat:repeat;
    background-color: var(--wa-color-brand-30);
    background-image:url('/media/assets/site_bg_new.png');
    background-attachment:fixed;
    overflow:hidden;
    background-blend-mode: overlay; 
}

html{
    --wa-font-family-body: "Comic Relief", system-ui;
    --wa-font-family-heading: "Comic Relief", system-ui;
    --wa-font-family-longform: "Comic Relief", system-ui;
}

html.dark-mode body{
    background-blend-mode: overlay; 
    background-color:var(--wa-color-brand-10);
}

h1, h2, h3, h4, h5, .display-1, .display-2, .display-3, .display-4{
    font-weight:700;
}

wa-button{
}


.text-caption{
    color:var(--wa-color-brand-70);
}

#comicPage{
    border-radius:0;
}


wa-details{
    --show-duration: .5s;
    --hide-duration: .5s;
    transition:ease-out all!important;
}

.setting-details:state(animating){
    transition:ease-out all!important;
}

.setting-item::part(label){
    width:100%!important;
}

.setting-inner::part(expand-button){
    display:none;
}

.setting-item::part(item){
        border-inline-start-color:rgba(0,0,0,0)!important;
        background-color:rgba(0,0,0,0)!important;
}

.popup {
    width:100% !important;
    max-width: 100% !important;
    
}

.navbar-nav{
max-width:1161.1px;
}

.navbar-collapse .row-nav{
    width:100%;
    max-width:100%;
}

.navbar-collapse{
    width:100%;
    max-width:100%;
}

.page-contents{
    max-width:850px;
    margin-left:auto;
    margin-right:auto;
}

.list-group-item{
    color: var(--wa-color-brand-40)!important;
}

.scroll-dialog::part(dialog){
box-sizing: border-box;
color: #53432C;
border-image-slice: 153 95 153 95 fill;
border-image-width: 50px 55px 50px 55px;
border-image-outset: 0px 0px 0px 0px;
border-image-repeat: stretch round;
border-image-source: url("/media/assets/scroll.png");
border-style: solid;
background:none;
max-width:100%;
width:700px;
padding:45px;
color: var(--wa-color-brand-40)!important;
}

.scroll-dialog::-webkit-scrollbar {
  width: 10px;
}
.scroll-dialog::-webkit-scrollbar-track {
  background: var(--wa-color-brand-60);;
}
.scroll-dialog::-webkit-scrollbar-thumb {
  background: var(--wa-color-brand-40); 
  border-radius: 5px;
}
.scroll-dialog::-webkit-scrollbar-thumb:hover {
  background: var(--wa-color-brand-50);
}

.scroll-dialog::part(header){
padding:15px;
}

.scroll-dialog::part(title){
    font-size:1rem!important;
}

.scroll-dialog::part(close-button) {
    display:none;
}

.sheet-dialog::part(dialog){
box-sizing: border-box;
color: #53432C;
border-image-slice: 153 95 153 95 fill;
border-image-width: 50px 55px 50px 55px;
border-image-outset: 0px 0px 0px 0px;
border-image-repeat: stretch round;
border-image-source: url("/media/assets/sheet.png");
border-style: solid;
background:none;
max-width:100%;
color: var(--wa-color-brand-40)!important;
padding:15px;
}


.sheet-dialog::part(close-button) {
    display:none;
}

.fa-xl{
    font-size: 1.25em!important;
    line-height: .05em!important;
    vertical-align: -.075em!important;
}


@media (min-width: 576px) { 
    
.fa-xl {
    font-size: 1.5em!important;
    line-height: .0416667em!important;
    vertical-align: -.125em!important;
}
    
    .scroll-dialog::part(dialog){
padding: 10rem 7rem;
box-sizing: border-box;
color: #53432C;
border-image-slice: 153 95 153 95 fill;
border-image-width: 90px 95px 90px 95px;
border-image-outset: 0px 0px 0px 0px;
border-image-repeat: stretch round;
border-image-source: url("/media/assets/scroll.png");
border-style: solid;
background:none;
max-width:100%;
width:700px;
padding:75px;
color: var(--wa-color-brand-40)!important;
}
    
    
    
    #landingArt{
        border-radius:1rem;
    }
    
    #comicPage{
        border-radius:0px;
    }
    
    .popup  {
    width:var(--auto-size-available-width) !important;
    max-width: var(--auto-size-available-width) !important;
    }
    
    .navbar-collapse{
    width:auto!important;
    max-width:auto!important;
    }
}

.sat-slider::part(indicator){
    background-color:var(--wa-color-brand-60)!important;
}

.sat-slider::part(references){
    padding-bottom:10px!important;
    max-height:15px!important;
}

.sat-slider::part(thumb){
    background-color:var(--wa-color-brand-40)!important;
}

.cw{
    box-shadow:rgba(0,0,0, 0.5) 0px 5px 15px; position:absolute; left:50%;
   top:50%;
   -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
   transform: translate(-50%, -50%);
   position:absolute; color:#fff; background:#f00; z-index:99; width:350px;
   display:none;
}

.cw-censor{
    filter:blur(15px) brightness(1);
    transition: filter 0.3s;
}

#pageContain{
    overflow:hidden;
}

.img-fluid{
    border-radius:0;
}

.about-book::part(body){
    padding:0px!important;
}

.scroll-home{
box-sizing: border-box;
color: #53432C;
border-image-slice: 153 95 153 95 fill;
border-image-width: 50px 35px 50px 35px;
border-image-outset: 0px 0px 0px 0px;
border-image-repeat: stretch round;
border-image-source: url("/media/assets/scroll.png");
border-style: solid;
background:none;
max-width:100%;
width:1000px;
padding:45px;
color: var(--wa-color-brand-40)!important;
}

.tape-home{
box-sizing: border-box;
color: #53432C;
border-image-slice: 153 95 153 95 fill;
border-image-width: 50px 35px 50px 35px;
border-image-outset: 0px 0px 0px 0px;
border-image-repeat: stretch round;
border-image-source: url("/media/assets/tape.png");
border-style: solid;
background:none;
max-width:100%;
width:1000px;
padding:45px;
color: var(--wa-color-red-50)!important;
}

html.dark-mode .tape-home{
border-image-source: url("/media/assets/tape-dark.png");
color: var(--wa-color-green-70)!important;
}

html.dark-mode .tape2-home{
border-image-source: url("/media/assets/tape2-dark.png");
color:#fff!important;
}

html.dark-mode .nothing{
content: url('/media/assets/where nothing can hurt you-dark.png');
}

html.dark-mode .coral{
content: url('/media/assets/coral-dark.png');
}


.tape2-home{
box-sizing: border-box;
color: #53432C;
border-image-slice: 153 95 153 95 fill;
border-image-width: 50px 35px 50px 35px;
border-image-outset: 0px 0px 0px 0px;
border-image-repeat: stretch round;
border-image-source: url("/media/assets/tape2.png");
border-style: solid;
background:none;
max-width:100%;
width:1000px;
padding:45px;
color: var(--wa-color-gray-30)!important;
font-family:"Georgia";
font-size:1rem;
}

html.dark-mode .scroll-home{
    border-image-source: url("/media/assets/scroll_dark.png");
    color: #fff!important;
}

::selection {
  background: #ff0;
  color: #000000;      
}

.chapterTranscriptText .transcript-divider{
    --color:  var(--wa-color-brand-50)!important;
}

.comicSwipeActive {
    transition: all 0.5s ease;
}

#comicPage{
    transition: all 0.5s ease;
    touch-action: pan-y;
}


#comicPage.swipeLeft {
    transform-origin: left center;
    transform: scaleX(1.1) translateX(-25px);
}

#comicPage.swipeRight {
    transform-origin: right center;
    transform: scaleX(1.1) translateX(25px);
}

.shadow-color::part(base){
color:#FF0!important;   
border-radius:6px;
animation: shadow 2s linear infinite;
}

@keyframes shadow {
	0% {
		box-shadow:#ff0 0px 0px 0px;
		border:0rem solid #ff0;
	}
	50% {
		box-shadow:#ff0 0px 0px 15px;
		border:0.05rem solid #ff0;
	}
	100% {
		box-shadow:#ff0 0px 0px 0px;
		border:0rem solid #ff0;
	}
}

.marquee {
  height: 40px;
  max-width: 1300px;
  margin:auto;
  overflow: hidden;
  position: relative;
  color:#ff0;
  background:var(--wa-color-brand-50);
  animation-play-state:running;
}

.marquee .pause-on-hover:hover{
-webkit-animation-play-state:paused;
  -moz-animation-play-state:paused;
  -o-animation-play-state:paused;
  animation-play-state:paused;
  cursor: pointer;
}

.very-slow-speed{
    animation: marquee 75s linear infinite;
}

.very-slow-speed:hover{
    -webkit-animation-play-state:paused;
    -moz-animation-play-state:paused;
    -o-animation-play-state:paused;
    animation-play-state:paused;
}

.slow-speed{
    animation: marquee 50s linear infinite;
}

.slow-speed:hover{
    -webkit-animation-play-state:paused;
    -moz-animation-play-state:paused;
    -o-animation-play-state:paused;
    animation-play-state:paused;
}

.normal-speed{
    animation: marquee 35s linear infinite;
}

.normal-speed:hover{
    -webkit-animation-play-state:paused;
    -moz-animation-play-state:paused;
    -o-animation-play-state:paused;
    animation-play-state:paused;
}

.fast-speed{
    animation: marquee 15s linear infinite;
}

.fast-speed:hover{
    -webkit-animation-play-state:paused;
    -moz-animation-play-state:paused;
    -o-animation-play-state:paused;
    animation-play-state:paused;
}

.very-fast-speed{
    animation: marquee 5s linear infinite;
}

.very-fast-speed:hover{
    -webkit-animation-play-state:paused;
    -moz-animation-play-state:paused;
    -o-animation-play-state:paused;
    animation-play-state:paused;
}

.marquee .marquee-text {
  display: block;
  width: 400%;
white-space:nowrap;
  position: absolute;
  overflow: hidden;
}

.marquee span {
padding-right:20px;
}

@keyframes marquee {
  0% { left: 100%; }
  100% { left: -200%; }
}


.logo-banner{
    transition:all .30s ease;
}
.logo-banner:hover{
    transform:scale(1.05)
}

.logo-banner:active{
    transform:scale(1);
}

.logo-banner:focus{
    transform:scale(1);
}

#banners-autoplay{
    cursor:pointer;
}

.confirm-set{
    background:var(--wa-color-surface-default);
    color:#000;
}

.confirm-set::-webkit-scrollbar-track {
  background: transparent;
}

.fire-glow {
   box-shadow:
      0 0 20px #fff,
      0 -10px 30px #ffea00,
      0 -20px 50px #ff7300,
      0 -40px 70px #ff0000,
      0 -60px 100px #520000;
}

@keyframes flicker {
  0% {

   
  }
  100% {

    box-shadow:
      0 0 25px #fff,
      0 -15px 25px #ffe100, 
      0 -25px 50px #ff5100,
      0 -50px 75px #e60000,
      0 -75px 90px #3d0000;
  }
}

.soul-contract p, .soul-contract h5{
  font-family: "Trade Winds"!important;
  font-weight: 400;
  font-style: normal;
}

.soul-contract p{
margin-bottom:0.5rem;
}

.soul-scroll::-webkit-scrollbar-thumb {
  background: var(--wa-color-red-40); 
  border-radius: 15px;
}

.soul-scroll::-webkit-scrollbar-thumb:hover {
  background: var(--wa-color-red-50);
}

.disclaimer::part(dialog){
box-shadow:0px 0px 35px rgba(0,0,0,0.4);
}

.default-drawer::part(title){
color:var(--wa-color-text-normal);
}

.default-dialog::part(title){
color:var(--wa-color-text-normal);
}

.text-normal{
color:var(--wa-color-text-normal);
}

a.text-normal{
    text-decoration:none;
}

a.text-normal:hover{
    color:var(--wa-color-brand-60);
}

html.wa-dark a.text-normal{
    color:var(--wa-color-brand-60);
}

html.wa-dark a.text-normal:hover{
    color:var(--wa-color-brand-70);
}



html.dark-mode .confirm-set{
    color:#fff;
}

  wa-accordion-item.disc::part(icon) {
    rotate: none;
  }

  wa-accordion-item.disc [data-when='expanded'] {
    display: none;
  }
  wa-accordion-item.disc[expanded] [data-when='collapsed'] {
    display: none;
  }
  wa-accordion-item.disc[expanded] [data-when='expanded'] {
    display: inline-flex;
  }
  
  
#updatesSearchBox {
}

#updatesSearchInput {
  flex: 1;
}


#updatesSearchButton {
  cursor: pointer;
  font: inherit;
}

.updates-result-count {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.9rem;
  font-weight: normal;
  opacity: 0.7;
}

.update-card,
.full-update {
  margin-bottom: 1rem;
  margin-top:1rem;
  background:var(--wa-color-brand-50);
  padding:1rem;
  border-radius:1rem;
}

.page-contents .update-card, .page-contents
.full-update {
  background:var(--wa-color-brand-40);
}

html.dark-mode .update-card, html.dark-mode
.full-update {
  background:var(--wa-color-brand-20);
}

.update-card{
  border-radius: 1rem;
  padding:1rem;
}

.home-updates .update-card{
  height:350px;
}

.update-card a{
  color:#ff0;
  text-decoration:none;
}

.update-card a:hover{
  color:#fff;
  text-decoration:none;
}

.update-date {
  opacity: 0.75;
  font-size: 0.9rem;
}

#updatesPage a{
    text-decoration:none;
    color:#ff0;
}

#updatesPage a:hover{
    color:#fff;
}

.update-tags {
  margin: 0.5rem 0;
}

.update-tags a {
  margin-right: 0.5rem;
}

.read-more {
  display: inline-block;
  margin-top: 0.5rem;
}

.updates-pagination {
  display: flex;
  gap: 1rem;
  margin-top: 2rem;
}

#updatesTags {
    margin-bottom: 2rem;
}

wa-tag.tag-link {
  cursor: pointer;
}

wa-tag.tag-link:hover {
  background:#fff;
}

html.dark-mode wa-tag.tag-link:hover {
  background:#333;
}

@media (max-width: 750px) {
    
.page-container{
    padding-top:0!important;
    padding-bottom:0!important;
}

.page-contents{
    background-color:var(--wa-color-brand-50);
    padding:1rem;
    color:#fff;
    border-radius:0!important;
    margin-bottom:0!important;
}
    
    .navbar{
    background-color:var(--wa-color-brand-30)!important;
}
   #updatesSearch {
    align-items: stretch;
    flex-direction: column;
  }
  
   #updatesSearch wa-input,
  #updatesSearch wa-button {
    width: 100%;
 }
}

@media (max-width: 1900px) {
  .settings-controls{
      max-height:400px!important;
  }
}

.settings-controls{
    max-height:660px;
}

.updates-tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items:center;
    justify-content:center;
    width:100%;
}

.updates-tag-list a {
    padding: .35rem .75rem;
    border: 1px solid currentColor;
    border-radius: 999px;
    text-decoration: none;
}

.updates-tag-list a:hover {
    background: rgba(255,255,255,.1);
}


#updateArchiveList::-webkit-scrollbar {
  width: 15px;
}

#updateArchiveList::-webkit-scrollbar-track {
  background: transparent;
}

#updateArchiveList::-webkit-scrollbar-thumb {
  background: var(--wa-color-brand-40); 
  border-radius: 15px;
}

#updateArchiveList::-webkit-scrollbar-thumb:hover {
  background: var(--wa-color-brand-60);
}

#updateArchiveCard {

}

#updateArchiveList {
    height: 200px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.update-contain{
        background-color:var(--wa-color-brand-40);
}

html.dark-mode .update-contain{
        background-color:var(--wa-color-brand-20);
}

.archive-update-link {
    display: flex;
    justify-content: space-between;
    align-items: center;

    padding: .65rem .75rem;

    text-decoration: none;
    
    color:#ff0;

}

.archive-update-link:last-child {
}

.archive-title {
    font-weight: 600;
}

.archive-date {
    opacity: .65;
    font-size: .9rem;
}

.archive-footer {
    margin-top: 1rem;
    text-align: right;
}

.content-dialog::part(dialog){
    box-shadow:0px 0px 15px rgba(0,0,0,0.3);
}

.dropdown-link::part(menu){
    width:180px;
    text-align:center;
}

@media (max-width: 1024px) {
.dropdown-link::part(menu){
    width:350px;
    max-width:100%;
    text-align:center;
}
}

.contentWarningDescription {
  margin-top: 0.15rem;
  margin-left: 1.75rem;
  font-size: 0.875rem;
  line-height: 1.35;
  opacity: 0.7;
  margin-bottom:0.15rem;
}

.contentWarningOption + .contentWarningOption {
  margin-top: 0.75rem;
}

.cw-settings::part(header){
    background:var(--wa-color-red-50)!important;
    padding-bottom:15px;
}

html.dark-mode .cw-settings::part(header){
    background:var(--wa-color-red-20)!important;
    padding-bottom:15px;
}

.cw-settings::part(body){
    background:#fff;
}

html.dark-mode .cw-settings::part(body){
    background:#000!important;
}

.cw-settings::part(title){
    color:#fff!important;
}

html.dark-mode .cw-settings::part(title){
    color:var(--wa-color-red-70)!important;
}

.cw-settings::part(close-button__base){
    color:#fff;
}

html.dark-mode .cw-settings::part(close-button__base){
    color:var(--wa-color-red-70);
}

.cw-settings::part(close-button__base):hover{
    background:none!important;
}

.sin-item {
    cursor: pointer;
}

.sin-item:hover {
    text-decoration: underline;
}

.sin-scripture + .sin-scripture {
    margin-top: 0.75rem;
}

.sin-scripture-text {
    margin-top: 0.35rem;
}

.text-sin{
color:var(--wa-color-yellow-40);
font-family:"Eagle Lake"!important;
}

.text-sin{
color:var(--wa-color-yellow-40);
font-family: "Grenze Gotisch"!important;
font-size:1.3rem;
}

.sin-item.repented {
    opacity: 0.6;
    text-decoration: line-through;
}

html.dark-mode .text-sin{
color:var(--wa-color-yellow-70);
font-family:"Eagle Lake"!important;
}

.onboarding-sins {
border: 1px solid rgb(80 58 31 / 25%);
  border-radius: 0.2rem;
  background:
    linear-gradient(rgb(255 252 239 / 92%), rgb(255 250 230 / 92%)),
    repeating-linear-gradient(
      0deg,
      rgb(81 55 26 / 3%) 0,
      rgb(81 55 26 / 3%) 1px,
      transparent 1px,
      transparent 4px
    );
    font-family:'Eagle Lake'!important;
  color: #625332;
  box-shadow: 0px 0px 15px var(--wa-color-brand-20); 
  padding:0.7rem;
}

html.dark-mode .onboarding-sins {
border: 1px solid rgb(80 58 31 / 25%);
  border-radius: 0.2rem;
  background:
    var(--wa-color-yellow-20);
    font-family:'Eagle Lake'!important;
  color: var(--wa-color-yellow-70);
  box-shadow: 0px 0px 15px var(--wa-color-brand-20); 
  padding:0.7rem;
}

.text-protest{
font-family:"Comic relief"!important;
}

.reading-order-dialog {
  --width: min(650px, calc(100vw - 2rem));
}



.reading-order {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.reading-order-explanation {
  margin: 0;
  color: var(--wa-color-text-quiet);
  line-height: 1.6;
}



.reading-order-testament {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.reading-order-testament-header {
  text-align: center;
}

.reading-order-testament-header p {
  margin: 0.5rem auto 0;
  max-width: 30rem;

  color: var(--wa-color-text-quiet);
  font-size: 0.9rem;
  font-style: italic;
}



.reading-order-divider {
  display: flex;
  align-items: center;
  gap: 1rem;

  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color:var(--wa-color-text-normal);
  padding-top:1rem;
}

.reading-order-divider::before,
.reading-order-divider::after {
  content: "";
  flex: 1;

  height: 1px;
  background: var(--wa-color-neutral-border-normal);
}



.reading-order-books {
  position: relative;

  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}



.reading-order-books::before {
  content: "";

  position: absolute;
  top: 1rem;
  bottom: 1rem;
  left: 1.55rem;

  width: 2px;

  background: var(--wa-color-neutral-border-normal);

  z-index: 0;
}



.reading-order-book {
  position: relative;
  z-index: 1;

  display: grid;
  grid-template-columns: 3rem 3.25rem 1fr auto;
  align-items: center;
  gap: 0.85rem;

  padding: 0.65rem;

  color: inherit;
  text-decoration: none;

  background: var(--wa-color-brand-fill-normal);
  border-radius: var(--wa-border-radius-l);

  transition:
    transform 150ms ease,
    border-color 150ms ease,
    background-color 150ms ease;
}

.reading-order-book:hover {
  transform: translateX(4px);

  background: var(--wa-color-brand-fill-quiet);
}




.reading-order-number {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 2.5rem;
  height: 2.5rem;

  border-radius: 50%;

  background: color-mix(in oklab, var(--wa-color-brand-60), transparent 70%);
  color: var(--wa-color-brand-on-normal);

  font-size: 0.8rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}




.reading-order-book img {
  display: block;

  width: 3.25rem;
  height: 3.25rem;
  object-fit:cover;

  border-radius: var(--wa-border-radius-s);
}



.reading-order-book-info {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;

  min-width: 0;
}

.reading-order-book-info strong {
  font-size: 1rem;
}

.reading-order-book-info small {
  color: var(--wa-color-text-quiet);
  font-size: 0.8rem;
}



.reading-order-book > wa-icon {
  color: var(--wa-color-text-quiet);
}

.reading-order-book:hover > wa-icon {
  color: var(--wa-color-brand-on-quiet);
}


@media (max-width: 500px) {

  .reading-order-book {
    grid-template-columns: 2.5rem 2.75rem 1fr auto;
    gap: 0.65rem;

    padding: 0.6rem;
  }

  .reading-order-number {
    width: 2.25rem;
    height: 2.25rem;
  }
  
  html.dark-mode   .reading-order-number {
    color:#fff;
    background:var(--wa-color-brand-40);
  }
  
  .reading-order-number {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 2.5rem;
  height: 2.5rem;

  border-radius: 50%;

  background:var(--wa-color-brand-80);
  color: var(--wa-color-brand-on-normal);

  font-size: 0.8rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

  .reading-order-books::before {
    left: 1.42rem;
  }
  
.reading-order-book-title-row {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  white-space: nowrap;
}

.reading-order-book img {
  display: block;

  width: 2.5rem;
  height: 2.5rem;
  object-fit:cover;

  border-radius: var(--wa-border-radius-s);
}

}

@media (max-width: 500px) {

  .reading-order-book {
    grid-template-columns: 3.5rem 1fr auto;
    grid-template-areas:
      "cover info arrow";
    
    gap: 0.75rem;
    padding: 0.75rem;

    align-items: center;
  }



  .reading-order-cover {
    grid-area: cover;

    width: 3.5rem;
    aspect-ratio: 2 / 3;
  }



  .reading-order-number {
    position: absolute;

    top: 0.4rem;
    left: 0.4rem;

    width: 1.8rem;
    height: 1.8rem;

    font-size: 0.8rem;
    border: 1px solid var(--wa-color-brand-70);


    z-index: 2;
  }
  
  .reading-order-book-unavailable  .reading-order-number {
    border: 1px solid var(--wa-color-warning-70);
  }




  .reading-order-book-info {
    grid-area: info;

    min-width: 0;
  }



  .reading-order-book-title-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 0.25rem 0.4rem;
  }


  .reading-order-book-title {
    font-size: 0.95rem;
  }



  .reading-order-arrow {
    grid-area: arrow;
  }



  .reading-order-books::before {
    display: none;
  }

}

@media (max-width: 500px) {

  .reading-order-book {
    grid-template-columns: 3.5rem 1fr;
    grid-template-areas:
      "cover info";

    position: relative;

    gap: 0.75rem;
    padding: 0.75rem;
  }

  .reading-order-cover {
    grid-area: cover;
  }

  .reading-order-book-info {
    grid-area: info;
  }

  .reading-order-arrow {
    position: absolute;

    right: 0.6rem;
    bottom: 0.6rem;

    font-size: 1rem;
    opacity: 0.6;
  }

}

.reading-order-book-unavailable {
  cursor: default;
  background: var(--wa-color-warning-fill-quiet);
  color:var(--wa-color-warning-on-normal)!important;
}

.reading-order-book-unavailable:hover {
  transform: none;
  background: var(--wa-color-warning-fill-quiet);
}

.reading-order-book-unavailable .reading-order-cover {
  filter: grayscale(0.6);
  opacity: 0.6;
}

.reading-order-book-unavailable .reading-order-book-info {
  color: var(--wa-color-text-quiet);
}

.reading-order-book-unavailable .reading-order-number {
  background: var(--wa-color-warning-fill-normal);
  color: var(--wa-color-warning-on-normal);
}

.reading-order-book-unavailable .reading-order-book-title {
  color: var(--wa-color-warning-on-normal);
}

.reading-order-book-unavailable .reading-order-book-icon {
  color: var(--wa-color-warning-on-normal);
}

.reading-order-book-unavailable .reading-order-book-number-label {
  color: var(--wa-color-warning-50);
}

.reading-order-book-info {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}

.reading-order-book-title-row {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
}

.reading-order-book-icon {
  flex-shrink: 0;

  font-size: 1rem;
  color: var(--wa-color-brand-on-quiet);
}

.reading-order-book-title {
  min-width: 0;
  color:var(--wa-color-text-normal);
  font-size: 1rem;
  line-height: 1.2;
}

.reading-order-book-title-row wa-tag {
  flex-shrink: 0;
}

.reading-order-book-number-label {
  color: var(--wa-color-text-quiet);
  font-size: 0.8rem;
}

.reading-order-cover-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 3.2rem;
  height: 3.2rem;

  border: 1px solid var(--wa-color-warning-border-normal);
  border-radius: var(--wa-border-radius-s);

  background: var(--wa-color-warning-fill-quiet);
  color: var(--wa-color-warning-60);

  font-size: 1.25rem;
}

.tutorial-panel wa-callout div{
    text-align:center;
}

.latest-book{
    background:var(--wa-color-brand-50); 
}

html.dark-mode .latest-book{
    background:var(--wa-color-brand-20); 
}

.btn-option::part(base) {
    box-shadow:0px 0px 15px rgba(0,0,0,0.3);
}