@charset "utf-8";

html {
    background-color:#7e7e7e;
}
  
body {
    width: 100%;

    margin-top: 0px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0;
    padding: 0em;
    background-color:#7abd66;
    color:#525252;
    font-family: "Helvetica";
    font-size: 12pt;
    color:#eff6f0;
   
}

main { 
    width: auto; 
    padding: 1em;
    display: flex;
    justify-content: center;
}

main li{
    list-style:circle;
    
    
}
main ul {
    padding: 1em;
    
}

h1 {
    font-family: "Helvetica";
    font-weight:100;
    margin: auto;
    font-size: 200%;
}

.listado-materias {
    font-size: 10pt;

}

#materias ul {
     margin-top: -1.5em;
}


h4 {
    font-family: "Helvetica";
    font-weight: 600;
 }

h3 {
    font-family: "Helvetica";
    font-size: 16pt;
    font-weight: 600;
    color: #2f2f2f
}

#subtitulo {
    margin:0px;
    margin-top: 0.5em;
    font-family: "Helvetica";
    font-weight: 600;
    font-size: 100%;
    width: auto;
    color:#eaa3b6

}

article {
    display:flex;
    flex-direction: row;
    align-content: center;
    
}

article img { 
    height: 400px ;
    margin-top: 4em; 
    margin-left: 2em;  }

footer {
    
    background-color: #7e7e7e;
    font-size: 9pt;
    color: #c8ebde;
    width: 100%;
    height: 100%;
}

footer p { 
    padding: 1em;
    width: 50%;
    margin-left: auto;
    margin-right: auto;
}


header {    
    padding: 1em 0em 0em 0em;
    background-color: rgba(128, 128, 128, 0.25);
    margin: 0; 
   }


nav {        
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-direction: row;
    justify-content: center;
  
     }

nav ul {
    display: flex;
    flex-direction: row;
    padding:0;
    }


nav li {
    display: inline;
    padding-left: 0.5em;
      
    }
    
   
nav li a {
    text-decoration: none;
    padding: 0.3em;  
    font-family: "Helvetica";
    font-weight: 500;
    justify-content: center;
    font-size: 12pt;
    color: #c8ebde;
    
    
   }

nav li a:hover {
    color: #000000;     
    transition: 0.3s; -webkit-transition: 0.3s;
}

a { 
    text-decoration: none;
    

} 

hr {
    border: 0; 
        border-style: solid;
background-color: #b7b7b7;
    height: 1px;
}


@media screen and (max-width: 960px) and (min-width: 480px) {
     
    body, main {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-content: center;
    }
    
       #materias {
        display: flex;
        flex-direction: column;
        justify-content:center;
        align-content: center;
        
    }
    #materias ul {
        margin-top: -1.5em;
    }
    nav ul {
        display: flex;
        flex-direction: column;
        align-content: center;
        
    }
    nav ul li {
        margin: 0.5em;
     
    }
    
  

    article {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-content: center;
        align-items: center;

            }
    
    hr {
        width: 100%;
        height: 1px;
        background-color: #b7b7b7;
    }
    
 
    #materias ul {
        margin-top: -1.5em;
    }
    
    
nav ul {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-content: center;
        justify-content: center;

        
    }
    nav ul li {
        margin: 0.5em;
     
    }
    
    article {
        width:100%;
        display: flex;
        flex-direction: row;
   

            }
    #materias {    
        width: 200%;
    
}
    article img {
        width: 80%;
        height: 80%;
    }
       footer p {
        width: 90%;
        
    }
}

@media screen and (max-width: 480px) and (min-width: 00px) { 


nav ul {
    display: flex;
    flex-direction: column;
    padding-left: 1em;
}
    
    
    
    nav, nav ul, nav li, nav a {
        justify-content: flex-start;
        align-items: flex-start;
    }
    
   nav li {
          padding-bottom: 1.2em;
    }
    
 
    article {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
     
   
        }
    
    article img {
        width: 90%;
        height: 90%;
        padding: 0;
        margin: 0;
    }
    
    main {
        padding-left: 1em;
        overflow: hidden;
        
    }
    
    #fotitonombre {
        width: 100%;
        height: auto;
        margin-bottom: 1em;
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: center;
        
    }
    #fotitonombre img {
        width: 150px;
        height: 150px;
        margin-bottom: 1em;
    }
    
    h1 {
        font-size: 20pt;
    }
    hr {
        width: 100%;
        height: 1px;
        background-color: #7e7e7e;
    }
    footer p {
        width: 90%;
        
}
}