@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400..700;1,400..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400..700;1,400..700&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

body {
	padding: 0;
    margin: 0;
    background-color: #eee;
	font-size: 1.8em;
	font-family: "Source Sans 3", sans-serif;
	//transition: font-size 0.2s ease;
	//display: grid;
	//grid-template-rows: auto-fit 1fr auto-fit;
	overflow: hidden;
}
#container {/*
    width: 100vw;
    height: 100vh;
    background-color: #eee;
    display: flex;
    justify-content: center;
    align-items: center;
	*/
    width: 100vw;
    height: 100dvh;
    background-color: #eee;
    display: flex;
    justify-content: center;
    padding: 1.2em .3em;
    box-sizing: border-box;	
}
#c_mode {
	width: .8em;
    filter: invert(95%);
    cursor: pointer;
    flex: 0;
    margin: .4em .7em 0;
}
.day {
	filter: invert(0%);
}
.night {
	filter: invert(100%);
}
.night heb:hover, .night alm:hover, .night exp:hover, .night num:hover ~ heb, .night num:hover ~ alm, .night num:hover ~ exp {
	filter: invert(100%);	
}
.night iheb:hover, .night ialm:hover {
	filter: invert(100%);	
}
.night t::after {
	text-shadow: 0 0 .1em #000000aa;
}
.night ~ #verses_bottom {
	filter: invert(100%);
}

::selection {
    background-color: #eee; /* Cor de fundo da seleção */
    color: inherit; /* Cor do texto selecionado */
}

.hide {
    display: none;
}
.disabled {
    pointer-events: none; /* Desabilita o clique */
    color: white !important; /* Altera a aparência */
    text-decoration: none; /* Remove o sublinhado */
}
.nav_chapters {
    position: fixed;
    right: .3em;
    top: 2em;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .2em;
	font-size: .6em;
    padding: .9em;

}
.nav_chapters a {
    cursor: pointer;
    display: block;
    text-decoration: none;
    color: black;
    justify-content: center;
    align-items: center;
    position: relative;
    aspect-ratio: 1 / 1;
    border-radius: 25%;
    background: #eee;
    text-align: center;
    padding: 0 .1em .2em;
}
.nav_chapters a:hover {
	background: #333;
	color: white;
}
#next_chapter {

}
#previous_chapter {
	
}
#title {
	flex: 1;
	text-align: center; /* Centraliza o texto */
}
#superior {
	font-family: 'Source Sans 3', sans-serif;
	background-color: black;
    width: 100vw;
    position: fixed;
    color: white;
    top: 0;
    font-size: .45em;
	letter-spacing: .2em;
	font-weight: 600;
	cursor: default;
	display: flex;
    align-items: center;
    justify-content: space-between;
    height: 2em;
	z-index: 9999;
}
#inferior {
    font-family: 'Source Sans 3', sans-serif;
    background-color: black;
    width: 100vw;
    position: fixed;
    color: white;
    bottom: 0;
    font-size: .45em;
    letter-spacing: .2em;
    font-weight: 600;
    cursor: default;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 2em;
	z-index: 9999;
}
#site {
	position: fixed;
    left: 0;
    bottom: 0;
    margin: .3em .5em;
	font-weight: 100;
	font-size: 1em;
	cursor: pointer;
	filter: grayscale(1);
}
#max {
    margin: .2em .5em;
	font-weight: 400;
	cursor: pointer;
	flex: 0;
}
#logo {
	width: 20em;
    position: fixed;
    right: 0;
    bottom: 0;
    background: gray;
}

/* INDEX */
bx {
    position: fixed;
    right: 0;
    top: 0;
    font-size: 2em;
    font-weight: 100;
    color: #aaa;
    cursor: pointer;
    line-height: 0;
    width: .5em;
    margin: .95em .3em;
	z-index: 9999;
}
index {/*
    //position: fixed;
    background: #eee;
    z-index: 9999;
    font-family: "Lora", serif;
    font-weight: 400;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    width: 100vw;
    //top: .9em;
    height: calc(100% - 2.6em);
    gap: .3em;
    //box-sizing: border-box;
    align-content: start;
    //border: .3em solid #eee;
    overflow: hidden;
    margin: 2em .3em;
	*/
	background: #eee;
    z-index: 9999;
    font-family: "Lora", serif;
    font-weight: 400;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    width: 100vw;
    gap: .3em;
    align-content: start;
    overflow: auto;
}
#index_bottom {
	//padding-bottom: 2.5em;
}
.fullscreen #index_bottom {
	//padding-bottom: 0;
}
igroup {
	background: #fff;
	height: calc(100vh - 2.4em);
}
igroup > span {
    display: block;
	color: #777;
    background: #eee;
    padding: .3em .25em .35em;
    text-transform: uppercase;
    cursor: default;
    font-size: .7em;
}
igroup > span > iheb {
	font-weight: 600;
}
igroup > span > ialm {
    color: #777;
    font-weight: 300;
}
ibooks {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    margin: .3em;
    font-size: .8em;
    gap: .1em;
    overflow: auto;
    max-height: calc(100vh - 5.6em);
}
ibook {
	cursor: pointer;
}
ibook > span {
	text-transform: normal;
}
ibook:hover iheb {
	color: #0064ff;
}
ibook:hover ialm {
	color: #57b746;
}
ibook:hover ialm::before {
	color: #777;
}
ichapters {
	display: grid;
    grid-template-columns: repeat(10, 1fr); /* 10 colunas iguais */
    gap: .2em; /* Espaço entre os elementos */
	font-size: .8em;
    line-height: .9em;
	margin: .5em 0;
	font-family: "Source Sans 3", sans-serif;
}
ichapter {
	text-align: center;
    display: block;
	vertical-aligh: middle;
}
ichapter > a {
    cursor: pointer;
    display: flex;
    text-decoration: none;
    color: black;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    top: -.1em;
    position: relative;
    aspect-ratio: 1 / 1;
    border-radius: 25%;
    background: #eee;
    line-height: 0;	
}
ichapter > a:hover {
	background: #333;
	color: white;
}
ichapter > a::selection {
	background: white;
}
iheb {
}
ialm {
    color: #777;
    font-weight: 300;
	font-family: "Source Sans 3", sans-serif;
}
ialm::before {
	content: " I ";
}


/* BIBLE */


bible {/*
    font-family: "Lora", serif;
    font-weight: 600;
    background: white;
    display: grid;
    width: 100vw;
    height: calc(100% - 2.6em);
    gap: .4em;
    background: white;
    margin: .3em;
    box-sizing: border-box;
    align-content: baseline;
	*/
    font-family: 'Segoe UI';
    font-weight: 600;
    display: grid;
    width: 100vw;
    gap: .4em;
    background: white;
    box-sizing: border-box;
    /*border-radius: .4em;	*/
}
chapter {
	position: fixed;
    font-size: .95em;
    cursor: pointer;
    z-index: 10;
    width: fit-content;
    margin: .3em .3em 0;
}

b_heb {
}
b_alm {
	font-weight: 400;
    color: #aaa;
    font-size: .6em;
    text-transform: uppercase;
    line-height: .8em;
    display: block;
    padding-left: .05em;
    font-family: 'Source Sans 3', sans-serif;
}
b_num {
	
}
#verses_top {
    position: fixed;
    height: .7em;
    top: 3.3em;
	left: .3em;	
    width: calc(100% - .6em);
    border-top: solid .2em white;
    background: linear-gradient(to bottom, rgb(255 255 255), rgb(255 255 255 / 0%));
    z-index: 10;
}
#verses_bottom {
    position: fixed;
    height: .7em;
    bottom: .9em;
	left: .3em;	
    width: calc(100vw - .6em);
    border-bottom: solid .35em #eee;
    background: linear-gradient(to top, rgb(255 255 255), rgb(255 255 255), rgb(255 255 255 / 0%));
    z-index: 10;
}
verses {
	margin-top: 2.2em;
	display: grid;
    gap: .15em;
    overflow: auto;
    padding: .5em .3em;
	/*margin-bottom: 2em;*/
}
.fullscreen verses {
    margin-bottom: 0;
}
verse {
	display: block;
	font-size: .85em;
	font-weight: normal;
}
verse num {
    font-size: .6em;
    color: #555;
    position: relative;
    top: -.3em;
}
.psalm_title {
	font-weight: 600;
}
i {
	font-style: normal;
	opacity: .7;
}
num::after {
	content: " ";
}
num:hover sup {
	color: red;
	cursor: pointer;
}
num:hover ~ heb > alm, num:hover ~ heb > sig, num:hover ~ alm > heb, num:hover ~ alm > sig, num:hover ~ sig > heb, num:hover ~ sig > alm, num:hover ~ exp > sig  {
	display: inline;
}
num:hover ~ heb , heb:hover /*, .all_notes heb*/ {
	color: #0064ff;
	cursor: pointer;
}
num:hover ~ alm , alm:hover /*, .all_notes alm*/ {	
	color: #57b746;
	cursor: pointer;
}
num:hover ~ sig , sig:hover /*, .all_notes sig*/ {
	//color: #c77115;
	cursor: pointer;
}
num:hover ~ exp , exp:hover /*, .all_notes exp*/ {
	//color: none;
	cursor: pointer;
}
heb , alm , exp, sig {
	white-space: nowrap;
}
num:hover ~ heb > t::after, heb:hover > t::after {
    text-shadow: 0 0 .1em #0064ff50;
}
heb > alm , sig > alm {
	color: #57b746;
	font-family: "Source Sans 3", sans-serif;
	font-size: .9em;
	line-height: .9em;
}
alm > heb , sig > heb {
	color: #0064ff;
	font-family: "Lora", serif;
	font-weight: 500;
	font-style: italic;
	font-size: .85em;
	line-height: .9em;
}
alm > sig , heb > sig, exp > sig {
	color: #c77115;
	font-family: "Source Sans 3", sans-serif;
	font-size: .9em;
	line-height: .9em;
}
heb > alm, heb > sig, alm > heb, alm > sig, sig > alm, sig > heb, exp > sig {	
	display: none;
}
heb:hover > alm, heb:hover > sig, alm:hover > heb, alm:hover > sig, sig:hover > alm, sig:hover > heb, exp:hover > sig {	
	display: inline;
}
.all_notes heb > alm, .all_notes heb > sig, .all_notes alm > heb, .all_notes alm > sig, .all_notes sig > alm, .all_notes sig > heb, .all_notes exp > sig {	
	display: inline;
}
lm , l {
	position: relative;
}
lm > dot {
    position: absolute;
	left: 35%; /* Centraliza horizontalmente */
}
l > dot {
    position: absolute;
	left: 30%; /* Centraliza horizontalmente */
}
lm > dot::selection , l > dot::selection {
	background-color: #ffffff00;
}
t {
	position: relative;
}

t::after {
	content: '̠';
    position: absolute;
    left: 50%;
    top: 3%;
    font-weight: 100;
    color: #00000000;
    text-shadow: 0 0 .1em #00000050;
}

ain {
	position: relative;
	padding-right: .05em;
}

ain::before {
	position: absolute;
	left: -.1em;
    top: -.05em;
	content: '‘ ';
	opacity: .4;
}