:root{
   --font_titles: 'Nunito', sans-serif;
   --subtitle: 'Bitter', serif;

   --font_body:  'Nunito', sans-serif;
   --hints: 'Quicksand', sans-serif;
   --font_anchors:  'Nunito', sans-serif;
   --font_code:  'Source code pro', sans-serif;
   --font-screen: 'IBM Plex Mono', sans-serif;

   --top: #3a76a5;
   --menu_font: RGB(255,255,255,0.5);
   --menu_movil: RGB(75,101,135);
   --menu_hover: #c8c6c6;

   --enlaces: #1368F2;
   
   --toc: #faf7ea;
   --font_toc: #54acf1;   		
   --bfont_toc: #44556f;
   --toc_title: 	#03396c;
   
   --foot: #fffbee;
   --font_content: #000016;
   --bg_sutil:#FDFBFB;
   --fondo: #fff;
   --visitado: #f6ce71;
   --content-hover: #f3ba35;
   --scrollbar: rgb(246, 248, 253);

   --panel: #rgba(206, 221, 245, 1);

}
code, 
var {
	font-family: var(--font_code), monospace;
	font-size: 0.9em;
   color: green;
}
var {
   font-style: normal;
   font-size: 1em;
   color: blue;
}

.codigo {		
   background-color: var(--fondo); 
   color: green;
   font-family: var(--font_code), monospace;
   font-size: 0.90em;
}

ins {
   /* La estoy utilizando para comentarios en el código */
   color: grey;
   text-decoration: none;
}

samp, 
kbd {
	font-family: var(--font_screen), monospace;
   color: #5a61bd;
}

kbd {
   font-weight: bold;
}


strong, b {
   font-weight: bold;
}

dfn {
   font-family: var(--hints);
   color: var(--toc_title);
}

strong {
   font-family: var(--hints);
   color: var(--top);
}

cite {
   font-family: var(--subtitle);
   font-style: italic;
   font-size: 0.9em;
}

em {
   font-family: var(--font_anchors);
   font-style: italic;
   font-weight: bold;
}

i {font-style: oblique;}

h1, h2, h3 {
   font-family: var(--font_titles);
   line-height: 1.3;
}
h1 {font-size: 1.8rem; color: var(--top); }
h2 {font-size: 1.5rem; color: var(--toc_title);}
h3 {font-size: 1.3rem;}
h4 {font-size: 1.2rem; color: var(--bfont_toc); font-weight: bold; line-height: 1.5; margin: 3px 0;}
h5 {font-size: 1.05rem; font-weight:500; line-height: 1.5; color: var(--top); font-family: var(--subtitle); margin: 3px 0;}

h6 {
   font-family: var(--font_body);
   color: var(--menu_movil);
   line-height: 1.5;
}

p {
   color: var(--font_content);
}

.sangrado {margin: 10px 2em;}

a {
   font-weight: 500;
   text-decoration: none;
   border-bottom: var(--enlaces) 0.5px dotted;
   color: var(--enlaces);
}

.no-border {
   border: none;
   background: none !important;
}

a:hover {
   color: var(--font_toc);
   font-weight: bolder;
   cursor: pointer;
}
/*
a[href*="http"]{
   color:#f00;
 }
*/

a[target] {
   background: url('./fuentes/external-link-16.png') no-repeat 100% 60%;
   background-size: 10px 10px;
   padding-right:11px;
 }

 details {
   display: block;
	margin-left: 2rem;
	margin-right: 2rem;
   border: solid 1px var(--foot);
 }
 details > summary {
   padding: 5px 0;
   background-color: var(--foot);
   cursor: pointer;
 }
 
 details > p {
   background-color: var(--fondo);
   padding: 2px 2em;
   margin: 0;
 }

 tachon {
   text-decoration:line-through;
   color: darkred;
 }

 table {
   vertical-align:top;
   border: 1px solid var(--top);
   border-collapse:collapse ;
   font-size: 85%;   
   width:90%; 
 }

 td, th {
   vertical-align:top;
   border: 1px solid var(--top);
   padding-left: 2em;
   text-align: left;
 }

 th {
   background-color: var(--top);
   color: white;
 }

 /* SCROLLBAR */
 /* width */
::-webkit-scrollbar {
   width: 15px;
 }
 
 /* Track */
 ::-webkit-scrollbar-track {
   box-shadow: inset 0 0 5px grey; 
   border-radius: 10px;
 }
  
 /* Handle */
 ::-webkit-scrollbar-thumb {
   background: #3a76a5; 
   border-radius: 10px;
 }
 
 /* Handle on hover */
 ::-webkit-scrollbar-thumb:hover {
   background: #3a76a5; 
 }