/*body div{
    background: rgb(146, 175, 201);
    background: rgb(2, 20, 37); 
  }*/
main{
    
    background: rgb(2, 20, 37);

}
section{
    background: rgb(2, 16, 29); 
    position: relative;
    width: 70%;
    margin: 0 auto; 
}

#contenedor {
    position: relative;
    width: 90%;
    height: 500px;
    margin: 0 auto; 
}

#foto {
    
    background-image: url("../resources/imagen/cara.jpg");
    /* cambia estos dos valores para definir el tamaño de tu círculo */
    height: 150px;
    width: 150px;
    /* los siguientes valores son independientes del tamaño del círculo */
    background-repeat: no-repeat;
    background-position: 50%;
    border-radius: 50%;
    background-size: 100% auto;
    position: absolute;
    top: 20%;
    right: 30%;  
}

#descripcion {
    
    position: absolute;
    margin: 0 auto;
    width: 50%;
    height: -500%;
    top: 50%;
    left: 0;
    right: 0;
    color: azure; 
}

#redes {
    
    position: absolute;
    top: 80%;
    left: 0;
    right: 0;
    width: 20%;
    margin: 0 auto;
    
}
.tituloSeccion{
    padding-left: 10%;
    color: rgb(77, 74, 74); 

}
.tituloArticulo{
    color: rgb(212, 17, 17); 

}
.detalleArticulo{
    color: azure; 
    width: 50%;
    left: 0;
    right: 0;
}
.nivel{
    color: azure; 
}
article{
    padding-left: 15%;
    padding-bottom: 2%;
}

nav{

padding-left: 30%;
padding-right: 30%;
padding-bottom: 5%;



}
footer{
    position: relative;
    top: 100%;
    margin: 0 auto;
    text-align: center;
}