*{
    box-sizing: border-box;
}
body{
    padding: 0;
    margin: 0;
    background-color: rgb(11, 11, 83);
}

header {
    background-color: #000000cc; /* Color de fondo */
    color: rgb(252, 252, 252);              /* Color del texto */
    padding: 2em 1em;        /* Espacio interno */
}

header h1 {
    font-size: 4em;           /* Tamaño de letra */
    text-align: center;        /* Texto centrado */
}
.container {
    width: 400px;           /* Ancho fijo */
    margin: 0 auto;         /* Centra el contenedor */
    
}

section article {
    background-color: #ffffff;    /* Fondo blanco */
    margin: 1em 0;            /* Margen arriba/abajo */
    border-radius: 0.5em;     /* Bordes redondeados */
    padding: 0.25em 0;        /* Relleno interno */
    cursor: pointer;           /* Cursor de "manito" */
}


section article h2, section article p, section article a {
    margin: 1em;           /* Margen en todos los lados */
    text-decoration: none;
    color: black;
}



/* MENU */
.navegacion {
    display: flex;
    justify-content: center;
    gap: 3em;
    align-items: center;
    padding: 15px 40px;
    background-color: rgb(34, 10, 143);
    width: 80%;
    margin: 0 auto;
}


/*menu principal*/
.menu_principal ul{
    display: flex;
    gap: 20px;
    list-style: none;
}


.menu_principal a {
    color: rgb(240, 240, 240);
    text-decoration: none;
    font-size: 2em;
    padding: 8px 15px;
    border-radius: 6px;
    transition: 1s;
    
    
}


.menu_principal .active {
    border: 1px solid rgba(239, 243, 23, 0.842);
    background: rgba(0, 0, 0, 0.884);
    color: rgb(255, 255, 255);
}

/* HOVER */
.menu_principal a:hover {
    background: rgba(6, 10, 235, 0.966);
   
}

@media (max-width: 900px){
    .menu_principal a{
        font-size: 1.2em;
    }
}

@media (max-width: 600px){
    .menu_principal a{
        font-size: 0.8em;
        padding: 1em em;
    }

    .menu_principal ul{
        gap: 0em;
    }

}

/* otra parte */

.post a{
    padding: 1em;
}

.post .separacion img{
    width: 400px;
    max-height: 300px
}

.separacion{
    margin-bottom: 10px;
}

.link{
    margin-bottom: 10px;
    text-align: center;
   
}

h2{
    color: blue;
    text-align: center;
}