*{ /*selector de raiz*/
    margin: 0; /*margen externo*/
    padding: 0; /*borde interno*/
    box-sizing: border-box;
    /*declaracion de variables*/
    --color1: #07B0F2; /*variable sistema de color hexadecimal*/
    --color2: #05C7F2; /*variable sistema de color hexadecimal*/
    --color3: #F2C029; /*variable sistema de color hexadecimal*/
    --color4: #F2AE2E; /*variable sistema de color hexadecimal*/
    --color5: #F2F2F2; /*variable sistema de color hexadecimal*/
}

main{
    width: 800px; /*ancho*/

    margin: 20px auto; /*margen externo*/
}
#cabecera{
    display: flex; /*activar flexbox*/
    flex-direction: row; /*alinancion en linea*/
    justify-content: space-between; /*aliniamiento entre ambos*/
    align-items: center; /*alineamiento vertical*/
    background-color: var(--color1); /*color de relleno*/
    padding: 10px; /*borde interno*/
    margin: 5px; /*margen externo*/
}
#menu{
    display: flex; /*activar flexbox*/
    flex-direction: row; /*alinancion en linea*/
    justify-content: right; /*aliniamiento derecha*/
    margin: 5px; /*margen externo*/
}
#menu div{
    padding: 10px; /*borde interno*/
}
#contenido{
    display: flex; /*activar flexbox*/
    flex-direction: row; /*alinancion en linea*/
    justify-content: space-between; /*aliniamiento entre ambos*/
    margin: 5px; /*margen externo*/
}
.contenido{
    margin: 5px; /*margen externo*/
    padding: 10px; /*borde interno*/
    border: 2px solid var(--color3); /*borde con color de relleno*/
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; /*fuente tipografica*/
}
h3{
   text-align: center; /*alinacion central*/
    color: var(--color4); /*sistema color por nombre*/
    background-color: var(--color5); /*color de relleno*/
}
#pie{
    display: flex; /*activar flexbox*/
    flex-direction: row; /*alinancion en linea*/
    justify-content: center; /*alineamiento horizontal*/
    background-color: var(--color1); /*color de relleno*/
}