@import url('https://fonts.googleapis.com/css2?family=BBH+Sans+Bogle&family=Bitter:ital,wght@0,100..900;1,100..900&family=Pixelify+Sans:wght@400..700&display=swap');

body {
	background-color: #DED6E0;
	font-family: "Bitter", serif;
}

main {
	background-color: #DED6E0;
	width: 1980;
	max-width: 95%;
	margin: 0 auto;
}

h1, h6 {
	font-family: "Pixelify Sans", sans-serif;
}

h2, h3 {
	font-family: "BBH Sans Bogle", sans-serif;
}

h3 {
  text-align: center;
}

header, footer {
	background-color: #68536E;
	color: white;
	padding: 20px 20px 30px 20px;
	margin: 50px 20px 20px 20px;
	text-align: center;
}

nav {
	border-bottom: 2px solid #271F29;
}

nav ul{
	list-style-type: none;
	text-align:center;
}

nav li{
	display: inline;
}

nav a {
	text-decoration: none;
	color: purple;
	padding: 10px;
	background-color: #C9BCCD;
	border-bottom: 1px solid #3F3243;
	border-right: 1px solid #3F3243;
}

nav a:hover {
	color: #BB56E3;
	background-color: #DED6E0;
	border-bottom: 1px solid #DED6E0;
	border-right: 1px solid #DED6E0;
	border-top: 1px solid #DED6E0;
	border-left: 1px solid #DED6E0;
}

section {
	gap: 20px;
	padding: 10px;
}

article {
  text-align: justify;
}

aside ul{
	list-style-type: none;
	display: flex;
}

aside li{
  margin: 20px;
}

aside li p{
  text-align: justify;
  }

.imgcentradowidth {
	display: block;
	margin: 0 auto;
	width: 70%;
	border: 1px solid #271F29;
}

.imgcentradoheight {
	display: block;
	margin: 0 auto;
	border: 1px solid #271F29;
}

.flechacentrado{
  display: block;
	margin: 0 auto;
	height: 5%;
}
	
@media screen and (max-width:	600px){
  header, footer{
    padding: 20px;
  }
  nav li{
    display: flex;
    }
  aside ul {
    display: block;
  }
  aside li{
    margin: 0px;
  }
  aside li p{
    text-align: left;
  }
  .imgcentradowidth {
    width: 100%;
  }
  .imgcentradoheight {
    height: 30%;
  }
}