@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap');

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    background-color: rgb(238, 238, 236);
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
}
main{
    
    width: 96%;
    margin: 60px auto 0px;
    padding: 10px 0px ;
    box-shadow: 2px 2px 8px black;
}
main h1{
    
    font-size:px;
    text-align: center;
    font-weight: 600;
    margin-bottom: 10px;
}
main p{
    text-align: justify;
    width: 90%;
    margin: auto;
}
section{
    width: 96%;
    margin: 15px auto;
    padding: 10px 0px;
    box-shadow: 2px 2px 8px black;
}

.centros-body h2{
    font-size: 16px;
    font-weight: 300;
}
.centros-body a{
    text-decoration: none;
}
.centros-body ul{
    padding: 0px 0px 0px 20px ;
}
.centros-section{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}
.centros-section ul{
    width: 98%;
    max-width: 300px;
}
.centros-article ul {
    width: 300px;
    margin: auto;
}
.section-imagen{
    width: 98%;
    margin: auto;
}
.section-imagen img{
    width: 100%;
}
.section-header h2{
    text-align: center;
    font-weight: 500;
    margin: 10px 0px;
}
.section-body{
    width: 94%;
    margin: auto;
}
.section-section{
    width: 100%;
    margin: auto;
}
.section-section p{
    text-align: justify;
    width: 98%;
    margin: auto;
}
.section-section .link{
    text-align: center;
    margin: 20px  auto;
}
.section-section .link a{
    border-radius: 4px;
    background-color: whitesmoke;
    color: black;
    text-decoration: none;
    padding: 6px 10px;
    box-shadow: 2px 2px 2px black;
    transition: 500ms;
}
.section-section .link a:hover{
    padding: 8px 14px;
    background-color: rgb(187, 187, 187);
}
.section-section-picture{
    width: 90%;
    margin: 10px auto;
}
.section-section-picture img{
    border-radius: 10px;
    width: 100%;
    box-shadow: 2px 2px 4px rgb(9, 9, 9);
}
.section-section-picture-hdas{
    width: 100%;
    margin: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}
.section-section-picture-hdas img{
    width: 45%;
    margin: 8px;
}


    


/*-----------------550----------------------------------*/
@media (min-width: 550px) {
    .section-body{
        width:80% ;
    }
   
   
    }

/*-----------------750----------------------------------*/
@media (min-width: 750px) {
    main p{
        width: 80%;
    }
    .section-body{
        width:98% ;
        display: flex;
        justify-content: space-around;
    }
    .section-section{
        width: 48%;
    }
   
   
    }

/*-----------------900----------------------------------*/
@media (min-width: 900px) {
   .descripcion{
    width: 40%;
   }
   
    }

/*-----------------1050----------------------------------*/
@media (min-width: 1050px) {
    main p{
        width: 70%;
    }
    .descripcion{
     width: 35%;
    }
    
     }