* {
    box-sizing: border-box;
    }
    
    body {
        font-family: Arial;
    }
    
    
    /*Contenedor para cajas flexibles*/
    div#principal {
        display:-webkit-flex;
        display: flex;
        width:100% ;
    }
    
    /*Estilo para el menú de navegación*/
    div#menu {
        -webkit-flex:1;
        -ms-flex:1;
        flex: .5;
        background-color: #F5F3EF;
        padding: 30px;
        padding-top: 50px;
    }
    
    /*Estilo para lista dentro del menú*/
    ul#temas {
        list-style-type: none;
        padding: 30px;
        text-decoration-line: none;
        text-align: center;
    }
    
  
    /*Estilo para la caja de logo*/
    div#cajalogo {
        width: 150px;
        max-height: 100px;
        float: left;
        flex: 3;
    }
    
    /*Estilo para el logo*/
    #logo {
        width: 150px;
        max-height: 150px;
        margin-left: 40px;
        margin-top: 50px;
    }
    
    /*Estilo al contenido*/
    div#seccion {
        -webkit-flex: 3;
        -ms-flex: 3;
        flex: 3;
        background-color:rgba(50, 143, 230, 0.445);
        padding: 10px;
        padding-left: 40px;
        padding-right: 40px;
    }
    
    /*Estilo para articulo*/
    div.articulo {
        text-align: justify;
        font-family:Verdana;
        margin-left: 2%;
        margin-right: 2%;
        padding: 10px;
        padding-left: 40px;
        padding-right: 40px;
        
    }
    
    /*Estilo para el pie de página*/
    div#pie {
        background-color:rgba(31, 68, 90, 0.685);
        padding: 8px;
        text-align: center;
        color: aliceblue;
    }
    
    
    /*Diseño responsivo para div principal*/
    @media (max-width:800px) {
        div#principal {
            -webkit-flex-direction: column;
            flex-direction: column;
        }
    }