<style type="text/css">

body{
  margin: 0px;
  padding: 0px;
}


.span_centro {
    width:100px;
    height:100px;
    position:fixed;
    top:45%;
    left:50%;
    margin-top:-50px;
    margin-left:-50px;
}


#conteudo_box_id{
   font-size: medium;

}

.thumbnail {
  position: relative;
  width: 100px;
  height: 100px;
  overflow: hidden;
}
.cursor_navegacao{  
  cursor:pointer;
  min-width: 40px;
  width: 40px;
  padding: 2px;

}
.botao_navegacao{
  width: 42px;
  vertical-align: middle;
  cursor:pointer;
  padding: 2px;
}
.cursor_muda{  
  cursor:pointer;
  width: 40px;
  padding: 2px;

}
.botao_controle{
  width: 20px;
  vertical-align: middle;
  cursor:pointer;
}

.fonte_controle{
  font-size:10px;
}

.thumbnail img {
  /*position: absolute; */
  left: 50%;
  top: 50%;
  height: 100%;
  width: auto;
  -webkit-transform: translate(-50%,-50%);
      -ms-transform: translate(-50%,-50%);
          transform: translate(-50%,-50%);
}
.thumbnail img.portrait {
  width: 100%;
  height: auto;
}


.thumb2 {
  object-fit: cover;
  width:50px;
  height:50px;
}
/*
.outer-div
{
     padding: 0px;
}
.inner-div
{
     margin: 0 auto;
     width: 100% 
}

*/

text-align: justify;

A:link {  text-decoration:none}
A:visited { text-decoration:none}
A:hover {  text-decoration:none}

A{
  font-family: "Verdana", "Geneva";
  text-decoration:none;
}

.close {
    float:right;
    display:inline-block;
    padding:2px 5px;
    background:#ccc;
    z-index: 3;
    font-size:small;
}



#superior_fixo{
   position: fixed;   
   top: 0;    
   width: 80%;
   height: 20%;
   display:inline-block;
   align: center;
   vertical-align: middle;"
}
}

#navegador {
    position: fixed;
    float: right;
    top: 0;
    left: 0: 
    width: 20%;
    height: 10%;
}

A.doacao{
  
  font-size:40px;
  font-family: "Verdana", "Geneva";
  text-decoration:none;

}

A.curiosidades{
  
   font-family: "Verdana", "Geneva";
  text-decoration:none;

}
A.flag{
  
  font-size:10px;
  font-family: "Verdana", "Geneva";
  text-decoration:none;
}

A.lang{
  
  font-family: "Verdana", "Geneva";
  text-decoration:none;
}

A.nav_page{  
  font-family: "Verdana", "Geneva";
  text-decoration:none;  

}

div.titulo{
	text-align:center;
	font-size:50px;
}
.arabic{
  font-family:"adobe arabic";
  text-align:right;
  direction:RTL;
}

div.lang{
  font-family: "Verdana", "Geneva";
  border-style: solid;
  border-width: 1px;
 border-color: black;
  display: inline-block;
padding: 5px;
margin: 5px;
  text-align:center;
  font-size:50px;
   height:254px;
}
img{
  
    display: block;
    margin-left: auto;
    margin-right: auto;
}

a.img_nav{
  font-family: "Verdana", "Geneva";
  /*border-style: solid;
  border-width: 1px;
 border-color: black;
 */
  display: inline-block;
padding: 2px;
margin: 2px;
  text-align:center;
  font-size:10px;
   height:60px;
}

.nome_capitulo_nav{
    font-size:15px;
    text-align:center;
    float: center;
    
    display: flex;
    align-items: center;
}

div.lang_nav_start{
  font-family: "Verdana", "Geneva";
  border-style: solid;
  border-width: 0px;
  border-color: black;
  display: inline-block;
  padding: 15px;
  margin: 15px;
  text-align:center;
  
  width: 80px;
  height:90px;
}
div.new_lang_nav{
  font-family: "Verdana", "Geneva";
  border-style: solid;
  border-width: 1px;
  border-color: black;
  display: inline-block;
  padding: 15px;
  margin:5px;
  text-align:center;  
  
}
div.outros_nav{
  font-family: "Verdana", "Geneva";
  border-style: solid;
  border-width: 0px;
  border-color: black;
  display: inline-block;
  padding: 1px;
  
  text-align:center;
  float: none;
  width: 50px;
  cursor:pointer;
}

div.lang_nav_selector{
  font-family: "Verdana", "Geneva";
  border-style: solid;
  border-width: 0px;
  border-color: black;
  display: inline-block;
  padding: 0px;
  /*margin:5px;*/
  text-align:center;
  
  width: 70px;

  cursor:pointer;
}
div.lang_seletor{
  font-family: "Verdana", "Geneva";
  border-style: solid;
  border-width: 0px;
  border-color: black;
  display: inline-block;
  padding: 3px;
  /*margin:5px;*/
  text-align:center;
  
 /* float: left;*/
 width: 150px;
  height:100px;
  cursor:pointer;
}

div.lang_nav{
  font-family: "Verdana", "Geneva";
  border-style: solid;
  border-width: 0px;
  border-color: black;
  display: inline-block;
  padding: 3px;
  /*margin:5px;*/
  text-align:center;
  
  /*float: left;*/
 width: 90px;
  height:100px;
  cursor:pointer;
}

div.lang_nav_sele{
  font-family: "Verdana", "Geneva";
  background-color: lightblue;
  border-style: solid;
  border-width: 0px;
  border-color: black;
  display: inline-block;
  padding: 5px;
  margin: 5px;
  text-align:center;
  
  /*float: left;*/
  width: 50px;
  height:55px;
}
div.caixa_titulo{
  display: block;
}
div.codigos{
  display: block;
}
div.caixa_baixo{
  display: block;
}
div.page_nav_fig{
  position:relative;
  font-family: "Verdana", "Geneva";
  /*border-style: solid;
  border-width: 1px;
  border-color: black; */
  display: inline-block;
  padding: 5px;
  margin: 5px;
  text-align:center;
  font-size:medium;
  
  width: 60px;
  height: 65px;
  cursor:pointer;
}

.caixa_codigos{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 10px; /* space between boxes */
}

.code_box {
  display: inline-block;      /* make it look like a button */
  background-color: skyblue;  /* sky-like blue */
  color: black;               /* text color */
  padding: 5px 10px;          /* 5px top/bottom, 10px left/right */
  margin: 5px;                /* spacing between boxes */
  border-radius: 6px;         /* rounded corners */
  cursor: pointer;            /* show pointer on hover */
  text-indent: 0;             /* no indent on first line */
  padding-left: 5px;          /* specifically 5px left padding */
  font-family: monospace;    
  font-size: x-large;
  transition: background 0.2s;
}

.code_box:hover {
  background-color: deepskyblue; /* darker on hover */
}


span.page_texto_leon{     
  position: absolute;
  top: 15%;
  left: 25%;
  font-size:16px; 
  font-family:"vedana";     
}


span.page_texto{
     
     position: absolute;
     top: 55%;
     left: 25%;
     font-size:12px; 

     font-family:"vedana";    
    
}

div.page_nav_fig_sele{
  font-family: "Verdana", "Geneva";
    background-color: lightblue;
  /*border-style: solid;
  border-width: 1px;
  border-color: black; */
  display: inline-block;
  padding: 5px;
  margin: 5px;
  text-align:center;
  font-size:medium;
  float: left;
      width: 60px;
    height: 65px;
}

div.page_nav{
  font-family: "Verdana", "Geneva";
  border-style: solid;
  border-width: 1px;
  border-color: black;
  display: inline-block;
  padding: 5px;
  margin: 5px;
  text-align:center;
  font-size:medium;
  float: left;
      width: 50px;
    height: 55px;
}
div.page_nav_sele{
  font-family: "Verdana", "Geneva";
  background-color: lightblue;
  border-style: solid;
  border-width: 1px;
  border-color: black;
  display: inline-block;
  padding: 5px;
  margin: 5px;
  text-align:center;
  font-size:medium;
  float: left;
}

div.page_box{
  border-style: solid;
  border-width: 0px;

  /*margin: 5px;*/
  border-color: black;
  display: table;  
  /*float: auto;*/
  overflow:auto; 
  /*background-color:#F4F4F4; */
  width:100%
  
}

div.outros_box{
  border-style: solid;
  border-width: 0px;
  border-color: black;
  display: inline-block;    
   width:100%;
   overflow:auto; 
  
}

div.lang_box{
  border-style: solid;
  border-width: 0px;
  border-color: black;
  display: inline-block;  
/*  float: left;*/
  width:100%;
  overflow:auto; 
  /*background-color:#F6F6F6;*/
  
}

div.lang_box_start{
  
  border-style: solid;
  border-width: 0px;
  border-color: black;
  display: inline-block;  
  float: center;
  width:100%
  
}

div.nav_box_left{
  border-style: solid;
  border-width: 0px;
  border-color: red;
  display: inline-block;  
  float: left;
  width:50%
  
}

div.nav_box_right{
  border-style: solid;
  border-width: 0px;
  border-color: red;
  display: inline-block;  
  width:50%;
  float: right;
  
}
div.prince_box{
  border-style: solid;
  border-width: 0px;
  border-color: black;
  display: inline-block;  
  float: left;
  
  
}
div.prince_tit{
  font-size:20px;
  border-style: solid;
  border-width: 0px;
  border-color: black;
  display: block;  
  float: center;
  
}

.c_selecionado{
 background-color: lightblue;
}
.navegador{
   width:100%;
    font-size:140px;
    border-style: solid;
  border-width: 0px;
  border-color: black;
}

h0 {
  text-align:center;
  font-size: 18px;
 
}

h1 {
	text-align:center; 
  font-size: 15px;
 
}

h2 {
  text-align:center;
}
.titulo_capitulo {
    font-size: 1.5em;
    text-align:center;
    font-family: "Verdana", "Geneva";
}

div.textolivro{
    margin: 3%;
    background: light yellow;        
    margin-right: 3%;
    ALIGN: justify
    
}


.livro{
    margin: 3%;
    background: light yellow;        
    width: 90%; 
    text-align:justify;
    text-indent: 3em;
    font-family: "Verdana", "Geneva";
  
}

table.geral{       
   font-size:1em;   
}



span {

  text-align:justify;  
  font-family: "Verdana", "Geneva";
  
}

span.translator{

  text-align:justify;
  text-indent: 3em;
  font-family: "Verdana", "Geneva";
  font-size: medium;
}

 p.um {
  text-align:justify;

  text-indent: 3em;
  font-size: medium;
}

img.imglivro {
    margin: auto;
    margin-left: auto;
    width:300px;
    margin-right: auto ;
    /*background-color:dimgray*/
}

img.flag {
    display: block;
    margin: auto;
    margin-left: auto;
    margin-right: auto;
    width:50px;
}
img.cap_nav {
    display: block;
    margin: auto;
    margin-left: auto;
    margin-right: auto;
    width:50px;
}

img.flag_start {
    display: block;
    margin: auto;
    margin-left: auto;
    margin-right: auto;
    width:200px;
}

img.prince_top {
    display: block;
    margin: auto;
    margin-left: auto;
    width:100px;
    margin-right: auto 
}



.night-mode {
    background-color: #9d9696;
    color: black; /*hsl(210, 10%, 62%);*/
    --text-color: white;
    --text-color-normal: black; /*hsl(210, 10%, 62%);*/
    --text-color-light: black; /*hsl(210, 15%, 35%);*/
    --text-color-richer: hsl(210, 50%, 72%);
    --text-color-highlight: hsl(25, 70%, 45%);
  }

.light-mode {
    background-color: white;
    color: black;
    --text-color: black;
  }

@media screen and (width: 500px) {
  p{
    font-size: medium;
  }

}


</style>