body {
  background-color: #161224; /* Deep cosmic indigo-black */
  background-image: url('../images/fondo_purplestars.gif');
  background-position: top;
  background-attachment: fixed; 
  font-size: 24px; 
  font-family: "Jersey 10", sans-serif;
  color: #393566; /* Rich, saturated purple-blue for highly legible body text */
  margin: 0;
}

p {
  line-height: 1em; 
}

/* Saturated periwinkle-blue dashed divider */
hr {
  border: none;
  border-top: 4px dashed #7a8ae6;
  margin: 1em 0;
}

img {
  max-width: 100%;
  height: auto;
  margin-top: 0.2em;
  margin-bottom: 0.2em;
}

.right {
  float: right;
  margin-left: 1em;
}
.left {
  float: left;
  margin-right: 1em;
}
.center {
  display: block;
  margin-right: auto;
  margin-left: auto;
  text-align: center;
}

@media only screen and (min-width: 600px) {
  .small {
    max-width: 60%;
    height: auto;
  }
}

.caption {
  margin-top: 0;
  font-size: 0.85em;
  font-style: italic;
  color: #635cb3; 
}

a {
  color: #5342e6; /* Vivid purple-blue links */
  text-decoration: none;
}

a:hover { 
  background-color: #e4e1ff;
  border-radius: 4px;
}

h1, h2, h3, h4, h5 {
  font-family: "Jersey 10", sans-serif;
  color: #251b66; /* Deep, vivid midnight blue */
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}

#container {
  margin: 3em auto;
  width: 90%;
  max-width: 700px;
  background-color: #f5f6fc; /* Bright, clean periwinkle-tinted white */
  
  /* Thick stylized border layout */
  border: 5px solid #1a1240; 
  border-radius: 16px; 
  box-shadow: 8px 8px 0px #4d42a6; /* Dark blue-violet block shadow */
  overflow: hidden; /* Keeps the top banner corners rounded along with the container */
}

#content {
  padding: 15px 6% 25px 6%;
}

#header {
  background-color: #4d42a6; /* Vibrant royal indigo bar */
  padding: 0; /* Removed padding so the banner image fits perfectly flush */
  border-bottom: 5px solid #251b66; 
}

/* Banner layout rule */
.header-banner {
  display: block;
  width: 100%; /* Spans completely from edge to edge */
  height: auto;
  border: none !important; /* Overrides global content image borders */
  border-radius: 0 !important;
  margin: 0;
}

/* Padded navigation wrapper inside the header */
#header ul {
  list-style-type: none;
  padding: 1.2em 6%; /* Cushioning moved here to space out buttons from the banner */
  margin: 0;
  text-align: center; /* Centers your navigation buttons neatly */
}

#header li {
  font-size: 1.1em;
  display: inline-block;
  margin-right: 0.8em;
  margin-bottom: 0.3em;
}

/* Defined, stylized purple-blue navigation buttons */
#header li a {
  color: #251b66;
  text-decoration: none;
  background-color: #e4e1ff; /* Light periwinkle button face */
  padding: 0.4em 0.8em;
  display: inline-block;
  
  /* Button border and 3D flat shadow */
  border: 3px solid #251b66;
  border-radius: 8px;
  box-shadow: 4px 4px 0px #251b66;
  
  /* Snappy arcade/pixel style transitions */
  transition: transform 0.1s ease, box-shadow 0.1s ease, background-color 0.1s ease;
}

/* Tactile "Pressed Button" effect on hover */
#header li a:hover {
  background-color: #ffffff;
  text-decoration: none;
  transform: translate(3px, 3px); 
  box-shadow: 1px 1px 0px #251b66; 
}

#postlistdiv ul,
#recentpostlistdiv ul {
  font-size: 1.1em;
  padding: 0;
  list-style-type: none;
}

.moreposts {
  font-size: 0.85em;
  margin-top: 0.4em;
}

#nextprev {
  text-align: center;
  margin-top: 1.6em;
}

#disqus_thread {
  margin-top: 1.6em;
}

#footer {
  font-size: 0.85em;
  color: #635cb3;
  padding: 0 6% 20px 6%;
  border-top: 4px dashed #dbdef5;
  margin-top: 2em;
  padding-top: 1em;
}