* {
          --brown-color: rgb(123, 63, 0);
          --blue-color: blue;

          --green-color: green;
          --grey-soft-color: rgb(245, 245, 245);
          --grey-dark-color: rgb(225, 225, 225);
          --grey-middle-color: rgb(235, 235, 235);
          --font-size-big: 19pt;
          --font-size-small: 11pt;
          --font-size-middle: 14pt;
          --height-logotip: 140px;
          --width-logotip: calc(var(--height-logotip) * 1.5);
        }
        body, html {
          background-color: whitesmoke;
          margin: 0;
          padding: 0;
          font-family: "arial narrow";
          font-size: var(--font-size-small);
          
        }

        a {
          text-decoration: none;
          color: var(--brown-color);
        }
        em.part {
            text-decoration: underline;
            color: var(--brown-color);
            margin: 0px 0px 0px 3px;
            font-size: var(--font-size-big);
            cursor: pointer;
        }
        em.subpart {
          text-decoration: underline;

          margin: 0px 0px 0px 3px;
          color: var(--brown-color);
          cursor: pointer;
          font-size: var(--font-size-middle);
        }
        a.chapter {
          color: var(--green-color);
          display: block;
        }

        article.chapter{

          padding: 0px;
          height: calc(100vh - var(--height-logotip));
          overflow-y: auto;
        }        

        aside {
          background-color: var(--grey-middle-color);
          height: 70%;

          width: var(--width-logotip);
          float: right;
        }

        div.title {
          background-color: var(--brown-color);

          height: var(--height-logotip);
          width: calc(100% - var(--width-logotip));
          float: left;
        }

        svg.logotip {
          background-color: var(--grey-soft-color);
          height: var(--height-logotip);
          width: var(--width-logotip);
          float: right;
        }



        svg.scheme {
          background-color: var(--grey-midle-color);
          stroke: var(--blue-color);
          stroke-width: 1;
          fill: none;
          text-anchor: middle;
          height: 700px;
          width: 700px;
        }
        div.name {
          background-color: var(--grey-middle-color);

          height: calc(var(--height-logotip) * 0.50);
          font-size: 45pt;
        }
        div.subchapter {
          background-color: rgb(190, 190, 190);
          margin: 5px;
          padding-bottom: 2.5px;
          border-radius: 10px 10px 10px 10px;
        }
        dl {
            padding-bottom: 10px;
            margin: 0px;
            font-size: var(--font-size-small);
          }
        
        dl:hover{
          font-size: var(--font-size-middle);
          background-color: var(--grey-soft-color);

          box-shadow: 0px 0px 9px var(--grey-dark-color);
        }
            dd {
            color: var(--blue-color);            
          }

          dt {
            color: var(--green-color);
            font-family: monospace;
          }
  
          em {
            font-style: normal;
          }

          em.separator {

            font-size: var(--font-size-big);
          }
          
          dd > em {
            color: var(--brown-color);
          }
          
          dd > pre {
            font-family: monospace;
            margin: 0.5em 1em 0 1.5em;
            padding: 0;
            color: var(--blue-color);
            font-size: var(--font-size-small);
          }
          
          dd > pre > em {


            color: var(--brown-color);
          }

          h1, h2, h3 {
            text-align: center;
            color: var(--brown-color);
          }
          
          h2.subchapter {
            background-color: rgb(170, 170, 170);
            padding: 10px 0px;
            margin-top: 0px;
            border-radius: 10px 10px 0px 0px;
            font-size: 21pt;
        }

        h3.paragraph {
          background-color: var(--grey-dark-color);
          padding: 5px 0px;
          margin: 0px;
          border-radius: 10px 10px 0px 0px;
          font-weight: 100;
          font-size: var(--font-size-middle);
        }

        header {
          color: var(--brown-color);
          height: 17%;
          width: 100%;
        }

        nav.part {
          background-color: var(--grey-middle-color);
          height: calc(var(--height-logotip) * 0.3);
        }

        nav.subpart {
          background-color: var(--grey-middle-color);
          height: calc(var(--height-logotip) * 0.2);
        }
        nav.chapter {
          height: 99%;
          padding: 3px;
          overflow-y: auto;
          color: var(--green-color);
          font-size: var(--font-size-small);
        }


        section.document {
          background-color: var(--grey-soft-color);
          height: calc(100% - var(--height-logotip));
          width:  calc(100% - var(--width-logotip));
          float: left;
        }

        section.paragraph {

          padding: 0px;
          margin: 5px;
          border-radius: 10px;
          background-color: var(--grey-middle-color);
        }