/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

* {
  box-sizing: border-box;
}

header {
  background-color: transparent;
  text-align: center;
  padding: 10px;
  width: 90%;
}

.header {
    font-family: 'Workbench', monospace; 
    font-size: 3em; 
    text-align: center;
    margin-top: 40px; 
    margin-bottom: 1px;
}

.letra-chica {
  text-align: center;
  text-indent: 10px;
  color: #2b1218;
  font-family: Verdana, Arial, sans-serif;
  font-size: 0.8em;
  padding: 0;
  margin: 0;
  margin-bottom: 10px;
}

/*acá empieza lo que refiere a la barra*/

.navbar {
  margin: auto;
  width: 70%;
  background-color: #ffcfdb;
  overflow: auto;
}

.navbar a {
  font-family: "Courier New", monospace;
  font-weight: bold;
  float: left;
  padding: 12px;
  color: #2b1218;
  text-decoration: none;
  text-transform:lowercase;
  font-size: 1.3em;
}

.navbar a:hover {
  text-transform:uppercase;
}

.active {
  background-color: #ffcfdb;
  text-transform: uppercase;
}

.editorial{background-color: #f1f1f1}

.apuntes {background-color: #ffcfdb}

.entrevistas {background-color: #abddfe}

.etcetc {background-color: #a79ecd}

@media screen and (max-width: 500px) {
  .navbar a {
    float: none;
    display: block;
  }
}

/*esto lo necesito para ver si la puedo centrar!!*/
.center {
  margin: auto;
  width: 70%;
  padding: 10px;
}

/*nada más refiere a la barra*/

body {
  background-color: #ffcfdb;
  color: #2b1218;
  font-family: Verdana, Arial, sans-serif;
  width: 60%;
  margin: auto;
}

/* Create two equal columns that floats next to each other */
.column {
  float: left;
  width: 50%;
  padding: 0
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }

footer {
  background-color: transparent;
  text-align: center;
  padding: 8px;
}

/* estos códigos refieren todos a títulos, párrafos etc */

h1 /* para títulos */ {
  font-family: 'Times New Roman', serif;
  text-align: left;
  color: #2b1218;
  margin-bottom: 20px;
  font-size: 2em;
}

h2 /* para highlights */ {
  font-family: 'Times New Roman', serif;
  text-align: left;
  background-color: snow;
  color: #2b1218;
  margin-bottom: 20px;
  width: 60%;
  font-size: 1.5em;
}

p /* texto normal */ {
  text-align: left;
  text-indent: 50px;
  color: #2b1218;
  font-family: Verdana, Arial, sans-serif;
  font-size: 1em;
}

a:link /* links */ {
  font-family: 'Courier New', monospace;
  color: #2b1218;
  font-weight: bold;
  text-decoration-line: underline;
}

a:hover {
  font-family: 'Courier New', monospace;
  color: #2b1218;
  font-weight: bold;
  text-decoration-line: underline;
  text-decoration-style: dashed;
}

a:visited {
  font-family: 'Courier New', monospace;
  color: #2b1218;
  font-weight: bold;
  text-decoration-line: underline;
  text-decoration-style: dashed;
}

.broider {
    border-image:  url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFQAAABUCAYAAAAcaxDBAAACA0lEQVR4Xu3c266CMBSEYXz/h/aQeNMl6XRcI8Twm+yrLtryMe1GNN62bbs//3iFBG6AhiTf3QCa9dwAPQD0hdx5dfdkd/yjx6s2w/h7CXVPaDrAF1fGHR9QgQxoATo6MUeP117y7oTdhHW3jLPHs/dQQMdLXi8goM0tClDxT7C7AtsJ7e5ZX9xJnXpIBY8nFNDx+pJQM+8k1ART5YAqIbMdUBNMlQOqhMx2QE0wVd4GrQNc7TbJBR7qV57YAzq579xLn3rrBSigatW22qcBZMn7toD6ZtMjAAU0LBDujoQCGhYId0dCAQ0LhLsjoYCGBcLdkVBAwwLh7uyETj93fk7uak+f2g+YAZ0/ruOLDs0lT0KbgPVwQAENC4S7I6GAhgXC3ZFQQMMC4e5IKKBhgXB37YTW+Vztvbu6HvbDEUDnpICqyJntgJpgqhxQJWS2A2qCqXJAlZDZDqgJpsoBVUJmO6AmmCoHVAmZ7YCaYKocUCVktgNqgqlyQJWQ2Q6oCabKbVC+ijOSth8wAwqoWqWtdhLa4vs8GFBAwwLh7kgooGGBcHc/T6iab/dz/OmN887gZ483zHflN5j/7QTVBa/t3fMDtIgCWkD+bsn/egnV/l0gN2Hd8aZbxsoeCuhcwN5DAQXUyoC7xdhL3poNxaPAyg9hYWYIAGpgrZQCuqJk1DwAeIgAEFc+mREAAAAASUVORK5CYII=") 28 /  28px / 0 round;
    border-width:  28px;
    border-style:  solid;
}
}