* { 
  margin: 0; 
  padding: 0; 
  box-sizing: border-box; 
}

@font-face {
  font-family: dos;
  src: url("../fonts/dos.ttf");
}

@font-face {
  font-family: VGA8;
  src: url("../fonts/nuevaibm.otf");
}

@font-face {
  font-family: calc;
	src: url('../fonts/st6x8.ttf');
	font-weight: normal;
	font-size: 16px;
}

@font-face {
  font-family: iosevka;
  src: url('../fonts/iosevka.ttf');
  font-weight: normal;
  font-size: 12px;
}

@font-face {
  font-family: computer;
  src: url('../fonts/cmunorm.ttf');
}


body {
  font-family: iosevka;
  font-size: 13px;
  background: #ffffff;
  max-width: 900px;
  margin: 0 auto;
}

/*********************************************************************************
 *** CABECERA                                                                  ***
 *********************************************************************************/
header {
  display: block;
  position: relative; /* Es necesario para que el texto se centre en la imagen */
  width: 100%;
}
header img {
  display: block;
  width: 100%;
  margin: 0 auto;
}
header .title {
    /* centra la imagen */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    color: white;
    text-shadow: 1px 1px black;
    font-size: 1.5em;
}
/*********************************************************************************
 *** MENU                                                                      ***
 *********************************************************************************/

#botonMenu {
  display: none;
}
nav {
  overflow: hidden;
  background-color: #333333;
  margin-bottom: 2em;
}
nav a {
	float: left;
	display: block;
	color: #f2f2f2;
	text-align: center;
	padding: 14px 16px;
	text-decoration: none;
}
nav a:hover {
	background-color: #dddddd;
	color: black;
}
nav label {
	float: right;
	display: none;
	color: #f2f2f2;
	text-align: left;
	padding: 14px 16px;
	font-weight: bold;
}
nav label:hover {
    background-color: #dddddd;
	color: black;
}
footer {
	padding: 12px;
	text-align: center;
	background: #333333;
	margin-top: 2em;
	
}

/******************************************************************************
 *** EL ARTICULO                                                            ***
 ******************************************************************************/
.content {
  display: table;
  content: "";
  clear: both;
}

section {
  display: block;
  width: 70%;
  float: left;
}

aside {
  display: block;
  width: 30%;
  float: left;
  padding: 0 1em;
}

article {
  padding: 1em;
  background-color: #f8f8f8;
  margin-bottom: 2em;
}

/* cabecera del post */
.post-header h3 {
  display: inline-block;
  font-weight: normal;
  font-size: 1em;
  float: left;
}

.post-header p {
  display: inline-block;
  font-size: 0.9em;
  float: right;
  color: #666;
}

.post-header {
  display: block;
  border-bottom: 1px solid #ccc;
}

.post-header:after {
  display: table;
  content: "";
  clear: both;
 }

/* IMAGEN Y DESCRIPCION */
.post-header h1, 
.post-header h2, 
.post-header h3, 
.post-header h4, 
.post-header h5 {
  display: block;
  text-shadow: 1px 1px 3px #666;
  font-weight: normal;
  font-size: 1em;
}

.post-description {
  margin: 1em 0;
  overflow: hidden;
}
.post-description-image {
  width:  150px;
  height: 150px;
  float: left;
  display: block;
}

.post-description-short {
  padding-top: 1em;
  padding-left: 1em;
  display: block;
  overflow: hidden;
  text-align: justify;
}

.post-description:after {
  display: table;
  clear: both;
  content: "";
}

.post-body-tags {
  margin-top: 1em;
  margin-bottom: 1em;
}


/******************************************************************************
 *** CUERPO DEL CONTENIDO ***
 *****************************************************************************/

.post-body-content {
}

.post-body-content img {
  display: block;
  margin: 1em auto;
  max-width: 100%; 
 }

.post-body-content .icono {
  display: inline;
  vertical-align: middle;
  margin: 0 1em;
}

.post-body-content video {
  display: block;
  margin: 1em auto;
  max-width: 100%;
}

.post-body-content p{
    margin: 1em 0;
	text-align: justify;
}

.post-body-content h1, 
.post-body-content h2, 
.post-body-content h3, 
.post-body-content h4, 
.post-body-content h5 {
  display: block;
  text-shadow: 1px 1px 3px #666;
  font-weight: normal;
  margin: 1em 0;
  border-bottom: 1px solid rgba(0,0,0,0.2);
}
.post-body-content h1 { font-size: 1.2rem; }
.post-body-content h2 { font-size: 1.0rem; margin-top: 1em; margin-bottom: 1em; }
.post-body-content h3 { font-size: 0.8rem; }
.post-body-content h4 { font-size: 0.8rem; }
.post-body-content h5 { font-size: 0.6rem; }

.post-body-content ol,
.post-body-content ul {
  list-style-position: inside;
  list-style-type: none;
  margin-top: 1em;
  margin-bottom: 1em;
}

.post-body-content li {
  margin-left: 1em;
  margin-bottom: 1em;
}

.post-body-content li:before {
  /* content: '\203A\203A'; */
  content: '*';
  margin-right: 1em;
}

.post-body-content blockquote {
  display: block;
  margin: 1em;
  padding: 1em;
  border-left: 5px solid black;
  background-color: #fff;
  text-align: justify;
  font-size: 0.9em;
}

.post-body-content b {
  color: blue;
  text-shadow: 1px 1px 1px rgba(0, 0, 128, 0.3);
  font-weight: normal;
}

.post-body-content table {
  width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
}

.post-body-content td, th {
  border-bottom: 1px solid #ccc;
  padding: 0.3em;
}

.post-body-content th {
  background-color: #3a3b3c;
  color: white;
  font-weight: 400;
  text-align: left;
}

.post-body-content tr:nth-child(odd) {
  background-color: #fafbfc;
}

.post-body-content button {
  font-family: dos;
  font-size: 14px;
  padding: 0.5em;
}
.post-body-content pre {
  font-family: VGA8;
  font-size: 14px;
  display: block;
  overflow: auto;
  width: 100%;
  max-height: 24em;
  background-color: #282C34;
  color: #ccc;
  padding: 0.5em;
  margin: 1em auto;
}

.post-body-content p.pmargen {
  margin: 0.5em 0;
  text-align: justify;
}

.post-body-content .string       { color: #C678DD; }
.post-body-content .lineComment  { color: #AAAAAA; }
.post-body-content .blockComment { color: #AAAAAA; }
.post-body-content .macro        { color: #65AC78; }
.post-body-content .reserved     { color: #3070D1; }
.post-body-content .function     { color: #FF8400; }
.post-body-content .number       { color: #E5C07B; }
.post-body-content .definedMacro { color: #8080FF; }



/*****************************************************************************
 *** COMENTARIOS DEL POST ***
 ****************************************************************************/
.post-comment input[type=text],
.post-comment textarea 
.post-comment input[type=submit] {
  display: block;
  width: 100%;
  padding: 0.25em;
  margin-bottom: 1em;
  font-family: dos;
  font-size: 14px;
 }

.post-comment label {
  display: block;
 }

.button {
  display: inline-block;
  text-decoration: none;
  background-color: #333333; 
  color: white;
  padding: 0.5em;
}

.button:hover{
  background-color: #ccc;
  color: black;
}

/* BOTONERA */
.to-left {
  float: left;
}
.to-right {
  float: right;
}
.keypad:after {
  display: table;
  clear: both;
  content: "";
}

.tag {
  display: inline-block;
  text-decoration: none;
  padding:3px;
  color: black;
  background-color: #aaa;
  margin-bottom: 3px;
}

.tag:hover {
  background-color: #000;
  color: white;
}

aside h3, .post-comment h3 {
  font-size: 1em;
  font-weight: normal;
  padding: 0.5em;
  background-color: #333333;
  color: white;
  margin-bottom: 1em;
}
.aside-item {
  display: block;
  margin-bottom: 2em;
 }

/******************************************************************************
 *** ARBOL DE ARCHIVOS                                                      ***
 ******************************************************************************/
.arbol-archivos ul { 
	list-style-type: none;
    list-style-position: inside;
}

.arbol-archivos .hijo li {
  margin-left: 1em;
}

.nodo {
  cursor: pointer;
  user-select: none;
}

.nodo:before {
  content: "\25B6";
  font-size: 0.8em;
  display: inline-block;
}

.nodo-abajo::before {
  transform: rotate(90deg);
}

.hijo {
  display: none;
}

.hijo-activo {
  display: block;
}

.arbol-archivos a{
  display: block;
  margin: 0.5em 0; 
  color: rgba(0,0,255,0.80);
  text-decoration: none;
  background-color: rgba(128, 128, 128, 0.3);
  border-bottom: 1px solid rgba(0,0,0,0.3);
  padding: 4px;
}

.arbol-archivos a:hover {
  background-color: rgba(255,255,255,0.80);
  transition: 0.5s;
}


/******************************************************************************
 *** Un slide                                                               ***
 ******************************************************************************/

.slideshow-container {
  max-width: 100%;
  position: relative;
  margin: auto;
}
.mySlides { 
  display: none;
}
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}
.active, .dot:hover {
  background-color: #717171;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}


/******************************************************************************
 *** CUANDO HACEMOS LA PANTALLA PEQUEÑA                                     ***
 ******************************************************************************/

@media screen and (max-width: 700px) {
	/* Mostramos la etiqueta (el menu) */
	nav label {
		display: block;
		width: 100%;
		text-align: right; /* Para que se muestre a la derecha */
	}
	nav label : hover {
		background-color: #ddddddd;
		color: black;
	}

	/* Todos los enlaces después del boton y en el nav */
	nav #botonMenu:checked ~ a   {
		display: block;
		width: 100%;
	}

	nav #botonMenu:not(checked) ~ a {
		display: none;
	}

	section {
	  width: 100%;
	  float: none;
	}
	aside {
	  width: 100%;
	  float: none;
	}
	
    .post-body-content {
	  width: 100%;
      display: grid;
	}
 

    .post-header h3 {
	  text-align: justify;
	}

	.post-description-image {
	  max-width: 100%;
	  width: auto;
	  height: auto;
	  margin: 0 auto;
	  display: block;
	  float: none;
	}

	.post-body-content pre {
		max-width: calc(100vw - 2em);
	}
	.post-description-short {
	  padding: 1em 0;
	}
}

/*
 * CALCULADORAS
 */

.calculadora {
  font-size: 16px;
  font-family: calc;
  background-color: #ffffff;
  display: block;
  max-width: 240px;
  border: 1px solid black;
  margin: 1em auto;
}

.calculadora h3 {
  display: block;
  text-align: center;
  background-color: #000000;
  color: #ffffff;
  margin-top: 0px;
  margin-bottom: 1em;
  padding-bottom: 4px;
  font-size: 16px;
}

.calculadora img {
  display:block;
	margin: 0 auto;
}

.calculadora table {
  width: 90%;
	margin: 1em;
	font-size: 16px;
}

.calculadora table td {
  border:0;
	background-color: #fff;
}

.calculadora  input[type=button] {
	border: 1px solid black;
	padding: 4px;
	text-decoration: none;
	width: 100%;
	font-family: calc;
	font-size: 16px;
}
.calculadora  input[type=text] {
  font-family: calc;
	font-size: 1em;
}

.calculadora input[type=number] {
	font-family: calc;
	font-size: 1em;
}


.rojo    { color: #FF0000; }
.verde   { color: #00FF00; }
.azul    { color: #0000FF; }
.marron  { color: #804000; }
.naranja { color: #FF8400; }

.equation {
  display: inline-block;
  padding: 10px;
  border: 1px solid black;
}

.aside-item iframe {
  display: block;
  width: 100%;
  border: none;
}

.aside-item .siframe {
  display: block;
  border: none;
  width: 100%;
  height: 480px;
  overflow: hidden;
}
/* Para ecuaciones */
.latexequation {
  display: flex;
  border: none;
  justify-content: center;
  align-content: center;
}
math {
  font-size: 1.5em;
}