@charset "utf-8" ;
@import url('https://fonts.googleapis.com/css2?family=Hind:wght@700&family=Raleway:wght@100;500&display=swap');




/* REGLAS PARA CELULAR */

* {   
    margin: 0em;
    padding: 0em;
    border: 0em;
    box-sizing: border-box;
    }



body {   
        background-color: rgb(128, 194, 122);
        font-family: sans-serif;
        font-weight: 500;
        }   
        
        
 header {
         background-color: rgb(0, 0, 0);
         background-size: cover;
         background-repeat: no-repeat;
        }  
        
 header div nav{
        font-family: sans-serif;
        font-weight: 100;
        font-size: 0.9em;
        margin: 2em;
               }    
               
header div nav ul {
         padding: 0em;
         list-style:none;
         display: flex;
         justify-content: center;
                       }   
                       
header div nav ul li {
        background-color:rgb(128, 194, 122);
        margin: 1em 2em 0.5em 0.5em;
        padding: 0.5em;
         width: 7em;
        text-align: center;
        border-radius: 1.5em;
        box-shadow: 0.2em 0.2em 1em rgb(173, 180, 172);
                             }  
                             
                             
 header div nav ul li a {
         color:rgb(255, 255, 255);
          text-decoration:none;
         text-transform: uppercase;
          font-weight: bold ;
         font-family: sans-serif;
         font-weight: 400;
                                      }   


header div img {
         width: 13em;
         height: auto;
         display: block;
          margin: auto;
                                    }                                     
                                      
                                      
             


h1 {
        color: rgb(0, 0, 0);
        font-size: 2em;
        text-align:center;
        text-transform: uppercase;
        margin: 1em;
        margin-bottom: 0em;
        font-family: 'Hind', sans-serif;
        font-weight: 700 ;
        line-height: 1em;
                }
 


 h2{
         background-color: rgb(0, 0, 0);
         color:rgb(255, 255, 255) ;
         font-size: 1em;
         padding: 0.5em;
        border-radius: 1.5em;
        margin: 1.5em;
        text-align: center;
        letter-spacing: 0.2em;
        box-shadow: 0.2em 0.2em 1em gray;
 }
  
  
  
p{
       color:rgb(0, 0, 0);
        font-size: 1.1em;
        margin-top: 1em;
            margin-left: 2em;
            margin-right: 1.5em;
                }  



#materias nav ul li {
          color:rgb(0, 0, 0);
          font-size: 1.1em;
         margin-left: 3em;
          line-height: 2em;   
}
          
          
#integrantes nav ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 0.5em;
}     
      

#integrantes nav ul li {
    list-style: none;
    font-size: 0.9em;
    background-color: rgb(117, 117, 117);
    padding: 0.4em;
    border-radius: 0.8em;
    margin: 0.5em;
    margin-left: 1.5em;
    box-shadow: 0.2em 0.2em 1em rgb(190, 190, 190);
} 


#integrantes nav ul li a {
    color: white ;
    text-decoration: none;
    padding: 0.3em;
} 


nav>a{
    text-decoration: none;
    margin-left: 2em;
    color: rgb(0, 0, 0);
    font-size: 1.1em;
         }




footer{
    background-color:rgb(211, 211, 211);
    font-size: 0.8em;
    color: dimgrey;
    text-align: center;
     margin: 2em 1em 2em 1em;
    padding: 1em;
                         }               




 /* REGLAS PARA ESCRITORIO */
/* escritorio pequeño / tablet */
@media screen and (min-width: 768px) {  
    
    
    * {   
        margin: 0em;
        padding: 0em;
        border: 0em;
        box-sizing: border-box;
        }
    
    
    
    body {   
            background-color: rgb(128, 194, 122);
            font-family: sans-serif;
            font-weight: 500;
            }   
            
            
     header {
             background-color: rgb(0, 0, 0);
             background-size: cover;
             background-repeat: no-repeat;
            }  
            
     header div nav{
            font-family: sans-serif;
            font-weight: 100;
            font-size: 0.9em;
            margin: 0.5em;
                   }    
                   
    header div nav ul {
             padding: 0em;
             list-style:none;
             display: flex;
             justify-content: center;
                           }   
                           
    header div nav ul li {
            background-color:rgb(128, 194, 122);
            margin: 1em 2em 0.5em 0.5em;
            padding: 0.5em;
             width: 7em;
            text-align: center;
            border-radius: 1.5em;
            box-shadow: 0.2em 0.2em 1em rgb(173, 180, 172);
                                 }  
                                 
                                 
     header div nav ul li a {
             color:rgb(255, 255, 255);
              text-decoration:none;
             text-transform: uppercase;
              font-weight: bold ;
             font-family: sans-serif;
             font-weight: 400;
                                          }   
                                          
                                          
                 
     header div img {
                width: 20em;
                height: auto;
                display: block;
                 margin: auto;
                }             
    
    
    
    h1 {
            color: rgb(0, 0, 0);
            font-size: 2em;
            text-align:center;
            text-transform: uppercase;
            margin: 1em;
            margin-bottom: 0em;
            font-family: 'Hind', sans-serif;
            font-weight: 700 ;
            line-height: 1em;
                    }
     
    
    
     h2{
             background-color: rgb(0, 0, 0);
             color:rgb(255, 255, 255) ;
             font-size: 1em;
             padding: 0.5em;
            border-radius: 1.5em;
            margin: 1.5em;
            text-align: center;
            letter-spacing: 0.2em;
            box-shadow: 0.2em 0.2em 1em gray;
     }
      
      
      
    p{
           color:rgb(0, 0, 0);
            font-size: 1.1em;
            margin-top: 1em;
                margin-left: 2em;
                margin-right: 1.5em;
                    }  
    
    
    
    #materias nav ul li {
              color:rgb(0, 0, 0);
              font-size: 1.1em;
             margin-left: 3em;
              line-height: 2em;   
    }
              
              
    #integrantes nav ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        margin: 0.5em;
    }     
          
    
    #integrantes nav ul li {
        list-style: none;
        font-size: 0.9em;
        background-color: rgb(117, 117, 117);
        padding: 0.4em;
        border-radius: 0.8em;
        margin: 0.5em;
        margin-left: 1.5em;
        box-shadow: 0.2em 0.2em 1em rgb(190, 190, 190);
    } 
    
    
    #integrantes nav ul li a {
        color: white ;
        text-decoration: none;
        padding: 0.3em;
    } 
    
    
    nav>a{
        text-decoration: none;
        margin-left: 2em;
        color: rgb(0, 0, 0);
        font-size: 1.1em;
             }
    
    
    
    
    footer{
        background-color:rgb(211, 211, 211);
        font-size: 0.8em;
        color: dimgrey;
        text-align: center;
         margin: 2em 1em 2em 1em;
        padding: 1em;
                             }    
                             
                             

  /* escritorio grande */
@media screen and (min-width: 992px) {    
    
    
    * {   
        margin: 0em;
        padding: 0em;
        border: 0em;
        box-sizing: border-box;
        }
    
    
    
    body {   
            background-color: rgb(128, 194, 122);
            font-family: sans-serif;
            font-weight: 500;
            }   
            
            
     header {
             background-color: rgb(0, 0, 0);
             background-size: cover;
             background-repeat: no-repeat;
            }  
            
     header div nav{
            font-family: sans-serif;
            font-weight: 100;
            font-size: 0.9em;
            margin: 0.5em;
                   }    
                   
    header div nav ul {
             padding: 0em;
             list-style:none;
             display: flex;
             justify-content: center;
                           }   
                           
    header div nav ul li {
            background-color:rgb(128, 194, 122);
            margin: 1em 2em 0.5em 0.5em;
            padding: 0.5em;
             width: 7em;
            text-align: center;
            border-radius: 1.5em;
            box-shadow: 0.2em 0.2em 1em rgb(173, 180, 172);
                                 }  
                                 
                                 
     header div nav ul li a {
             color:rgb(255, 255, 255);
              text-decoration:none;
             text-transform: uppercase;
              font-weight: bold ;
             font-family: sans-serif;
             font-weight: 400;
                                          }   
                                          
                                          
                 
     header div img {
                width: 20em;
                height: auto;
                display: block;
                 margin: auto;
                }             
    
    
    
    h1 {
            color: rgb(0, 0, 0);
            font-size: 2em;
            text-align:center;
            text-transform: uppercase;
            margin: 1em;
            margin-bottom: 0em;
            font-family: 'Hind', sans-serif;
            font-weight: 700 ;
            line-height: 1em;
                    }
     
    
    
     h2{
             background-color: rgb(0, 0, 0);
             color:rgb(255, 255, 255) ;
             font-size: 1em;
             padding: 0.5em;
            border-radius: 1.5em;
            margin: 1.5em;
            text-align: center;
            letter-spacing: 0.2em;
            box-shadow: 0.2em 0.2em 1em gray;
     }
      
      
      
    p{
           color:rgb(0, 0, 0);
            font-size: 1.1em;
            margin-top: 1em;
                margin-left: 2em;
                margin-right: 1.5em;
                    }  
    
    
    
    #materias nav ul li {
              color:rgb(0, 0, 0);
              font-size: 1.1em;
             margin-left: 3em;
              line-height: 2em;   
    }
              
              
    #integrantes nav ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        margin: 0.5em;
    }     
          
    
    #integrantes nav ul li {
        list-style: none;
        font-size: 0.9em;
        background-color: rgb(117, 117, 117);
        padding: 0.4em;
        border-radius: 0.8em;
        margin: 0.5em;
        margin-left: 1.5em;
        box-shadow: 0.2em 0.2em 1em rgb(190, 190, 190);
    } 
    
    
    #integrantes nav ul li a {
        color: white ;
        text-decoration: none;
        padding: 0.3em;
    } 
    
    
    nav>a{
        text-decoration: none;
        margin-left: 2em;
        color: rgb(0, 0, 0);
        font-size: 1.1em;
             }
    
    
    
    
    footer{
        background-color:rgb(211, 211, 211);
        font-size: 0.8em;
        color: dimgrey;
        text-align: center;
         margin: 2em 1em 2em 1em;
        padding: 1em;
                             }