/* Animations */
@keyframes appear {
	from {transform: translate(25%, 0%); opacity: 0;}
	to {transform: translate(0%, 0%); opacity: 1;}
}

@font-face {
  font-family: cairo;
  src: url(font/Cairo.ttf);
}
:root {
  --bg: #000000;    /* Background */
  --fg: #ffffff;    /* Foreground */
  --div: #0a0a0a;   /* Div */
  --divb: #1f1f1f;  /* Div border */
  --divind: #0a0aaa; /* Div index */
  --divbhl: #2a2a2a;    /* Div border highlight */
}
/* html components */
body { 	
		font-family: cairo;
		width:1000px;
		margin:auto;
		background-color: var(--bg);
		background-image: url("img/0/fondo.png");
		background-position:top; 
		background-attachment:fixed; 
		background-repeat: no-repeat;
		background-size: cover;
	}

img { width: 100%;
	display:block;
	margin-left: auto;
	margin-right: auto;
	}

ol {

}

a {
	text-decoration:none;
}
/* unvisited link */
a:link {
  color: var(--fg);
}

/* visited link */
a:visited {
  color: var(--fg);
}

a:hover {
	text-decoration:underline;
}
/* Id */

#indice{
	width: 200px;
	float:left;
	position:fixed;
	top:10px;
	background-color: var(--div);
	color: var(--fg);
	padding: 0.5em;
	border: 5px solid var(--divb);
	}

#contenido {
	width:700px;
	text-align:justify; 
	float:right;
	margin-top:10px;
	color: var(--fg);
	}

#supertitulo {
	background-color: var(--div);
	padding:10px; 
	font-size:30px; 
	text-align:center;
	border: 5px solid var(--divb);
	}

#subsupertitulo {
	padding: 1em;
	font-size: medium;
	text-align:justify;
}
#home {
	font-size:30px;
	text-align: center;
}
/* Class */
.capitulo {
	opacity: 0;
	background-color: var(--div);
	margin-top:20px;
	padding: 1em;
	border: 5px solid var(--divb);
	animation: appear 1s 1;
	animation-fill-mode: forwards;
	}

.titulo {
	font-size:25px; 
	text-align:center;
	}

.imagen{
	float:right; 
	padding:30px;
	text-align:center;
	}

.imgndesc { /* image and description */
	text-align: center;
	width: 65%;
	margin-left: auto;
	margin-right: auto;
	margin-top: 1em;
	margin-bottom: 1em;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.6), 0 6px 20px 0 rgba(0, 0, 0, 0.3);
	border-color: var(--divb);
}

.desc {
	padding: 0.5em 1em;
}