/* Con "*" podemos poner una regla general a todos los elementos */
*{
    margin: 0px; /* Elimina los márgenes externos de todos los elementos */
    padding: 0px; /* Elimina los rellenos internos de todos los elementos */
}

body{
    background: lightgray; /* Establece el color de fondo del cuerpo del documento */
    font-family: Arial, Helvetica, sans-serif; /* Define la familia de fuentes para el texto */
}

#container{
    width: 1100px; /* Ancho del contenedor principal */
    margin: 0px auto; /* Centra el contenedor en la página */
    border: 1px solid black; /* Borde alrededor del contenedor */
}

header{
    background: red; /* Color de fondo para el encabezado */
    height: 100px; /* Altura del encabezado */
    width: 100%; /* El encabezado ocupa el 100% del ancho de su contenedor */
    margin: 0; /* Elimina cualquier margen externo del encabezado */
    text-align: center; /* Alinea el texto al centro */
    line-height: 100px; /* Alinea verticalmente el texto en el encabezado */
    color: white; /* Color del texto en el encabezado */
    border-bottom: 3px dashed black; /* Borde inferior del encabezado */
}

nav{
    background: lightblue; /* Color de fondo para la barra de navegación */
    height: 50px; /* Altura de la barra de navegación */
    border: 1px solid black; /* Borde alrededor de la barra de navegación */
}

nav ul li{
    float: left; /* Alinea los elementos de la lista hacia la izquierda */
    list-style: none; /* Elimina los estilos de lista predeterminados */
    margin: 10px; /* Margen alrededor de cada elemento de la lista */
    line-height: 30px; /* Altura de la línea para elementos de la lista */
}

/* Soluciona problemas de diseño causados por elementos flotantes */
.clearfix{
    clear: both; /* Evita que elementos flotantes interfieran con los elementos a su alrededor */
}

/* Estilos para el contenedor de los botones */
.contenedor-botones {
  background-color: #f5f5f5;   /* Fondo gris claro */
  border: 2px dashed #333;     /* Borde punteado */
  padding: 15px;               /* Espacio interno */
  margin-top: 10px; 
  margin-bottom: 10px;          
  width: fit-content;          /* Se ajusta al contenido */
  text-align: center;          /* Centra los botones dentro */
  border-radius: 8px;          /* Esquinas redondeadas */
  box-shadow: 2px 2px 8px rgba(0,0,0,0.2); /* Sombrita ligera */
}



#content{
    float: left; /* Alinea el contenido principal hacia la izquierda */
    width: 80%; /* Ancho del contenido principal */
    min-height: 500px; /* Altura mínima del contenido principal */
    background: green; /* Color de fondo del contenido principal */
}


/* Estilos básicos para los artículos */
.article {
    background: white;          /* Fondo blanco para diferenciar del content */
    border: 1px solid #ccc;     /* Borde gris claro */
    padding: 10px;              /* Espaciado interno */
    margin: 10px;               /* Espaciado externo entre artículos */
}

/* Título de los artículos */
.article h2 {
    font-size: 18px;            /* Tamaño de letra del título */
    color: black;               /* Color negro para el título */
    margin-bottom: 5px;         /* Espacio debajo del título */
}

/* Texto del artículo */
.article p {
    font-size: 14px;            /* Tamaño de letra del texto */
    color: #333;                /* Gris oscuro */
    line-height: 1.4;           /* Espaciado entre líneas */
}

/* Imagen dentro de los artículos */
.article img {
    max-width: 100%;            /* La imagen no se pasa del ancho del artículo */
    height: auto;               /* Mantiene proporciones */
    margin-top: 5px;            /* Espacio encima de la imagen */
}


img {
  max-width: 100%; /* nunca más grande que el contenedor */
  height: auto;    /* mantiene proporciones */
  display: block;  /* elimina espacios extra */
  margin: 0 auto;  /* centra la imagen */
}


aside{
    float: left; /* Alinea la barra lateral hacia la izquierda */
    width: 20%; /* Ancho de la barra lateral */
    min-height: 1229px; /* Altura mínima de la barra lateral */
    background: orange; /* Color de fondo de la barra lateral */
}

footer{
    background: black; /* Color de fondo del pie de página */
    color: white; /* Color del texto en el pie de página */
    text-align: center; /* Alinea el texto al centro en el pie de página */
    height: 50px; /* Altura del pie de página */
    line-height: 50px; /* Alinea verticalmente el texto en el pie de página */
}