@import url('https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,100..900;1,100..900&family=Bitter:ital,wght@0,100..900;1,100..900&display=swap');
body { 
    background-color: #16166f;
    width: 1600px;
    max-width: 95%;
    margin: auto;
     font-family: "Bitter", serif;
}
h1, h2, h3 {
    font-family: "Archivo", sans-serif;
}
main{
    background-color: whitesmoke;
}
header, footer {
    background-color: black;
    color: #faee45;
    text-align: center;
    padding: 50px;}
nav{
    border-bottom: 3px solid #16166f;
}
nav ul {
    list-style: none;
}
nav li {
display: inline;

}
nav a {
    text-decoration: none;
    color: #faee45;
    padding: 10px;
background-color: #172A46;

}
nav a:hover{
    color:white;
    background-color: #16166f;
}
section {
    display: flex;
    padding: 10px;
    gap: 20px;
   
}
.personaje {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 30px;
    text-align: center;
    background-color: white;
    padding: 10px;
    border: 4px solid #172A46;
}

.personaje img {
    flex-shrink: 0;
    border:2px solid #16166f;
   
}
.centrado {
    display: block;
    margin: 0 auto;
    width: 50%;

}
@media screen and ( max-width: 600px ) { header, footer { padding: 20px;

} 
section {
    display: block;
}
    
}