@charset "utf-8";

* {
    box-sizing: border-box;
    text-decoration: none;
   
    
     
}

html {
   
    font-size: 90%;
    font-family: sans-serif;
    background-color: rgba(191, 138, 18, 0.76);
}

img {
    
    max-width: 100%;
    height: auto;
}

header,body,footer {
    max-width: 100%;
    min-height: 5vh;
    margin:auto;
    
}

header p:hover {
    
    background-color: black;
    color: #ffffff;
    font-weight: bold;
}

.contenedor {
    
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
}

header {
    max-width: border;
     min-width: border;
}

header p {
    color: #d9d9d9;
    font-size: 14px;
    margin-top: 5px;
    margin-left: 5px;
    margin-right: 5px;
    margin-bottom: 0px;
    background-color: #252526;
    padding: 15px;
    padding-left: 25px;
    text-align: center;
    max-width: none;
    
    }

#avatar {
    
    font-size: 10px;
    font-family: sans-serif;
    text-align: center;
    color: aliceblue;
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 5px;
    margin-bottom: 5px;
    background-color: #3D3C3F;
    padding: 5px;
    padding-bottom: 5px;
     
}

#niveluno {
    
    font-size: 12px;
    font-family: sans-serif;
    color: aliceblue;
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 5px;
    margin-bottom: 5px;
    background-color: #3D3C3F;
    padding-bottom: 10px;
    padding-left: 25px;
    padding-top: 10px;
    
    
    
}

#niveldos {
    
    font-size: 12px;
    font-family: sans-serif;
    color: aliceblue;
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 5px;
    margin-bottom: 5px;
    background-color: #3D3C3F;
    padding-bottom: 10px;
    padding-left: 25px;
    padding-top: 10px;
    
}

#gustos {
    
    font-size: 12px;
    font-family: sans-serif;
    color: aliceblue;
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 5px;
    margin-bottom: 5px;
    background-color: #3D3C3F;
    padding-bottom: 10px;
    padding-left: 25px;
    padding-top: 10px;
   
    
}

#contacto {
    
    font-size: 10px;
    font-family: sans-serif;
    text-align: center;
    color: aliceblue;
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 5px;
    margin-bottom: 5px;
    background-color: #3D3C3F;
    padding: 5px;
    padding-bottom: 5px;
    display: flex;
    flex-direction: row;
    align-content: center;
   
  
    

  
}
    
#contacto h4 {
    
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 5px;
    margin-bottom: 5px;
    padding-top: 1px;
    
    }

#face {
    
    max-height: 80%;
    max-width: 80%;
}

footer {
    
   
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 5px;
    background-color: #252526;
    padding: 15px;
    padding-left: 25px;
    color: azure;
    font-size: 9px;

}



  


@media screen and (min-width: 641px) {
    
    .contenedor {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        
       
    }
    
    #niveldos {
        
        padding-bottom: 200px;
        min-width: 310px;
        max-width: auto;
  
}
     #niveluno {
        
        padding-bottom: 200px;
        min-width: 310px;
        max-width: auto;
    }
   
    
    #gustos {
        
        padding-bottom: 200px;
        min-width: 310px;
        max-width: auto;
    }
    
    #
        
    }
    
    @media screen and (min-width: 860px) {
    
    .contenedor {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: flex-start;
        align-content: space-between;
    
        }
        
        
    Footer{
            
            padding-bottom: 1000px;
        }
     
        #avatar {
            min-width: 310px;
            max-width: auto;
        }
        
    }