@charset "UTF-8";

#logo { width: 7em;
        padding: 1em 0 2em 2em;
      }

html {min-height: -webkit-fill-available;
     }

* {padding: 0;
   margin: 0;
    font-family: "roboto" ;
    box-sizing: border-box
  }

body {display: flex;
      flex-direction: column;
    min-height: 100vh;
    min-height: -webkit-fill-available;
    justify-content: space-between;
     }

h1, p, section {color: #454545;
               }


.datos {padding: 2em 2em 2em 2em; 
    display: block;
    margin: auto;
    max-width: 50rem;
       }

.datos h1 {font-size: 2em;
    color: #454545;
          }

img { width: 100%;
    height: auto;
    border-radius: 10em;
    }

.foto { padding:  2em 0 0 0;
        width:18em;
    max-width: 50rem;
      }

body header
    {background-color:#487aeb; 
    }


nav {display: block;
     display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-evenly;
    flex-basis: 25%;
    align-items: center;
    align-content: center;
    max-width: 50rem;
    margin: auto;    
    }

nav a {color: white;
    text-align: center;
    padding: 1em 1em 1em 1em;
    text-decoration: none;
      }

nav a:hover {background-color: #d1fff8;
                 align-items: center;
    align-content: center;
    padding: 1em 1em 1em 1em;
            }


.materias h3 {font-size: 1.3em;
              line-height: 2.5em;
              color: #52BE80 
             }
.materias {line-height: 1.4em;
    margin: auto;
    display: block;
    max-width: 50rem;
          }

main {flex-grow: 1;
     }

body main, body footer
    {background-color:#FFFFFF;
        padding: 0 0 1em 0;
    }

section,  footer {padding: 0 2em 0 2em;
        }

body footer { padding: 1em 2em 2em 2em;
         font-size: 0.8em;
       }

body footer p {display: block;
               max-width: 50rem;
                   margin: auto;
              }