@charset "utf-8";

header{
    padding: 20px 0px 20px 0px;
    background-color: #274E55;
    border-radius: 5px;
}


body{
     background-color: #F6F4EA;
     background-size: cover;
     color: #F5DA9C; 
     font-family: 'Nunito', sans-serif;
}

main{
    padding: 20px 30px 30px 30px;
    width: 80%; 
    margin: 0 auto 20px;
    background-color: #d8ba80;
    border-radius: 5px;
}

h1{/*para encabezados */
     color: #8C4A0F;
     font-size: 40;
     font-family: 'Alata', sans-serif;
    text-align:center
}

h2{/*para encabezados */
    color: #F6F4EA ;
     font-size: 30;
     font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    
    }
    

p{
     font-family: 'Nunito', sans-serif;
     color:  #F6F4EA;
}

li{
     color:  #F6F4EA;
}
#pepe {font-size: 36px;} /*identificador en html id="pepe"*/ 

.ENLACES { /*para un grupo en html class="negrita-rojo"*/
    border: 1px;
    display: inline-block;
    width: auto;
    margin: 0 20px;
    text-align: justify;
}



ul{ /*para listas*/
    text-align: center; /*justificar al centro*/
}

ul li{ /*para listas*/
    display: inline; /*para quitar subrayado*/
    font-family: Arial, Helvetica, sans-serif; /*poner tipografia*/
    padding /*para hacer que la caja de la etiqueta coja tamaño */: 4px; 
   /* margin: para separar los li entre ellos y de la parte de arriba*/
    background-color: #274E55;
    border: none;
    border-radius: 5px;
 
}

ul li a{ /*para listas con enlaces*/
    text-decoration: none;
    color:  #F6F4EA;
    
}


img {
    width:100%; /*cuanto ocupa en la web*/
    height: auto; /*para que se adapte*/
    max-width:max-content; /*para que el tamaño maximo que se haga sea el de la imagen*/
    display:block;
    margin:auto;
  }

#cabeceraimagen { /*id="cabeceraimagen"*/
    width:100%; /*cuanto ocupa en la web*/
    height: auto; /*para que se adapte*/
    max-width:max-content; /*para que el tamaño maximo que se haga sea el de la imagen*/
  }

#pepe {font-size: 36px;} /*identificador en html id="pepe"*/

iframe{
    width: 100%  ; 
    height: auto ; /*para que se adapte*/
    max-width:max-content; 

  }





/*ul li a:hover{ }

ul li :hover
a:link Indica que es link {color: darkolivegreen;}
a:visited /* cuando ya esta visitado {}
a:hover /*al pasar por encima de eso {}
a:active /*cuando estas dentro del enlace{}*/


section{

    padding: 20px 30px 20px 30px;
    width: 80%; 
    margin: 0 auto 20px;
    background-color:#C76345;
    border-radius: 5px;
}

article{
    padding: 20px, 15px, 20px, 15px; 
    width: 60%; 
    margin: 0 auto 20px;
    background-color:#C76345;
    border-radius: 5px; 
    text-align: center;

}

#button { color:#C76345;
}


a:link{
    color: #F6F4EA;
    text-decoration: none;

} 

a:visited{
    color: #F6F4EA;
    text-decoration: none;
}
a:hover{
    color: #F6F4EA;
    text-decoration: none;
}
a:active {
    color: #F6F4EA;
    text-decoration: none;
}