diff --git a/template/styles.css b/template/styles.css
index a601d3c..d0a9cb9 100644
--- a/template/styles.css
+++ b/template/styles.css
@@ -30,15 +30,18 @@
 }
 
 body {
-  line-height: 1.5em;
-  background-attachment:    fixed;
-  background-image:         url(../template/electronic.jpg);
-  background-position:      0 0;
+  display:  contents;
+   color:                  var(--a-lec_black);
+   background:             var(--a-lec_white);
+   font-family:            sans-serif;
+   font-size:              100%;
+   text-align:             justify;
+   text-justify:           auto;
+   background:             var(--a-lec_white);
 }
 
 /* Contains all website, after <body> */
-div#site_container {
-}
+div#site_container {}
 
 /* div contains <article> and <aside> */
 main {
@@ -50,18 +53,42 @@ main {
  * Article contents styles
 */
 article#article {
-  padding:                    10px 10px 10px 10px;
+  display:                flex;
+  margin:                 0 25px;
 }
 
 header#article_header {}
-img#article_logo {}
-h1#article_title {}
+img#article_logo {
+   display: inline;
+   vertical-align: middle;
+   max-width: 100%;
+   height: auto;
+   float:           left;
+   margin-right:    1rem;
+}
+h1#article_title {
+   font-size:           150%;
+   margin-top:          30px;
+   margin-bottom:       40px;
+}
 a#article_title_link {}
-div#article_refs {}
+div#article_refs {
+  display:                  block;
+  background-color:         var(--a-lec_yellow);
+  position:                 relative;
+  text-align:               left;
+  float:                    right;
+  top:                      -10px;
+  padding:                  5px;
+  font-size:                82%;
+}
 a#post_code {}
 
 /* ! TOC */
-h2.toc_title {}
+h2.toc_title {
+   font-size:           100%;
+   color:               #808080;
+}
 nav.toc {}
 ul.toc_items {}
 li.toc_item {}
@@ -73,21 +100,50 @@ a.toc_item_link {}
  * Order title show id="toc_1", id="toc_2".... for h2 to h6
  * h2 to h6 class set to css DOMAIN (default "tyto")
 */
-h2.tyto {}
-h3.tyto {}
-h4.tyto {}
-h5.tyto {}
-h6.tyto {}
+h2.tyto {
+   font-size:           130%;
+   margin-top:          30px;
+   margin-bottom:       15px;
+   color:               #454545;
+}
+h3.tyto {
+   font-size:           110%;
+   margin-top:          30px;
+   margin-bottom:       15px;
+   color:               #505050;
+}
+h4.tyto {
+   font-size:           100%;
+   color:               #606060;
+}
+h5.tyto {
+   font-size:           100%;
+   color:               #707070;
+}
+h6.tyto {
+   font-size:           100%;
+   color:               #808080;
+}
 
 /* Misc in <article>
  * -----------------
  * "tyto" is default css DOMAIN.
  * Class can be set for these markers
 */
-p.tyto {}
-ul.tyto {}
-ol.tyto {}
-li.tyto {}
+p.tyto {
+   display:                block;
+   margin-top:             10px;
+   margin-bottom:          10px;
+}
+ul.tyto {
+   line-height: 24px;
+}
+ol.tyto {
+   line-height: 24px;
+}
+li.tyto {
+   padding:              3px 0;
+}
 
 /*
  * Words tags
@@ -176,6 +232,10 @@ code.bcode_code {}
 
 a#site_link {}
 header#header {
+   background-attachment:    fixed;
+   background-image:         url(../template/electronic.jpg);
+   background-position:      0 0;
+   margin-top: 0px;
    display:                 flex;
    place-content:           baseline center;
 }
