@import url('https://fonts.googleapis.com/css?family=Roboto:700&display=swap');


body{

	font-family: 'Roboto', sans-serif;
	/*----CENTRA TODA LA PAGINA ----*/
	margin: auto;
	
}

body #rectangleBrown{
    width: auto; 
    height: 100px; 
    background: #52471b;
    border-bottom: 4px solid #87752d;
    position: relative;
    z-index: 1;
}

h1{
	font-size: .8em;
}

/*==============Header============*/

header{
    background-color: #f2cc10;
    margin-top: -110px;
    text-align: center;
}	
header img{
    display: block;
    position: relative;
    z-index: 2;
/*--Para centrar una imagen hay que asignar un ancho o width y margin left and right AUTO!*/
    width: 399px;
    margin-left: auto;
    margin-right: auto;
/*--margin-bottom en engativo es para que el titulo debajo de la imagen quede mas cerca--*/
    margin-bottom: -35px;
    
}
header div{
    position: relative;
    z-index: 1;
}

header h1{
    color: #87752d;
    font-size: 1.3em;
    width: 220px;
    margin-left: auto;
    margin-right: auto;
   }

/*==============blockquote============*/

blockquote{
    font-style: italic;
	color: #cca756;
    width: 500px;
    padding: 15px;
    margin: 0px;
    font-size: 26px;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    }
header nav ul {
    background-color:#87752d;
    border: 2px solid #52471b;
	list-style-position: inside;
	padding: 20px;
    margin: 0px;
    font-size: 18px;
    text-align: center;
	}

header nav li{
	display: inline;
	padding: 15px;
	margin-right: 20px;
    margin-left: 10px;
   	list-style: none;

}

/*==============LINK STYLE HEADER============*/

header nav a:link{
	color: #f8ffb0;
	text-decoration: none;
}
header nav a:visited{
	color: #fffc58;
	text-decoration: none;
}
header nav a:hover{
	color: #fffc58;
	text-decoration: none;
}
header nav a:active{
	color: #ffffff;
	text-decoration: none;
}



/*==============MAIN STYLE============*/

/*use the screenshot to make the appropriate changes to these elements*/

main{
	background: #f8ffb0;
	padding: 30px;
	}
main figure{
    width: 196px;
    background: #87752d;
    border-radius: 5px 5px;
    border: 5px solid #87752d;
    margin: 15px 5px;
}
main div{
    width: 860px;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    text-align: center;
    font-size: 18px;
    color: #f8ffb0;
}

 
/*==============LINK STYLE HEADER============*/
footer{
color: #f2cc10;
border-top: 4px solid #87752d;
text-align: center;
font-size: 14px;
background: #52471b;
padding: 10px 2px 10px 2px;
}