body {
    background-color: #f6f3e8;
    padding: 0;
    margin: 2% 2% 0 5%;
    font: normal 16 Noto ;
    color: #000000;
    line-height: 1.5em;
}

/*=====================================
divisionss
=======================================*/
div#container {
    /*background-image: url(../img-common/paper_st-gilles_center_500x100.jpg);*/
    background-repeat: repeat;
    margin: 0 10px 0 10px;
    }

    div#title {
        display: flex;
        margin: 50px 0 0 0;
        justify-content: center;
        align-items: center;
        color: #736c5f;
        background-color: #f0e2c6;
        font-style: oblique;
        font-size: 200%;
        letter-spacing: 0.2em;
        padding: 1.5em 0 1em 0;
        }
        div#title span.first {
            font-size: 200%;
            font-weight: bold;
            }
        div#title span {font-size: 140%;}
        div#title span.small {font-size: 100%;}

    div#nav {
        display: flex;
        align-items: center;
        justify-content: space-around;
        margin: 30px 0 20px 0;
        }
        
        div#nav ul {
            list-style: none;
            letter-spacing: 0.1em;
        }
        div#nav li {line-height: 1.5em;}
        div#nav li > ul {margin: 0 0 0 30px;}
*       div#nav li.frame {
            margin: 10px 0 0 0;
            border-style: solid;
            border-width: 2px;
            border-color: #a60100;
            padding: 5px;
        }
        div#nav li > img {padding: 0 0.75em 0 0;}
        div#nav span.first {
            font-size: 150%;
            font-weight: bold;
        }
        div#nav > span.lessons {
            font-size: 150%;
            font-weight: bold;
            text-align: center;
            letter-spacing: 0.1em;
            line-height: 1.5em;
            width: 300px;
        }
        
    div#nota {
        margin: 20px 25%;
        color: #69735f;
        font-size: 90%;
        text-align: center;
        }
        div#nota > span {
            border-top-style: solid;
            border-width: 4px;
            border-color: #797979;
            padding: 1em;
        }
        
    p.top {
        clear: left;
        padding: 20px 0 20px 0;
        font-size: 80%;
    }
    /*=====================================*/        
    
    /*=====================================*/        
    div#index {
        margin: 0 25% 5% 0;
        }
        
        div#index > section {
            margin: 0 0 50px 50px;
            border-style: solid;
            border-width: 6px 0 0 0;
            border-color: #e5e3d3;
        }
        
            section > p {
                margin: 0 0 0 150px;
                line-height: 1.5em;
                padding: 0 0 10px 0;
            }
            
            section > img {
                float: left;
                padding: 0 30px 0 0;
            }
            section p > img {padding: 0 0.75em 0 0;}
        
        div#index > h1 {
            margin: 80px 0 30px 0;
            font-size: 150%;
            font-style: oblique;
            letter-spacing: 0.3em;
        }
        
        div#index h2 {
            letter-spacing: 0.2em;
            font-variant: small-caps;
            font-weight: bold;
            line-height: 1.5em;
            margin: 0 0 0 150px;
            padding: 10px 0 5px 0;
        }
            
        div#index span {
            font-size: 150%;
        }
    /*=====================================*/        
    
    /*=====================================*/        
    div#topic {
        margin: 40px 25% 10px 15%;
        }
        
    div#topic > h1 {
        padding: 30px 0 20px 0;
        font-size: 150%;
        font-style: oblique;
        font-weight: bold;
        letter-spacing: 0.2em;
        }
        
    div#topic > h2 {
        padding: 30px 0 10px 0;
        font-size: 130%;
        font-style: oblique;
        letter-spacing: 0.15em;
        }
        
    div#topic > p {
        margin: 0 0 0 40px;
        line-height: 1.5em;
        padding: 0 0 10px 0;
        }
        
    div#topic > ul {
        margin: 0 0 0 80px;
        line-height: 1.5em;
        padding: 0 0 10px 0;
        }
        
    div#topic ul > li ul {
        margin: 0 0 0 30px;
        line-height: 1.5em;
        padding: 0 0 10px 0;
        }
    /*=====================================*/        
    
    hr {
        display: block;
        margin: 10px 25% 0 0;
        color: blue;
        height: 2px;
    }
        
    
    /*=====================================*/        
    
    
/*=====================================
elements
=======================================*/
    /*==================
    links 
    ====================*/
    a {
        letter-spacing: 0.15em;
        padding: 0.5em 0.5em 0.5em 0;
      }
    a:link {color: #928572;}
    a:visited {color: #736d4c; font-style: normal;}
    a:hover {
        color: #931212;
        font-style: oblique;
        }
    a:active {color: #00ff00;}

/*=====================================
class
=======================================*/