/* 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." */
body {
  margin: 0;
  font-family: sans-serif;
  background: rgb(6,99,170);
  /* 1. Ruta de la imagen */
    background-image: url('headerr.jpg'); 

    /* 2. Centra la imagen y evita que se repita */
    background-size: cover;       /* Ajusta la imagen para que cubra todo el espacio */
    background-position: center;  /* Centra la foto */
    background-repeat: no-repeat; /* Evita que la imagen se duplique como mosaico */

    /* 3. Tamaño del contenedor (opcional) */
    min-height: 800px;            /* Le da altura para que la imagen se luzca */
    
    /* 4. Estética extra */
    justify-content: center;
    display: flex;
    flex-direction: column; /* Pone el h1 arriba y el nav abajo */
    align-items: stretch;    /* Centra todo horizontalmente */
}

.site-header {
    display: flex;
    flex-direction: column; /* Pone el h1 arriba y el nav abajo */
    align-items: center;    /* Centra todo horizontalmente */
    padding: 50px;
    background-color: rgba(6,99,170,0.7);
    color: white;
}

.top-nav a {
    color: #ffca28;
    margin: 0 15px;
    font-size: 1.2rem;
    text-decoration: none;
}

/* layout principal */
.layout {
  display: flex;
  padding: 20px;
  gap: 20px;
}

/* Diario creativo */
.main-section {
  flex: 3;
  background: rgb(174,183,25);
  padding: 15px;
  border-radius: 20px;
  border: 1px solid rgb(174,183,25);
  
}

article {
  background: rgb(207,221,157);
  padding: 15px;
  margin-top: 10px;
  border-radius: 20px;
  border: 1px solid rgb(207,221,157);
}

.article-content {
  display: flex;
  gap: 10px;
}

.article-content p {
  flex: 2;
  background: #ffb3c1;
  padding: 10px;
}

aside {
  flex: 1;
  background: #ff8fa3; 
  padding: 10px;
}

/* sección navegacion */
.side-section {
  flex: 1;
  background: #ff8fa3;
  padding-left: 20px;
  font-size: 1.2rem;
  border-radius: 20px;
  border: 1px solid #ff8fa3;
}

.side-nav ul {
  list-style: none;
  padding-left: 20px;
  padding-right: 20px;
  
}

.side-nav li {
  margin-bottom: 20px;
}

.side-nav a {
    text-decoration: none;    /* Quita el subrayado */
    color: #590d22;              /* Color de la letra */
    font-weight: bold;        /* Negrita */
    font-size: 1rem;        /* Tamaño */
    padding: 8px 12px;        /* Espacio para que sea fácil clickear */
    display: inline-block;    /* Permite que el padding funcione bien */
    transition: color 0.1s;   /* Animación suave */
}

/* Cambio de color al pasar el mouse */
.side-nav a:hover {
    color: #fff0f3; 
}

/* footer */
.sitefooter {
  background: rgba(6,99,170,0.7);
  padding: 20px;
  text-align: center;
  font-family: sans-serif;
}