@import url('https://fonts.googleapis.com/css?family=Roboto+Mono:300'); 
@import url('https://fonts.googleapis.com/css?family=Rubik:900');
@import url('https://fonts.googleapis.com/css?family=Fjalla+One');
</style>
header {background: aliceblue; 
    color: aliceblue; 
    font-family: 'roboto', sans-serif;
    padding: 6rem; }

nav{
    text-align: center;
    background-color: aliceblue;
    padding: 1rem
}

nav ul {
    display: inline-block;
    margin:0;
    padding:0;text-align: left;
    
}


.columnas {
   margin top: 30px; margin: 13rem; align-content: left; 
}

.columnas {
    width: 75%;
    display: flex;
    justify-content: center;
    align-content: center;
    text-align: left;
    margin top: 0rem;
}

.materias {
    align-content: center;
    margin-left: 50px;
    margin-right: 50px;
    column-width: 100px;
    align-content: center;
    margin top: 0rem;
}

ul {list-style-type: none;
    margin: 1rem;
    padding: 0;
    overflow: hidden;
    background-color: black; 
    text-align: center; }

li {float: left;
align-content: center;}

li a { display: block;
    color: aliceblue;
    text-align: center;
    font-size: 1rem;
    padding: 14px 10px 14px 14px ;
    text-decoration: none;
    font-family: "Oswald"}
li a:visited {color: aliceblue;}

ul type="square" class= "materias" {
    text-align: center;
    background: none;
    display: block;
    font-size: 1rem;
    color:black;}

nav ul li a: hover { background: #1a4f7e; color: darkorange }
 
.boton:hover{background:blue;}
option:hover{
  color:#1a4f7e;
  background-color: #1a4f7e;
}
a:hover {
  background-color: #1a4f7e;
}
div class="columna 1"
   { text-align: center;
    background: none;
    color: black;
    font size: 1rem;
    display: block;
    align-content:left;
    margin left: 22rem
    float:inherit;}

img { margin align-content: center; 
     margin-top: 0rem;
     border-radius: 50%;
     padding: 2rem;
  float: left; margin-left: 40rem}

h1{font-size: 4rem; color: #1a4f7e; background:aliceblue ;font-family: sans-serif, "roboto"; padding: 2rem;text-align: center}
h2 {color: #1a4f7e;  }
h3{font-size: 1,5rem; color: #1a4f7e;font-family: "roboto"; text-align: left; margin-left: 50rem; margin-top: 2rem}
h4 {text-align: left; color: #6a8ba8; margin left: 55rem; margin top: 0rem; padding:0}
h5{text-align: left; margin left: 55rem; color: black; background: none; font size: 1rem; display:block; margin top: 0rem}
h6 {font-family: sans-serif;background: none}
a {color: #1a4f7e}
a:visited {color: darkorange;}


.padre {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin-top: 100px;}

#container {
width: 800px;
margin: 0 auto;}

#content {
  width: 200px;
  height: 200px;
  display: -webkit-flex;
  -webkit-flex-direction: column-reverse;
  display: flex;
  flex-direction: column-reverse;}

.padre img:hover {
-webkit-transform: rotate(-7deg);
-moz-transform: rotate(-7deg);
-ms-transform: rotate(-7deg);
transform: rotate(-7deg);}