@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400..700&family=PT+Serif:ital,wght@0,400;0,700;1,400;1,700&display=swap');
body {
    background-color: rgb(244, 46, 135);
    font-family: "Dancing Script", cursive;

}
h2,h3,h4,h5,ul,p {
    font-family: "PT Serif", serif;
}

main {
    background-color: pink;
    width: 800px;
    max-width: 95%;
    margin: 0 auto ; 
}

header,footer {
    background-color: rgb(244, 46, 135);
    padding: 15px;
    text-align: center;
    
} 

nav ul {
  list-style: none;  
}
nav li {
    display: inline;
  
    
}
nav a {
    text-decoration: none;
    color: azure;
    padding: 8px;
    background-color:rgb(244, 46, 135);
    border-bottom: 1px solid azure; 
    border-right: 1px solid azure;
    margin: 1px;
   
}
nav a:hover {
    color: rgb(244, 46, 135);
    background-color: azure;
  border-bottom: 1px solid rgb(255, 46, 135); 
    border-right: 1px solid rgb(255, 46, 135);
}
section {
    display: inline;
    padding: 10px;
}
/* centrar imagenes */
.centrar {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    border: 3px solid palevioletred;
    border-radius: 8px;
}
.adaptable {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 30%;
    border: 2px solid palevioletred;
    border-radius: 8px;
}
/*ubico imagenes de los actores en el margen derecho, separo las imagenes y redondeo un poco los bordes */
.derecha {
    float: right;
    clear: right;
    margin-left: 15px;
    margin-right: 10px;
    margin-bottom: 25px;
    border: 2px solid palevioletred;
    border-radius: 8px;
}
article,h3,h4 {
    padding: 0 30px;
}

.borde-texto {
    border: 5px solid rgb(255, 46, 135) ;
    padding: 5px;
    width: 98%;
   

   
   
}
/* agregue esto para que la lista tenga el mismo margen y tipo de puntitos que las demas*/
.lista-uniforme {
    color:  rgb(206, 20, 104);
    margin: 0;
    margin-top: 15px;
    padding-left: 0px;
    list-style-type: disc;


}
.texto-centrado {
    text-align: center;
}

@media screen and (max-width: 600px) {
header, footer {
    padding: 20px;
}
section {
    display: block;
}
    
}
/* elimino margenes inncesarios */
body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    box-sizing: border-box;
}
/* ajusto las imagenes al espacio disponible */
img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}
/* establezco los margenes para que quede lo mas prolijo posible*/
section p {
    margin-right: 10px;
    margin-left: 10px;
    line-height: 1.6;
}