/* Selectores de elementos */ 
@import url('https://fonts.googleapis.com/css2?family=Butterfly+Kids&family=Gelasio:ital,wght@0,400..700;1,400..700&display=swap');

body {
    background-color: rgb(243, 209, 214);
     font-family: "Gelasio", serif;
} 

h1, footer { 
     font-family: "Butterfly Kids", cursive;
}

h1 {
            color: rgb(75, 3, 75);
}
main {
    background-color: white;
    width: 800px;
    max-width: 95%;
    margin: 0 auto 0 auto;
}

 header, footer {
                background-color: rgb(230, 205, 230);
                color: white;
                padding: 20px;
                text-align: center;
            }
 nav {
    border-bottom: 1px solid black;
 }    
 
h2 {
    color: rgb(181, 132, 185);
}

 nav ul {
                list-style: none;
            }

 nav li {
                display: inline;
               
            }

 nav a {
     text-decoration: none;
     color: black;
     padding: 10px;
     background-color: rgb(241, 243, 243);
     border-bottom: 1px solid rgb(134, 134, 134);
     border-right: 1px solid rgb(134, 134, 134);
            }

 nav a:hover {
 color: rgb(213, 33, 230);
 border-bottom: 1px solid white;
 border-right: 1px solid white;
 background-color: white;
 border-top: 1px solid rgb(134, 134, 134);
 border-left: 1px solid rgb(134, 134, 134);
            }

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

 footer {
                color:rgb(75, 3, 75);
            }

   .centrado {
                display: block;
                margin: 0 auto;
                width: 85%;
            }
            .adaptable {
                display: block;
                width: 100%;
            }
  

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

                section {
                    display: block;
                }   
            }