html{
   background-color: beige
}

#contenedor{
max-width:100%;
margin:0 auto;
overflow:hidden;
}

#principal{
    width:100%;
    height: 1050px;
    margin: auto;
    justify-content: space-between;
}

header{
    width: 100%;
    height: 130px;
    }

#logo{
     width: 10%;
     height: 100%;
     border: 1px solid #000;
     float: left;
     justify-content:center;
      margin-right: auto;
      margin-left: auto;
      text-align:center;
      background-color: black;
      color:white;
      border-radius: 7%;
      font-family: 'Kalam', cursive;
    padding: 5px;
}

.menu{
     width:80%;
     height: 40px;
     border: 1px solid #ccc;
     float: right;
     margin-top:40px;
     background:black;
justify-content:center;
      margin-right: auto;
      margin-left: auto;
      text-align:center;
}

.menu ul{}
.menu ul li{
     list-style:none;
     float:right;
justify-content:center;
      margin-right: auto;
      margin-left: auto;
      text-align:center;
}

.menu ul li a{
      text-decoration: none;
      padding: 10px 15px;
      border: 0px solid #ccc;
      color: yellow;
      font-size: 1em;
      font-family: 'Kalam', cursive;
      justify-content:center;
      margin-right: auto;
      margin-left: auto;
      text-align:center;

}   

#perfil{
    background-color: black;
    width: 80%;
    height: 50%;
    border: 1px solid #000;
    margin:auto;
    padding: 0px;
    display: block;
} 

.general{
    display; flex;
} 

h1{
    font-family: "Oswald", sans-serif;
    color:yellow;
    font-size: 2.5em; 
    margin-right: auto;
    margin-left: auto;
    text-align: center;
    
}

.avatar{
    display: flex;
    margin-left: auto;
    margin-right: auto;
    height: 200px;
    border-radius: 100%;
    margin-top: 10px;
    margin-bottom: 20px;
} 

.alumno{
    text-align: center;
    color:yellow;
    justify-content: center;
    font-family:"Oswald", sans-serif; 
    font-size:1em;
    font-family: 'Kalam', cursive;
    
} 

h11{
    display: flex;
    justify-content: center;  
    font-family: "Oswald", sans-serif;
} 

nav{
    background-color: beige;
    width:80%;    
    margin: 10px;
    padding: 5px;
    justify-content: center;
    margin-right: auto;
    margin-left: auto;
    text-align: center;
}

h2{ 
    justify-content: center;
    font-family: "Lato", sans-serif;
    font-size:2em; 
    margin-right: auto;
    margin-left: auto;
    text-align: center;
    color:black;

}

h22{
    justify-content:center;
    font-size:2em; 
    margin-right:auto;
    margin-left:auto;
    text-align:center;
    color:white;
}

.grande{
        display: flex;
        justify-content: center;
        margin-right: auto;
        margin-left: auto;
    height: 100%;
}

h3{
    width: 80%;
    text-align: center;
    border: 5px solid yellow ;
    padding: 20px;
    margin-right: auto;
    margin-left: auto;
    justify-content: center;
    font-family: 'Kalam', cursive;
     
}

.contenidosecundario{
    width:80%;
    margin-left: auto;
    margin-right: auto;
    height: 100%;
}

.primero{

     width: 40%;
     justify-content:center;
      margin-right: auto;
      margin-left: auto;
      float: left;
}

.segundo{

     width: 40%;
     justify-content:center;
      margin-right: auto;
      margin-left: auto;
      float:right;
      }
      


footer{
    width: 80%;
    height:100%;
    background-color: rgba(255,255,255,0.4);
    border: 5px solid yellow ;
    border-radius: 5%;
    margin-right:auto;
    margin-left:auto;
    text-align:center;
}
 
.pie{
    width: 80%;
    height:100%;
    margin-right:auto;
    margin-left:auto;
    text-align:center; 
}

@media screen and(max-width:700px){
     .primero{
          width:100%;
}
      .segundo{
          width:100%;
}

@media screen and (max-width: 400px;
      #contenedor {
         width:100%;
}