@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@700&display=swap');

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


/*SELECTOR ETIQUETA /ELEMENTO
etiqueta{atributo:valor; }El estilo se aplicara a todos los elementos.*/
body{
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 1rem;
    align-items: center;
}
header{
    margin: auto;
    background-color: salmon;
    
}

h1{
    color:white;
    text-align: center;
    padding: 2rem;
}

main{
    margin: 2rem auto;
    width: 70%;
}

.botonera{
    display: flex;
    justify-content: space-around;
    flex-direction: row;
}

.botonera li{
    width: 25%;
    list-style:none;
    text-align: center;
}
.botonera a{
   text-decoration: none;
    color: black;
}

h2{
    color:cornflowerblue;
    padding-bottom: .1em;
    font-weight: 700;
    font-style: oblique;
}

    h3{
    color: navy;
    margin-top: 2rem;
    padding-bottom: .5em;
    font-weight: 700;
    font-style: normal;
    text-decoration:underline double navy;
}

ul li{
    margin-bottom: .3em;
    list-style:decimal-leading-zero;
}

h4{color:navy;
font-style: italic;
font-weight: 100}

/*SELECTOR ID
#id { atributo :valor}
ejemplo:#cent {color:blue} el estilo se aplicara al elemento que tenga el id
#noticias{
    font-family: helvetica, sans-serif;
        font-size:1rem;
}

/*SELECTOR CLASE
. clase {atributi:valor; }el estilo se aplica a cualquier elemento que
tenga la clase
.texto-noticias{
    color: salmon;
    background-color:rgb(44, 0,0);
    width:50%;
    min-height: 3rem;
    margin:40px;
    padding: :50px;
    
}
/*SELECTORES DESCENDIENTES
selector1 selector2 selectorN {
propiedad:valor;}
siendo el selector Nel elemento sobre el que se aplica el estilo.

.texto noticias:first-child{
    color: salmon;
    }
/*COMBINACION DE SELECTORES (Y)
selector1,selector2,selector3{
propiedad:valor;}
la combinaciòn de selectores nos permite dar un estilo a todos los elementos indicados (la , funciona como una y)*/
/*SELECTOR HIJOS (HERENCIA)
selector1>selector2{
propiedad:valor;}
se usa para seleccionar un elemento que es hijo de otro elemento y se indica mediante el signo "mayor que"*/
/*SELECTOR ADYACENTE
selector1+selector2{
propiedad: valor;
}
se usa para seleccionar elementos que son hermanos, es decir ,su elemento padre es el mismo y estan seguidos en el codigo HTML. Se indica mediante el signo "mas"*/
/*https://www.w3scholls.com/cssref/css_selectors.asp*/