* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    color: #ffffff;
}

body{
    background-image: url(images/background1.jpg);
}

hr{
    margin: 8px 0 8px 0;
}

/*CSS DEL MARQUEE*/

.marquee-container {
    width: 100%;
    overflow: hidden;
    position: relative;
    height: 2em; /* Ajusta según el tamaño del texto */
}

#topMarquee {
    display: inline-block;
    white-space: nowrap;
    margin: 4px 0;
    animation: scroll-left 12s linear infinite;
    padding-left: 100%; /* Empieza fuera del contenedor */
    box-sizing: content-box;
}

@keyframes scroll-left {
0% {
    transform: translateX(0%);
    }
100% {
    transform: translateX(-100%);
  }
}

/*FIN - CSS DEL MARQUEE*/

#pageContainer{ /*El contenedor de toda la pagina*/
    width: 900px;
    margin: 0 auto;
}

header img{
    display: inline-block;
    margin: 0 auto;
}

#mainNav{
    background-image: url(images/navBackground.jpg);
    padding: 4px;
    user-select: none;
}

#mainNav ul li{
    display: inline-block;
    background-color: #0038d5;
    padding: 2px 10px 2px 10px;
    font-family: sans-serif;
    font-weight: bold;
    border: outset 2px #acafff;
}

#mainNav ul li:hover{
    background-color: #001f74;
}

#mainNav ul li a{
    text-decoration: none;
    font-family: Comic Sans MS, Helvetica, sans-serif;
}

#mainContent{ /*El flex-container que esta debajo del nav*/
    background-color: red;
    display: flex;
}

#featuredBlock{
    background-color: rgb(164, 195, 255);
    /*margin-top: 6px;*/
    padding: 4px;
    padding-bottom: 8px;
    display: inline-block;
    /*width: 740px;*/
    width: 100%;
    color: #000 !important;
}

#featuredBlock-topText{ /*Esto seria para el texto que dice "Articulo destacado" o "Lo ultimo"*/
    margin-bottom: 10px;
}

#featuredBlock-title{ /*Esto seria el titulo del articulo destacado*/
    display: inline-block;
    margin-right: 10px;
}

#featuredBlock img{
    max-width: 800px;
    display: block;
    margin: 4px auto 4px auto;
    width: 50%;
}

.imgFooter{
    background-color: #d5d5d5;
    color: #000;
    display: inline-block;
    width: 50%
}

#asideBlock{
    width: 160px;
    background-color: #5050ff;
    padding: 8px;
}

#asideBlock h2, #asideBlock a{
    font-family: Comic Sans MS, Helvetica, sans-serif;
}

#asideBlock ul li{
    margin-left: 12px;
}

#featuredBlock h1, #featuredBlock h2, #featuredBlock p, #featuredBlock b, #featuredBlock i{
    color: #000;
    font-family: 'Times New Roman', sans-serif;
}

#featuredBlock a{
    color: #0000e2;
}

blockquote, .epigraph{ /*Estos son los epigrafes*/
    background-color: #616161;
}

footer{
    text-align: center;
    margin-top: 6px;
    margin-bottom: 6px;
}

/*APARTADO DEL BLOG*/

.articleList-year{
    font-family: Times New Roman, Helvetica, sans-serif !important; 
}

/*APARTADO DE GALERIA*/

.galleryImageContainer{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    border: 1px solid black;
}

.galleryImageContainer a{
    margin: auto;
}

.galleryImageContainer img{
    max-height: 200px;
    border: 1px solid black;
}

.articleLink{
    display: block;
}

/*PD: El CSS y la estructura de la pagina (IDs y Clases) esta hecha como el orto, tengo que aprender a organizarlo, en resumen: Aprender a
 * hacer paginas como la gente*/