@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@100..900&family=Smythe&display=swap');

body {
    background-color: rgb(101, 56, 143);
    font-family: "roboto slab", serif;
}
h1, h2, h3{
    font-family: "smythe", system-ui; 
}
main{
    background-color: rgb(156, 155, 196);
    width: 800px;
    max-width: 95%;
    margin: 0 auto;
}
header, footer{
    background-color: rgb(146, 110, 245);
    color: whitesmoke;
    padding: 50px;
    text-align: center;
}
nav{
    border-bottom: 2px solid slateblue;
    text-align: center;
}
nav ul{
    list-style: none;
}
nav li{
    display: inline;
    padding: 20px
}
nav a{
    text-decoration: none;
    color: aquamarine;
    padding: 10px;
    background-color: cadetblue;
    border-bottom: 1px solid black;
    border-right: 1px solid black;
}
nav a:hover{
    color: black;
    background-color: rgb(141, 196, 177);
    border-bottom: 1px solid rgb(166, 141, 196);
    border-right: 1px solid rgb(161, 150, 170);
    border-top: 1px solid black;
    border-left: 1px solid black;
}
section{
    display: flex;
    gap: 20px;
    padding: 20px;
    text-align: justify;
}

.centrado{
     display: block;
     margin: 0 auto;
    }
.adaptable{
     display: block;
     width: 50%;
    }
aside{
    text-align: justify;
}

@media screen and (max-width:600px) {
    header, footer{
        padding: 10px;
    }
    section{
        display: block;
    }
    nav li{
        display: block;
        padding: 10px;
    }
}