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

html {font-family: "Roboto", sans-serif;
}

body {background-color: white;}
header {background-color: #0c0c67;}

header img {width: 20%;
            margin-bottom: 1rem;
            margin-top: 1rem;
                        }


nav {background-color: #e39494;
    text-align: right;
    padding: 0.8rem;}

nav ul li {
    text-decoration: none;
    list-style-type: none;
    display: inline;
    margin-top: 2rem;
    margin-right: 1rem;
    font-family: roboto, sans-serif;
    border-right: 1px solid;
    padding-right: 1rem;
    border-color: white;}

ul li hover{box-shadow: 0.2rem 0.2rem 0.5rem #d3d3d3; 
    font-weight: 900;
    color: white;}

ul li a {text-decoration:none; color: white;}
ul li a:visited {text-decoration: none; color:white;}
ul li a:hover {color: #0c0c67; font-weight: bold;}

body {font-family: "Roboto", sans-serif; }

h1 {font-size: 3rem;
    color: lightcoral;
    margin-top: 1rem;
    margin-bottom: 2rem;
    text-align: center;
}

h2 {font-size: 1rem;
    color: grey;
    margin-left: 15rem;
    margin-right: 15rem;
    margin-bottom: 1rem;
    border-bottom-style: solid;
    border-width: thin;}

h3 {font-size: 1rem;
    color: grey;
    }

h4 {font-size: 2rem;
    color: lightcoral;
    text-align: center;
    margin-bottom: 3rem;
    margin-top: 2rem;
}


.materias { display: flex; 
            justify-content: space-between;
            margin-left: 22rem;
            margin-right: 22rem;
            margin-bottom: 5rem;
            margin-top: 3rem;
            font-size: 1rem;
            color: grey;
        }

.foto {width: 100%;
       text-align: center;
}



footer img{
    display: inherit; 
    border-radius: 0.5rem; 
    display: grid;
    max-width: 100px; 
    min-width: 60px; 
    margin: 1rem;
    
            }

footer p {font-size: 0.8rem;
          color: white;
          background-color: grey;
          text-align: center;
          margin-top: 2rem;
          padding-top: 1rem;
          padding-bottom: 1rem;
                   }


footer img: hover {
    box-shadow: 0.2rem 0.2rem 0.5rem #d3d3d3; 
    border-radius: 0.5rem;
                }