/**************************************************/
/******************* RESETEADOR *******************/
/**************************************************/

/* http://meyerweb.com/eric/tools/css/reset/ v2.0 */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

/* Old browsers / Para viejos exploradores */

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}

body {
    line-height: 1.5;
}

ol, ul {
    list-style: none;
}

blockquote, q {
    quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

/**************************************************/

body * {
  font-family: AlegreyaSansRegular, sans-serif;
  line-height: 1.15;
  font-weight: normal;
  font-style: normal; 
}

body b {
  font-family: "AlegreyaSansBold", sans-serif;
  font-weight: bold;
  font-style: normal;
}

body i {
  font-family: "AlegreyaSansItalic", sans-serif;
  font-weight: normal;
  font-style: italic;
}

body a {
  text-decoration: none;
}

body span.icon {
  padding-right: .25rem;
}

header {
  width: 100%;
  height: 20rem;
  background-image: url('../img/banner_color.jpg');
  background-position: bottom;
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  align-items: center;
  justify-content: center;
}

header > img {
  display: block;
  height: 200px;
  width: auto;
  margin: auto;
}

nav, footer {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
  background-color: #e5582d;
  color: white;
  padding: 1rem;
}

nav {
  margin-bottom: 2rem;
  font-size: 1.25rem;
}

nav a, footer a {
  color: white;
}

nav li {
  display: inline;
}

nav li:not(:first-of-type) {
  margin-left: 1rem;
}

nav input#search-bar {
	display: inline-block;
	border-radius: 1rem;
	padding: .15rem .5rem;
	border: none;
	width: 200px;
	box-sizing: border-box;
	color: #2e2e2e;
}

nav input#search-bar:focus {
  outline: none;
}

section {
  max-width: 40rem;
  margin: auto;
  padding: 0 1rem;
  font-size: 1.15rem;
}

section > h1 {
  font-size: 2rem;
  margin-top: 2rem;
}

section > h1 + p {
  margin-top: 1rem;
}

li.link {
  scroll-margin-top: 5rem;
  padding-top: 1rem;
}

li.link:not(:first-of-type) {
  margin-top: 1rem;
}

li.link + li.link {
  border-top: 1px dashed black;
}

li.link h1 {
  font-size: 1.5rem;
}

li.link a.anchor {
  font-size: 1rem;
  position: absolute;
}

li.link p.description,
li.link p.tags,
li.link p.dates {
  color: gray;
}

li.link a.name,
li.link p.description,
li.link p.tags,
li.link p.dates,
li.link p.social,
li.link summary {
  margin-left: 2rem;
}

li.link p.description:before,
li.link p.tags:before,
li.link p.dates:before,
li.link p.social:before,
li.link summary:before {
  position: absolute;
  margin-left: -2rem;
}

li.link p.description:before {
  content: "📝";
}

li.link p.tags:before {
  content: "🏷️";
}

li.link p.dates:before {
  content: "📅";
}

li.link p.social:before {
  content: "🪁";
}

li.link summary:before {
  content: "👁️";
}

li.link span.created:before {
  content: "Creado: ";
}

li.link span.updated:before {
  content: "Actualizado: ";
  padding-left: 1rem;
}

li.link p.social a:not(:first-of-type) {
  padding-left: 1rem;
}

li.link summary {
  list-style-type: none;
  margin-left: 0;
}

li.link p.social a,
li.link summary {
  cursor: pointer;
  color: blue;
}

li.link div.info {
  margin-top: 1rem;
}

li.link a.link {
  display: table-cell;
  padding-right: .5em;
}

details {
  padding-left: 2rem;
}

details h1, details h2 {
  margin: 1rem auto;
}

details h1:before, details h2:before {
  color: #e5582d;
}

details h1:before {
  content: "# ";
}

details h2:before {
  content: "## ";
}

details h3:before {
  content: "### ";
}

details p + p {
  text-indent: 1rem;
}

footer {
  margin-top: 2rem;
  padding: 1em 25%;
  text-align: center;
}