* {
    /* Para que css no aplica margenes y padding por defecto */
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /* Para que el padding y border no afecten al tamaño del elemento */
}

body {
    min-height: 100vh;
    /* Uso vh para que se ajuste al tamaño de la pantalla */
    display: grid;
    /* meto todo en un grid para poder organizar bien la web con su cabecera, menu lateral, contenido y footer */
    grid-template-columns: auto 1fr;
    /* Uso auto para que la barra later use siempre el hueco exacto que necesite, dejando el resto para las noticias */
    grid-template-rows: auto 1fr auto;
    /* Uso auto para que la cabecera y el footer usen siempre el hueco exacto que necesiten, dejando el resto para las noticias */
}

header {
    grid-column: 1 / 3;
    grid-row: 1 / 2;
    text-align: center;
    background-color: #86C754;

    display: grid;
    /* grid para poner el logo, titulo y enlaces en la misma linea y centrados*/
    align-items: center;
    justify-items: center;
    grid-template-columns: auto 1fr auto;
    padding: 10px 50px;
    width: 100%;
}

a {
    text-decoration: none;
    /* Quita el subrayado de los enlaces */
    color: rgb(246, 244, 244);
}

a:hover {
    /* El hover es para que al pasar el cursor haga algo, concretamente este, cambiar el colo */
    color: black;
}

.logo {
    justify-self: start;
    height: 60px;
    display: flex;
    /* flex para poder centrar el logo */
    align-items: center;
}

.logo img {
    height: 100%;
    width: auto;
}

.enlaces {
    /* QUita lo puntos de las listas */
    list-style-type: none;
}

.contenido_noticia {
    margin-inline: 1%;
    /* Para separar cada tarjeta de noticia */
    margin-block: 1%;

    grid-column: 2;
    grid-row: 2;

    display: grid;
    grid-template-columns: 1fr auto;
    text-align: center;
    gap: 0;
    padding: 10px;
}

.cabecera_noticia {
    display: grid;
    grid-template-columns: 50vw auto auto auto auto;
    justify-content: center;
    align-items: center;
    gap: 1%;
    border: 1.5px solid #86C754;
}

.titulo_noticia {
    grid-row-start: 1;
    grid-column-start: 1;
}

.redes {
    /* Para que la barra de redes sociales se quede fija en la parte superior derecha */
    position: sticky;
    top: 20px;
    grid-column: 2;
    grid-row: 1;
    align-self: start;

    /* Para que el fondo sea transparente pero se vea borroso */
    backdrop-filter: blur(7px);

    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;

    border: 1.5px solid #86C754;
}

.redes img {
    max-width: 40%;
    max-height: 40%;
    object-fit: contain;
}

.tiktok {
    padding: 5px;
    grid-row-start: 1;
    grid-column-start: 2;
}

.instagram {
    padding: 5px;
    grid-row-start: 1;
    grid-column-start: 3;

}

.twitter {
    padding: 5px;
    grid-row-start: 1;
    grid-column-start: 4;
}

.imprimir {
    padding: 5px;
    grid-row-start: 1;
    grid-column-start: 5;
}

.datos_noticia {
    padding: 10px;
    grid-row-start: 2;
    grid-column-start: 1;
    grid-column-end: 6;
    font-size: 0.9em;
    color: #555;

    border: 1px solid #86C754;

}

.cuerpo_noticia {
    padding: 20px;
    grid-row-start: 3;
    grid-column-start: 1;
    grid-column-end: 6;

    border: 1px solid #86C754;


    display: grid;
    grid-template-columns: 24.25% 24.25% 24.25% 24.25%;
    gap: 1%;
}

.cuerpo_noticia p {
    grid-column-start: 1;
    grid-column-end: 5;

    margin-top: 20px;
    text-align: justify;
}

.cuerpo_noticia img {
    margin-top: 20px;
    max-width: 100%;
}

aside {
    grid-column-start: 1;

    display: flex;
    /* flex para poder centrar los botones */
    flex-direction: column;


    background-color: #ecf7b6;
    padding: 20px;
}

.accion {
    margin-top: 10px;
    margin-inline: 5px;
    padding: 10px;
    background: white;
    border-radius: 10px;
    text-align: center;
}

footer {
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 3;
    grid-row-end: 4;


    padding: 5px;
    background-color: #86C754;

}

/* He dividido el footer en 2 para que salga por un lado los enlaces y debajo el copyright */
.arriba_footer {
    margin-top: 5px;
    display: grid;
    grid-template-columns: 25% 50% 25%;
    text-align: center;
}

.copyright {
    margin: 5px;
    grid-column-start: 1;
    grid-column-end: 4;
    grid-row-start: 2;
    grid-row-end: 2;
    text-align: center;

}

.copyright p {
    font-size: small;
}