:root{
    --anchor--color: rgb(255, 255, 255);
}

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    
}

/* Modo claro */
@media (prefers-color-scheme: light) {
  body {
    background-color: white;
    color: black;
  }
}

/* Modo oscuro */
@media (prefers-color-scheme: dark) {
  body {
    background-color: #121212;
    color: white;

    
  }

}


img{
    width: 50px;
}

.header-nav{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
    background-color: black;
    align-items: center;

    & nav ul {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 15px;
        margin-right: 10px;

        & li{
            list-style: none;

            & a{
                text-decoration: none;
                color: var(--anchor--color);
                font-weight: bold;
            }

            & a:hover{
                 color: #e62429;
            }
        }

    }
}

h1{
    margin-top: 30px;
    text-align: center;
}

.container-noticias{
    margin-top: 50px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 40px;
    

    & img{
        width: 100%;
        height: 200px;
        padding: 20px 30px;
    }

    & .n{
        border-radius: 15px;
        box-shadow: 0 8px 18px rgba(0, 0,0, 0.30);
        overflow: hidden;
        width: 250px;

        & .descripcion{
            padding: 10px;


            & #footer-n{
                margin-top: 10px;
            }
            & p{
                margin-bottom: 10px;
            }
            
            & a{
                margin-top: 10px;
                text-decoration: none;
                background-color: blue;
                border: 2px solid black;
                color: var(--anchor--color);
                border-radius: 10px;
                padding: 3px;
            }
        }
    }
}