/*

selector{propiedad:valor;}

*/

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

/* Estilos generales */

body {
    background: #caf3dc;
    text-align:left;
    padding: 2rem;}
    

header {
    background: rgba(255, 255, 255, 0.418);
    width:40%; 
}

header nav a {text-decoration: none; font-family: 'Oswald', sans-serif; font-size: 1.4rem; color: #146647; }

/* Estilo de títulos */

h1 {color: #1d8a60; font-family: 'Oswald', sans-serif; font-size: 1.6rem; text-align: center;}
h2{color: #146647;font-family: 'Oswald', sans-serif ; font-size: 1.4rem;}
h3{color: #0f4b34b1; font-family: 'Oswald', sans-serif ;}
h4{color: #0f4b34b1; font-family: 'Oswald', sans-serif ;}

/* Estilo párrafo, lista y links */

p {color: #0f4b34b1; font-family: 'Merriweather', serif; font-size: 0.6rem;}
footer p {color: #9e9e9e; font-family: Roboto; font-size: 0.7rem; text-align: center; float: left;}
ul li {color: #0f4b34b1; font-family: 'Merriweather', serif;}
a{color: #00f798; font-family: 'Merriweather', serif;font-size: 0.8rem;}
li {list-style-type: none;}

/* Estilos de clases */

.foto-samantha-suarez  {border-radius: 50%; width: 6.5rem ;height: 6.5rem; padding: 1.5rem;}

.caja-01 {background-color: transparent; width: 8rem ;height: 7rem;float: left;border-radius: 0.5rem; padding: 0.5rem;}
.caja-02 {background-color: #00f798; width: 5rem ; height: 3rem; align-items: center; padding: 0.5rem;float: left;border-radius: 0.5rem;margin-right: 1rem;}
.caja-03 {background-color: transparent; width: 12rem ; height: 5rem;align-items: center; padding: 1rem;float: left; padding: 1rem;margin-left: 3rem;}
.caja-04 {background-color: #00f798; width: 4rem ; height: 3rem;align-items: center; padding: 0.5rem;float: left;border-radius: 0.5rem;margin-right: 0.5rem;}
.caja-05 {background-color: #00f798; width: 4rem ; height: 3rem;align-items: center; padding: 0.5rem;float: left;border-radius: 0.5rem;margin-right: 0.5rem;}
.caja-06 {background-color: #00f798; width: 4rem ; height: 3rem;align-items: center; padding: 0.5rem;float: left;border-radius: 0.5rem;margin-right: 0.5rem;}
.caja-07 {background-color: #00f798; width: 4rem ; height: 3rem;align-items: center; padding: 0.5rem;float: left;border-radius: 0.5rem;margin-right: 0.5rem;}


.bloque-01 {border-radius: 0.5rem; width: 29rem; height: 11rem; border: none; background-color: rgba(255, 255, 255, 0.418);float:left;margin-right: 2rem; margin-bottom: 1rem;}
/*menu*/.bloque-06 {width: 29rem; height: 4.5rem;align-items: center; float: left;}
.bloque-02 {background: rgba(255, 255, 255, 0.418); width: 100%;border-radius: 0.5rem; float: left; margin-bottom: 1rem;}
/*visita mi portfolio*/.bloque-03 {background-color:rgba(255, 255, 255, 0.418);height: 15rem; font-size: 1rem; width:99%; height: 7rem;float: left; padding: 0.5rem; border-radius: 0.5rem;}
/*logo fadu + descrip*/.bloque-04 { background-color:rgba(255, 255, 255, 0.418);width:13rem; height: 15rem;padding: 1rem; float: left; text-align: center; margin-top: 1rem; margin-right: 1rem;margin-left: 13rem; border-radius: 0.5rem;}
/*logo ocampo + descrip*/.bloque-05 {  background-color:rgba(255, 255, 255, 0.418);width:13rem; height: 15rem;padding: 1rem; float: left; text-align: center; margin-top: 1rem; margin-right: 1rem; border-radius: 0.5rem;}
/*+ info ocampo*/.bloque-06 { background-color:rgba(255, 255, 255, 0.418);width:15rem; height: 17rem;float: left; text-align: center; margin-top: 1rem; border-radius: 0.5rem;}
.p-01 {color: #0f4b34b1; font-family: 'Merriweather', serif; padding: 0.8rem;}
.logo-fadu {width: 80%; margin-left: 0.9rem;}
.logo-cat-ocampo {width: 10rem; height: 8rem; margin-left: 0.7rem;}
.texto-fadu  { float: left; text-align: center;}
.texto-ocampo  {float: left; text-align: center;}

footer {margin-top: 4rem; margin-left: 14rem;}

@media (min-width:576px) {
  
    body {
        background-color: #f3e8ca;
    }

        h1 {color: #1d8a60; font-family: 'Oswald', sans-serif; font-size: 1.6rem; text-align: center;}
        h4 {color: #0f4b34b1; font-family: 'Oswald', sans-serif ;}

        .caja-01 {background-color: transparent; width: 7rem ;height: 7rem;float: left;border-radius: 0.5rem;}
.caja-02 {background-color: #00f798; width: 8rem ; height: 4rem; padding: 1rem;float: left;border-radius: 0.5rem;margin-right: 2rem;}
.caja-03 {background-color: transparent; width: 12rem ; height: 5rem; padding: 1rem;float: left; padding: 1rem;border-radius: 0.5rem;}
.caja-04 {background-color: #00f798; width: 4rem ; height: 4rem; padding: 1rem;float: left;border-radius: 0.5rem;vertical-align: middle;}
.caja-05 {background-color: #00f798; width: 4rem ; height: 4rem; padding: 1rem;float: left;border-radius: 0.5rem;vertical-align: middle;}
.caja-06 {background-color: #00f798; width: 4rem ; height: 4rem; padding: 1rem;float: left;border-radius: 0.5rem;vertical-align: middle;}
.caja-07 {background-color: #00f798; width: 4rem ; height: 4rem; padding: 1rem;float: left;border-radius: 0.5rem;}

.bloque-01 {width: 41%; height: 10rem; border: none; background-color: rgba(255, 255, 255, 0.418);border-radius: 0.5rem; float:left; padding: 1rem;}
.bloque-menu {width: 53%; height: 6rem; float: left; text-align: center; margin-top: 6rem;}
.bloque-02 {background: rgba(255, 255, 255, 0.418); width: 100%;border-radius: 0.5rem; float: left;}
/*visita mi portfolio*/.bloque-03 {background-color:rgba(255, 255, 255, 0.418); height: 15rem; font-size: 1rem; width:99%; height: 7rem;float: left; padding: 0.5rem; border-radius: 0.5rem;}
/*logo fadu + descrip*/.bloque-04 { background-color:rgba(255, 255, 255, 0.418);width:13rem; height: 15rem;padding: 1rem; float: left; text-align: center; margin-top: 1rem; margin-right: 1rem;margin-left: 13rem; border-radius: 0.5rem;}
/*logo ocampo + descrip*/.bloque-05 {  background-color:rgba(255, 255, 255, 0.418);width:13rem; height: 15rem;padding: 1rem; float: left; text-align: center; margin-top: 1rem; margin-right: 1rem; border-radius: 0.5rem;}
/*+ info ocampo*/.bloque-06 { background-color:rgba(255, 255, 255, 0.418);width:15rem; height: 17rem;float: left; text-align: center; margin-top: 1rem; border-radius: 0.5rem;}
.p-01 {color: #0f4b34b1; font-family: 'Merriweather', serif; padding: 0.8rem;}
.logo-fadu {width: 80%; margin-left: 0.9rem;}
.logo-cat-ocampo {width: 10rem; height: 8rem; margin-left: 0.7rem;}
.texto-fadu  { float: left; text-align: center;}
.texto-ocampo  {float: left; text-align: center;}

footer {margin-top: 4rem; margin-left: 14rem;}
}