html {
   /* Imagen de estrellas en mosaico para el fondo de toda la página */
	background: url("/imagenes/stars.gif") repeat;
}

body {
  /* Centrar el body en la pantalla y especificar dimensiones */
  max-width: 100ch;
  margin: auto;
  min-height: 100vh; /* Como mínimo el largo de una pantalla entera */
  
  /* Color de fondo y sombra */
  background-color: rgba(26, 1, 38, 0.8); /* Violeta oscuro transparente */
	box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.33);
	
	/* Estilo básico del texto: fuente, color, brillo e interlineado */
  text-shadow: 1px 1px 1.25px #f2aee4;
	color: #d1b5dd;
	font-family: "Arial",sans-serif;
	line-height: 1.5;	
}

/* -- Misc. ------------------------------------------------------------

   Acá van cosas generales del sitio, como el estilo de los links, por
   ejemplo. Van al principio de todo para que sean las reglas con menos
   prioridad. Eso sirve para que si alguna regla más especifica quiere
   modificar algo de acá, que tenga prioridad ella.
   
   Por ejmplo, en esta sección se modifica el bullet de los items de
   lista para que sean un "♥", pero los articulos, en su sección de
   categorías abajo de todo, también usan una lista, y esa lista no
   tiene que tener ningún bullet, no un "♥". Si esta regla del "♥" no
   estuviera al principio, pisaria esa regla de las categorías.
*/
ul { 
  list-style-type: "♥ "; 
}

a {
  color: #f986e2;
  text-shadow: 1px 1px 2px #f2aee4;
  text-decoration: none;
}

a:hover {
  text-shadow: 0 0 5px #f2aee4;
}

hr {
  height: 10px;
  border: 0;
  box-shadow: 0 10px 10px -10px #df99e5 inset;
}

li {
  margin-bottom: 0.66em;
}

/* -- Main -------------------------------------------------------------

*/
main {
  padding: 2em;
  border-left: 2px dashed #df99e5;
  overflow: auto;
  min-height: 100vh;
}

main h2 {
  display: inline;
}

/* -- Header -----------------------------------------------------------

   El header se usa para el título principal de la página en el index,
   que es un h1 con unas gifs a los costados.
*/
header {
  overflow: auto;
  padding: 2em;
  
  border-left: 2px dashed #df99e5;
  
  text-align: center;
}

/* Para que el título pueda estar en el mísmo renglón que los gifs */
header h1 {
  display: inline;
}

/* Para que los gif a los costados del título esten centrados y sean chiquitas */
header img {
  width: 5em;
  vertical-align: middle;
}

/* -- Nav --------------------------------------------------------------

   Nav es la barra de navegación a la izquierda de todas las páginas.
   Tiene los links de navegación de la página y los links a las páginas
   de cada categoría.
*/
nav {
  overflow-x: hidden; /* Deshabilitar scroll horizontal */
  float: left;
  
  height: 100%;
  padding: 1em;
  padding-right: 1em;
  margin-right: 1em;
}

nav h3 {
  margin-top: 0;
}

/* Para que el gif de arriba de todo siempre ocupe todo el ancho */
nav img {
  max-width: 9em;
}

/* Para que los links se vean un poco más chicos que el resto del texto */
nav li {
  font-size: smaller;
}

/* -- Article ----------------------------------------------------------

*/
article figure {
  margin: auto;
  text-align: center;
}

article figure img {
  max-width: 100%;
  max-height: 50vh;
}

article figcaption {
  font-style: italic;
  font-size: smaller;
}

article.entrada img.nuevo-post {
  width: 3em;
  vertical-align: middle;
  float: right;
}

article.entrada a.more {
  font-size: smaller;
}


article h3.categorias {
  font-size: smaller;
  display: inline;
}

article ul.categorias {
  list-style: none;
  display: inline;   
  padding-left: 0;
}

article ul.categorias li {
  display: inline;
  font-size: smaller;
}