@import url('https://fonts.googleapis.com/css2?family=PT+Serif&family=Patrick+Hand&display=swap');
@charset "utf-8";

/* ----- PRIMERO REGLAS PARA CELULAR - MOBILE FIRST ----- */


body{
    background-color: skyblue;
    min-height: 100vh;
    box-sizing: border-box;}


    /* caja flexible */
    display: flex;
    /* direccion de sus elementos */
    flex-direction: column;
    /* organizacion de los elementos segun eje principal */
    justify-content: space-between;

  
/*     HEADER    */
header div img{
    width: 100%;
    height: auto;
    display: block;
}

#logo{
    background-color: rgb(28, 109, 141);
    max-width: 10em;
    margin: auto;
    padding: 0.4em 0.4em 0.4em 0.4em;
}

header nav ul{
    margin-top: 0.2em;
    padding: .2em;
  
}

header nav ul li a{    
    background-color: rgb(102, 153, 51);
    display: block;
    width: 10em;
    margin: auto;
    text-align: center;
    color: white;
    padding: 0.2em;
    margin-bottom: 0.2em;
    border-radius: 5em;
    font-family: 'Patrick Hand', cursive;
    font-weight: bold;
    font-stretch: expanded;
    font-variant: small-caps;
    letter-spacing: 0.3em;
    text-align: center;
    font-size: 1.3em;
    text-shadow: .3em .3em .3em silver;
}

nav ul li a:hover{
    color: green;
    background-color: rgb(162, 201, 124);
}

/*  MAIN */

h1{
    color: rgb(39, 81, 136)   text-align: center;
   text-transform: uppercase;
   font-family: 'Patrick Hand', cursive;
   font-weight: bolder;
   font-stretch: expanded;
    font-variant: small-caps;
    font-size: 3em;
}

h2{
    color:rgb(39, 81, 136);
    text-align:left;
   font-family: 'Patrick Hand', cursive;
   font-weigh:extrabold;
    font-size: 2em;
}
p {
    color: black;
    font-family: 'PT Serif', serif;
    font-size: 1em;
    font-weight: bold;
}

#logoAcumar{
    background-color: transparent;
    max-width: 12em;
    height: auto;
    margin: 2em auto;
}




/* equipo vm05 */

section#equipo{display: flex;
flex-wrap: wrap;
justify-content: center;}

#equipo h2{
    text-align: center;
    color: brown;
    width: 100%;
    font-family: 'Patrick Hand', cursive;
    font-weight: bolder;
    font-variant: small-caps;
    font-stretch: extra-expanded;
    font-size: 2em;
}

.estudiante{
    background-color:rgb(247, 223, 177);
    border-radius: 2em;
    text-align: center;
    margin: 0em 2em 3em 0em;
    padding: 1em 0.5em 0.5em 0.5em;
    width: 20%;
    max-width: 400px;
    min-width: 250px;
    font-family: 'PT Serif', serif;
}

.estudiante figure img{    
    border-radius: 10%;
}

.estudiante h3{
    margin: 0;
    color:rgb(117, 77, 48);
    font-size: 1.3em;
  
}

.estudiante figure p{
    color:black;
    margin-bottom: 2em;  
    font-weight:regular;
}

.estudiante a{
    text-decoration: none;
    color: skyblue;
    background-color: rgb(117, 77, 48);
    padding: 0.3em 0.3em 0.3em 0.3em;
    margin: 0;
    border-radius: 5em;
}



.estudiante a:hover{
    color: burlywood;
    background-color: brown;
}


/* DATOS ACADEMICOS */
#datosacademicos h3 {    
    color: rgb(184, 255, 208);
    text-align: center;
    background-color: rgb(117, 77, 48);
    border-radius: 2em;
    padding: 0.5em;
    margin: 3em 1em 1em 1em;
    font-family: 'Patrick Hand',monospace;
    font-weigh:extrabold;
    font-size: 1.2em;
    font-variant: small-caps;
    font-stretch: expanded;
    letter-spacing: 0.2em;
    word-spacing: 0.1em;
}

#datosacademicos ul li h4{
    color: rgb(117, 77, 48);
    font-size: 1em;
    margin-top: -0.5em;
    margin-bottom: -0.5em;
    font-family: 'PT Serif', serif;
    font-size: 1.2em;
}

#datosacademicos p{
    color: rgb(117, 77, 48);
    font-size: 0.9em;
    font-family: 'PT Serif', serif;

}

#datosacademicos ul li{
    list-style: none;
}

#datosacademicos ul{
    padding: 1em;
}


/*---- PIE ----*/

footer{
    background-color: rgb(117, 77, 48);
    padding: 1em 0.5em 1em 0.5em;
    margin: 0 0 0 0;
}

footer p{
    margin: 0;
    padding: 0;
    color: wheat;
    font-size: 0.6em;
    font-family: 'PT Serif',monospace;
}

/* PLAN */

#usuario {
    background-color:rgb(77, 114, 39);
    padding: 1em;  
    margin: 0em 0em 3em 0em;
    border-radius: 2em;  
    text-align: center;     
}

#usuario img{    
    border-radius: 10%;
    /*width: 50%;*/
    text-align: center;
    max-width: 50%;
}

#usuario h4{
    margin: 0.5em;
    color:rgb(103, 172, 228);
    font-family: 'PT Serif', serif; 
}

#usuario p{
    margin: 0;
    color:rgb(154, 214, 201);
}


img{align-self: center;
max-width: 460px;}

#paletadecolores {
    background-color:rgb(77, 114, 39);
    padding: 1em;  
    margin: 3em 0em 1em 0em;
    border-radius: 2em;  
    text-align: center;
}

#paletadecolores h4{
    margin: 0.5em;
    color:rgb(103, 172, 228);
    font-family: 'PT Serif', serif;    
}

#paletadecolores p{
    margin: 0;
    color:rgb(154, 214, 201);´
}


#contenido {
    background-color:rgb(77, 114, 39);
    padding: 1em;  
    margin: 3em 0em 1em 0em;
    border-radius: 2em;  
    text-align: center;
}

#contenido h4{
    margin: 0.5em;
    color:rgb(103, 172, 228);
    font-family: 'PT Serif', serif;    
}

#contenido p{
    margin: 0;
    color:rgb(154, 214, 201);´
}

/* MAPA */
img{align-self: center;
    max-width: 460px;}

/* -----FIN MOBILE FIRST ----*/

/* REGLAS PARA DISPOSITIVOS DE ESCRITORIO */

/* Escritorio pequeño / tablet */

@media screen and (min-width: 768px){
    body{
        background-color: rgb(160, 192, 212);
    }

    header ul{
        text-align:center;
    }

    header ul li {
        display: inline-block;
    }

   
    #usuario{
        max-width: 14em;
    }

    img{align-self: center;
        max-width: 600px;}
}

/* Escritorio grande */
@media screen and (min-width: 992px){

    body{
        background-color:rgb(147, 187, 134);
    }
    
    #estudiantes{
        text-align: center;
    }

    #usuario{
        margin: auto;
    }

    img{align-self: center;
        max-width: 800px;}

}

/* Escritorio extra grande */
@media screen and (min-width: 1200px){
    body{
        background-color: skyblue ;
    }
    img{align-self: center;
        max-width: 900px;}
}