diff --git a/base.db.bkp b/base.db.bkp
deleted file mode 100644
index 52a603e..0000000
Binary files a/base.db.bkp and /dev/null differ
diff --git a/static/blog-blanc&noir.css b/static/blog-blanc&noir.css
index a72338e..8232953 100644
--- a/static/blog-blanc&noir.css
+++ b/static/blog-blanc&noir.css
@@ -1,5 +1,6 @@
  /* kitoy <kitoy__at__kitoy.me> */
 
+@import "/static/blog-default.css";
 :root
 {
     --color-background: #fefefe;
@@ -10,240 +11,3 @@
      --font-basic : system-ui,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,Helvetica,Arial,"Helvetica Neue",sans-serif;
 }
 
-html{
-    height: 100%;
-    width: 80%;
-    margin-left: 10%;
-    
-}
-
-
-body {
-    color: var(--color-text);
-    background-color:  var(--color-background);
-    font-family: var(--font-basic);
-    font-weight: 400;
-}
- 
-h1, h2, h3, h4, h5{
-    color: var(--color-title);
-}
-
-hr {
-    color: var(--color-text);
-}
-
-* {-moz-box-sizing: border-box; box-sizing: border-box;}
-
-a {
-    box-shadow: inset 0 0 0 0 var(--color-text);
-    color: --color-link;
-    padding: 0 .25rem;
-    margin: 0 -.25rem;
-    transition: color .3s ease-in-out, box-shadow .3s ease-in-out;
-}
-
-
-a:hover {
-  color: var(--color-background);
-  box-shadow: inset 300px 0 0 0 var(--color-text);
-  text-decoration: none;
-}
-
-a {
-    color: var(--color-link);
-    text-decoration: underline 2px;
-    font-weight: 700;
-    line-height: 1.5;
-}
-
-
-.date {
-    margin-bottom: 0;
-}
-
-.slug {
-    //margin-left: 1rem;
-    text-align: left;
-    margin-bottom: 2rem;
-}
-
-.readmore {
-    text-align: right;
-}
-
-
-pre {
-    white-space: pre-wrap;       /* css-3 */
-    white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
-    white-space: -pre-wrap;      /* Opera 4-6 */
-    white-space: -o-pre-wrap;    /* Opera 7 */
-    word-wrap: break-word;       /* Internet Explorer 5.5+ */
-}
-
-
-ul {
-    list-style-type: none;
-    margin: 0;
-    padding: 0;
-}
-
-
-.articles {
-    max-width: 80%;
-    margin-left: auto;
-    margin-right: auto;
-    margin-top: 5rem;
-    margin-bottom: 3rem;
-    padding:0.5em;
-    border: 7px double;
-    border-color: var(--text-color);
-    border-radius: 10px 10px 10px 10px;
-    line-height: 1.5;
-    letter-spacing: 0.1vw;
-    text-align: justify;
-}
-
-.articles ul {
-    list-style-type: disc;
-    margin: 5vw;
-    padding-top: 1vw;
-    padding-bottom: 1vw;
-    padding-left: 1.5vw;
-}
-
-
-.head-article {
-     text-align: center;
- }
-
-
-
-.text-article p {
-    padding-left: 2vw;
-    padding-right:2vw;
-}
-
-.text-article pre {
-    padding-left: 2vw;
-    padding-right:2vw;
-}
-
-.text-article blockquote {
-    padding-left: 2vw;
-    padding-right:2vw;
-}
-
-
-.text-article h2, h3, h4, h5 {
-    padding-left: 1vw;
-    padding-right:1vw;
-  
-}
-
-
-.index {
-    text-align: left;
-}
-
-.articles img {
-     display: block;
-     margin-left: auto;
-     margin-right: auto;
-     width: 50%;
-     margin-bottom: 2vw;
-
- }
-
-.articles .description {
-    font-weight: 300;
-    font-style: italic;
-    font-size: 1.5vw;
-    padding-bottom: 30px;
-    color: ;
-}
-
-
-
-.pagination a {
-    border: 1px solid;
-    border-color: $color_title;
-    padding: 3px;
-    font-size: 13px;
-}
-
-.center {
-    margin: auto;
-    width: 50%;
-    padding: 10px;
-}
-
-.contact{
-    text-align:center;
-}
-
-footer {
-    position: relative;
-    bottom:0px;
-    width: 100%;
-    text-align:center;
-    padding-bottom:1vw;
-}
-
-
-@media only screen and (max-width: 980px)
-{
-    
-    .articles .description {
-	font-size: 4vw;
-    }
-    
-    .articles {
-	max-width: 100%;
-	margin-left: auto;
-	position: relative;
-	font-size: 3.5vw;
-	
-    }
-    
-    footer {
-	font-size: 3vw;
-    }
-    
-    .articles img {
-	display: block;
-	margin-left: auto;
-	margin-right: auto;
-	width: 80%;
-    }
-
-
-    
-}
-
-
-
-@media only screen and (max-width: 980px){
-
-    html{
-	height: 100%;
-	width: 100%;
-	margin: 0;
-    }
-}
-
-@media only screen and (max-width: 768px)
-{ 
-    .h1 {
-	font-size: 5vw;
-    }
-    
-    .icons img {
-	width: 7vw;
-	height: 7vw;
-	margin: 20px;
-	display:inline-block;
-	align-items:center;
-    }
-
-}
diff --git a/static/blog-default.css b/static/blog-default.css
new file mode 100644
index 0000000..4531b0a
--- /dev/null
+++ b/static/blog-default.css
@@ -0,0 +1,235 @@
+ /* kitoy <kitoy__at__kitoy.me> */
+
+ 
+ html{
+   height: 100%;
+   width: 80%;
+   margin-left: 10%;
+
+ }
+
+
+ body {
+    color: var(--color-text);
+    background-color:  var(--color-background);
+    font-family: var(--font-basic);
+    font-weight: 400;
+ }
+
+ h1, h2, h3, h4, h5{
+     color: var(--color-title);
+ }
+ 
+ hr {
+     color: var(--color-text);
+ }
+ 
+ * {-moz-box-sizing: border-box; box-sizing: border-box;}
+
+a {
+  box-shadow: inset 0 0 0 0 var(--color-text);
+  color: var(--color-link);
+  padding: 0 .25rem;
+  margin: 0 -.25rem;
+  transition: color .3s ease-in-out, box-shadow .3s ease-in-out;
+}
+
+
+a:hover {
+  color: var(--color-background);
+  box-shadow: inset 9999px 0 0 0 var(--color-text);
+  text-decoration: none;
+}
+
+a {
+    color: var(--color-link);
+    text-decoration: underline 2px;
+    font-weight: 700;
+    line-height: 1.5;
+}
+
+ 
+.date {
+    margin-bottom: 0;
+}
+
+.slug {
+    //margin-left: 1rem;
+    text-align: left;
+    margin-bottom: 2rem;
+}
+
+.readmore {
+    text-align: right;
+}
+
+
+pre {
+    white-space: pre-wrap;       /* css-3 */
+    white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
+    white-space: -pre-wrap;      /* Opera 4-6 */
+    white-space: -o-pre-wrap;    /* Opera 7 */
+    word-wrap: break-word;       /* Internet Explorer 5.5+ */
+}
+
+
+ul {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+}
+
+
+.articles {
+    max-width: 80%;
+    margin-left: auto;
+    margin-right: auto;
+    margin-top: 5rem;
+    margin-bottom: 3rem;
+    padding:0.5em;
+    border: 7px double;
+    border-color: var(--text-color);
+    border-radius: 10px 10px 10px 10px;
+    line-height: 1.5;
+    letter-spacing: 0.1vw;
+    text-align: justify;
+}
+
+.articles ul {
+    list-style-type: disc;
+    margin: 5vw;
+    padding-top: 1vw;
+    padding-bottom: 1vw;
+    padding-left: 1.5vw;
+}
+
+
+.head-article {
+    text-align: center;
+}
+
+
+.text-article p {
+    padding-left: 2vw;
+    padding-right:2vw;
+}
+
+.text-article pre {
+    padding-left: 2vw;
+    padding-right:2vw;
+}
+
+.text-article blockquote {
+    padding-left: 2vw;
+    padding-right:2vw;
+}
+
+
+.text-article h2, h3, h4, h5 {
+    padding-left: 1vw;
+    padding-right:1vw;
+    
+}
+
+.index {
+    text-align: left;
+}
+
+.articles img {
+     display: block;
+     margin-left: auto;
+     margin-right: auto;
+     width: 50%;
+     margin-bottom: 2vw;
+ }
+
+.articles .description {
+    font-weight: 300;
+    font-style: italic;
+    font-size: 1.5vw;
+    padding-bottom: 30px;
+}
+
+
+
+.pagination a {
+     border: 1px solid;
+     border-color: $color_title;
+     padding: 3px;
+     font-size: 13px;
+ }
+
+.center {
+    margin: auto;
+    width: 50%;
+     padding: 10px;
+}
+
+.contact{
+    text-align:center;
+ }
+
+footer {
+    position: relative;
+    bottom:0px;
+    width: 100%;
+    text-align:center;
+    padding-bottom:1vw;
+}
+
+ 
+@media only screen and (max-width: 980px)
+{
+    
+    .articles .description {
+	 font-size: 4vw;
+    }
+    
+     .articles {
+	 margin-left: auto;
+	 position: relative;
+	 font-size: 3.5vw;
+	 
+     }
+     
+     footer {
+	 font-size: 3vw;
+     }
+     
+     .articles img {
+	 display: block;
+	 margin-left: auto;
+	 margin-right: auto;
+	 width: 80%;
+     }
+
+
+     
+ }
+
+
+
+ @media only screen and (max-width: 980px){
+
+      html{
+	  height: 100%;
+	  width: 100%;
+	  margin: 0;
+      }
+ }
+
+  @media only screen and (max-width: 768px)
+  { 
+      .h1 {
+	  font-size: 5vw;
+      }
+           
+      .icons img {
+	  width: 7vw;
+	  height: 7vw;
+	  margin: 20px;
+	  display:inline-block;
+	  align-items:center;
+      }
+
+  }
diff --git a/static/blog-noir&blanc.css b/static/blog-noir&blanc.css
index 8e064ae..a32c804 100644
--- a/static/blog-noir&blanc.css
+++ b/static/blog-noir&blanc.css
@@ -1,5 +1,7 @@
  /* kitoy <kitoy__at__kitoy.me> */
 
+
+
  :root
  {
      --color-background: #010101;
@@ -10,238 +12,4 @@
      --font-basic : system-ui,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,Helvetica,Arial,"Helvetica Neue",sans-serif;
  }
  
- html{
-   height: 100%;
-   width: 80%;
-   margin-left: 10%;
-
- }
-
-
- body {
-    color: var(--color-text);
-    background-color:  var(--color-background);
-    font-family: var(--font-basic);
-    font-weight: 400;
- }
-
- h1, h2, h3, h4, h5{
-     color: var(--color-title);
- }
- 
- hr {
-     color: var(--color-text);
- }
- 
- * {-moz-box-sizing: border-box; box-sizing: border-box;}
-
-a {
-  box-shadow: inset 0 0 0 0 var(--color-text);
-  color: --color-link;
-  padding: 0 .25rem;
-  margin: 0 -.25rem;
-  transition: color .3s ease-in-out, box-shadow .3s ease-in-out;
-}
-
-
-a:hover {
-  color: var(--color-background);
-  box-shadow: inset 300px 0 0 0 var(--color-text);
-  text-decoration: none;
-}
-
-a {
-    color: var(--color-link);
-    text-decoration: underline 2px;
-    font-weight: 700;
-    line-height: 1.5;
-}
-
- 
- .date {
-   margin-bottom: 0;
- }
-
- .slug {
-   //margin-left: 1rem;
-   text-align: left;
-   margin-bottom: 2rem;
- }
-
- .readmore {
-   text-align: right;
- }
-
-
- pre {
-  white-space: pre-wrap;       /* css-3 */
-  white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
-  white-space: -pre-wrap;      /* Opera 4-6 */
-  white-space: -o-pre-wrap;    /* Opera 7 */
-  word-wrap: break-word;       /* Internet Explorer 5.5+ */
- }
-
-
- ul {
-     list-style-type: none;
-     margin: 0;
-     padding: 0;
- }
- 
-
- .articles {
-     max-width: 80%;
-     margin-left: auto;
-     margin-right: auto;
-     margin-top: 5rem;
-     margin-bottom: 3rem;
-     padding:0.5em;
-     border: 7px double;
-     border-color: var(--text-color);
-     border-radius: 10px 10px 10px 10px;
-     line-height: 1.5;
-     letter-spacing: 0.1vw;
-     text-align: justify;
- }
-
- .articles ul {
-     list-style-type: disc;
-     margin: 5vw;
-     padding-top: 1vw;
-     padding-bottom: 1vw;
-     padding-left: 1.5vw;
- }
-
-
-.head-article {
-     text-align: center;
- }
-
-
-.text-article p {
-    padding-left: 2vw;
-    padding-right:2vw;
-}
-
-.text-article pre {
-    padding-left: 2vw;
-    padding-right:2vw;
-}
-
-.text-article blockquote {
-    padding-left: 2vw;
-    padding-right:2vw;
-}
-
-.text-article h2, h3, h4, h5 {
-    padding-left: 1vw;
-    padding-right:1vw;
-  
-}
-
-
-.index {
-    text-align: left;
-}
-
-.articles img {
-     display: block;
-     margin-left: auto;
-     margin-right: auto;
-     width: 50%;
-     margin-bottom: 2vw;
-
- }
-
- .articles .description {
-    font-weight: 300;
-    font-style: italic;
-    font-size: 1.5vw;
-    padding-bottom: 30px;
-    color: ;
- }
-
-
-
- .pagination a {
-     border: 1px solid;
-     border-color: $color_title;
-     padding: 3px;
-     font-size: 13px;
- }
-
- .center {
-     margin: auto;
-     width: 50%;
-     padding: 10px;
- }
-
- .contact{
-     text-align:center;
- }
-
- footer {
-     position: relative;
-     bottom:0px;
-     width: 100%;
-     text-align:center;
-     padding-bottom:1vw;
- }
-
- 
- @media only screen and (max-width: 980px)
- {
-     
-     .articles .description {
-	 font-size: 4vw;
-     }
-     
-     .articles {
-	 max-width: 100%;
-	 margin-left: auto;
-	 position: relative;
-	 font-size: 3.5vw;
-	 
-     }
-     
-     footer {
-	 font-size: 3vw;
-     }
-     
-     .articles img {
-	 display: block;
-	 margin-left: auto;
-	 margin-right: auto;
-	 width: 80%;
-     }
-
-
-     
- }
-
-
-
- @media only screen and (max-width: 980px){
-
-      html{
-	  height: 100%;
-	  width: 100%;
-	  margin: 0;
-      }
- }
-
-  @media only screen and (max-width: 768px)
-  { 
-      .h1 {
-	  font-size: 5vw;
-      }
-           
-      .icons img {
-	  width: 7vw;
-	  height: 7vw;
-	  margin: 20px;
-	  display:inline-block;
-	  align-items:center;
-      }
-
-  }
+@import "/static/blog-default.css";
diff --git a/static/blog-orange&noir.css b/static/blog-orange&noir.css
index 3102f28..2db1e6f 100644
--- a/static/blog-orange&noir.css
+++ b/static/blog-orange&noir.css
@@ -1,5 +1,5 @@
  /* kitoy <kitoy__at__kitoy.me> */
-
+ @import "/static/blog-default.css";
  :root
  {
      --color-background: #010101;
@@ -9,240 +9,6 @@
      --font-emoji : "Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
      --font-basic : system-ui,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,Helvetica,Arial,"Helvetica Neue",sans-serif;
  }
- 
- html{
-     height: 100%;
-     width: 80%;
-     margin-left: 10%;
- }
 
 
- body {
-     color: var(--color-text);
-     background-color:  var(--color-background);
-     font-family: var(--font-basic);
-     font-weight: 400;
- }
- 
- h1, h2, h3, h4, h5{
-     color: var(--color-title);
- }
- 
- hr {
-     color: var(--color-text);
- }
- 
- * {
-     -moz-box-sizing: border-box; box-sizing: border-box;
-   }
- 
- a {
-     box-shadow: inset 0 0 0 0 var(--color-text);
-     color: --color-link;
-     padding: 0 .25rem;
-     margin: 0 -.25rem;
-     transition: color .3s ease-in-out, box-shadow .3s ease-in-out;
- }
- 
-
- a:hover {
-     color: var(--color-background);
-     box-shadow: inset 300px 0 0 0 var(--color-text);
-     text-decoration: none;
- }
-
- a {
-     color: var(--color-link);
-     text-decoration: underline 2px;
-     font-weight: 700;
-     line-height: 1.5;
- }
-
  
- .date {
-     margin-bottom: 0;
- }
-
- .slug {
-     //margin-left: 1rem;
-     text-align: left;
-     margin-bottom: 2rem;
- }
-
- .readmore {
-     text-align: right;
- }
-
-
- pre {
-     white-space: pre-wrap;       /* css-3 */
-     white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
-     white-space: -pre-wrap;      /* Opera 4-6 */
-     white-space: -o-pre-wrap;    /* Opera 7 */
-     word-wrap: break-word;       /* Internet Explorer 5.5+ */
- }
-
-
- ul {
-     list-style-type: none;
-     margin: 0;
-     padding: 0;
- }
- 
-
- .articles {
-     max-width: 80%;
-     margin-left: auto;
-     margin-right: auto;
-     margin-top: 5rem;
-     margin-bottom: 3rem;
-     padding:0.5em;
-     border: 7px double;
-     border-color: var(--text-color);
-     border-radius: 10px 10px 10px 10px;
-     line-height: 1.5;
-     letter-spacing: 0.1vw;
-     text-align: justify;
- }
-
- .articles ul {
-     list-style-type: disc;
-     margin: 5vw;
-     padding-top: 1vw;
-     padding-bottom: 1vw;
-     padding-left: 1.5vw;
- }
-
-
- .head-article {
-     text-align: center;
- }
-
-
- .text-article p {
-     padding-left: 2vw;
-     padding-right:2vw;
- }
-
- .text-article pre {
-    padding-left: 2vw;
-    padding-right:2vw;
-}
-
-.text-article blockquote {
-    padding-left: 2vw;
-    padding-right:2vw;
-}
-
- .text-article h2, h3, h4, h5 {
-     padding-left: 1vw;
-     padding-right:1vw;
-     
- }
-
-
- .index {
-     text-align: left;
- }
-
- .articles img {
-     display: block;
-     margin-left: auto;
-     margin-right: auto;
-     width: 50%;
-     margin-bottom: 2vw;
-
- }
-
- .articles .description {
-     font-weight: 300;
-     font-style: italic;
-     font-size: 1.5vw;
-     padding-bottom: 30px;
-     color: ;
- }
-
-
-
- .pagination a {
-     border: 1px solid;
-     border-color: $color_title;
-     padding: 3px;
-     font-size: 13px;
- }
-
- .center {
-     margin: auto;
-     width: 50%;
-     padding: 10px;
- }
-
- .contact{
-     text-align:center;
- }
-
- footer {
-     position: relative;
-     bottom:0px;
-     width: 100%;
-     text-align:center;
-     padding-bottom:1vw;
- }
-
- 
- @media only screen and (max-width: 980px)
- {
-     
-     .articles .description {
-	 font-size: 4vw;
-     }
-     
-     .articles {
-	 max-width: 100%;
-	 margin-left: auto;
-	 position: relative;
-	 font-size: 3.5vw;
-	 
-     }
-     
-     footer {
-	 font-size: 3vw;
-     }
-     
-     .articles img {
-	 display: block;
-	 margin-left: auto;
-	 margin-right: auto;
-	 width: 80%;
-     }
-
-
-     
- }
-
-
-
- @media only screen and (max-width: 980px){
-     html
-     {
-	 height: 100%;
-	 width: 100%;
-	 margin: 0;
-     }
- }
- 
- @media only screen and (max-width: 768px)
- { 
-     .h1 {
-	 font-size: 5vw;
-     }
-     
-     .icons img {
-	 width: 7vw;
-	 height: 7vw;
-	 margin: 20px;
-	 display:inline-block;
-	 align-items:center;
-     }
-
- }
diff --git a/static/blog-orangina.css b/static/blog-orangina.css
index 4a5d990..529a6b4 100644
--- a/static/blog-orangina.css
+++ b/static/blog-orangina.css
@@ -9,239 +9,6 @@
      --font-emoji : "Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
      --font-basic : system-ui,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,Helvetica,Arial,"Helvetica Neue",sans-serif;
  }
- 
- html{
-   height: 100%;
-   width: 80%;
-   margin-left: 10%;
 
- }
+ @import "/static/blog-default.css";
 
-
- body {
-    color: var(--color-text);
-    background-color:  var(--color-background);
-    font-family: var(--font-basic);
-    font-weight: 400;
- }
-
- h1, h2, h3, h4, h5{
-     color: var(--color-title);
- }
- 
- hr {
-     color: var(--color-text);
- }
- 
- * {-moz-box-sizing: border-box; box-sizing: border-box;}
-
-a {
-  box-shadow: inset 0 0 0 0 var(--color-text);
-  color: --color-link;
-  padding: 0 .25rem;
-  margin: 0 -.25rem;
-  transition: color .3s ease-in-out, box-shadow .3s ease-in-out;
-}
-
-
-a:hover {
-  color: var(--color-background);
-  box-shadow: inset 300px 0 0 0 var(--color-text);
-  text-decoration: none;
-}
-
-a {
-    color: var(--color-link);
-    text-decoration: underline 2px;
-    font-weight: 700;
-    line-height: 1.5;
-}
-
- 
- .date {
-   margin-bottom: 0;
- }
-
- .slug {
-   //margin-left: 1rem;
-   text-align: left;
-   margin-bottom: 2rem;
- }
-
- .readmore {
-   text-align: right;
- }
-
-
- pre {
-  white-space: pre-wrap;       /* css-3 */
-  white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
-  white-space: -pre-wrap;      /* Opera 4-6 */
-  white-space: -o-pre-wrap;    /* Opera 7 */
-  word-wrap: break-word;       /* Internet Explorer 5.5+ */
- }
-
-
- ul {
-     list-style-type: none;
-     margin: 0;
-     padding: 0;
- }
- 
-
- .articles {
-     max-width: 80%;
-     margin-left: auto;
-     margin-right: auto;
-     margin-top: 5rem;
-     margin-bottom: 3rem;
-     padding:0.5em;
-     border: 7px double;
-     border-color: var(--text-color);
-     border-radius: 10px 10px 10px 10px;
-     line-height: 1.5;
-     letter-spacing: 0.1vw;
-     text-align: justify;
- }
-
- .articles ul {
-     list-style-type: disc;
-     margin: 5vw;
-     padding-top: 1vw;
-     padding-bottom: 1vw;
-     padding-left: 1.5vw;
- }
-
-
-.head-article {
-     text-align: center;
- }
-
-
-.text-article p {
-    padding-left: 2vw;
-    padding-right:2vw;
-}
-
-.text-article pre {
-    padding-left: 2vw;
-    padding-right:2vw;
-}
-
-.text-article blockquote {
-    padding-left: 2vw;
-    padding-right:2vw;
-}
-
-.text-article h2, h3, h4, h5 {
-    padding-left: 1vw;
-    padding-right:1vw;
-  
-}
-
-
-.index {
-    text-align: left;
-}
-
-.articles img {
-     display: block;
-     margin-left: auto;
-     margin-right: auto;
-     width: 50%;
-     margin-bottom: 2vw;
-
- }
-
- .articles .description {
-    font-weight: 300;
-    font-style: italic;
-    font-size: 1.5vw;
-    padding-bottom: 30px;
-    color: ;
- }
-
-
-
- .pagination a {
-     border: 1px solid;
-     border-color: $color_title;
-     padding: 3px;
-     font-size: 13px;
- }
-
- .center {
-     margin: auto;
-     width: 50%;
-     padding: 10px;
- }
-
- .contact{
-     text-align:center;
- }
-
- footer {
-     position: relative;
-     bottom:0px;
-     width: 100%;
-     text-align:center;
-     padding-bottom:1vw;
- }
-
- 
- @media only screen and (max-width: 980px)
- {
-     
-     .articles .description {
-	 font-size: 4vw;
-     }
-     
-     .articles {
-	 max-width: 100%;
-	 margin-left: auto;
-	 position: relative;
-	 font-size: 3.5vw;
-	 
-     }
-     
-     footer {
-	 font-size: 3vw;
-     }
-     
-     .articles img {
-	 display: block;
-	 margin-left: auto;
-	 margin-right: auto;
-	 width: 80%;
-     }
-
-
-     
- }
-
-
-
- @media only screen and (max-width: 980px){
-
-      html{
-	  height: 100%;
-	  width: 100%;
-	  margin: 0;
-      }
- }
-
-  @media only screen and (max-width: 768px)
-  { 
-      .h1 {
-	  font-size: 5vw;
-      }
-           
-      .icons img {
-	  width: 7vw;
-	  height: 7vw;
-	  margin: 20px;
-	  display:inline-block;
-	  align-items:center;
-      }
-
-  }
diff --git a/static/blog.css b/static/blog.css
index 1d3853e..b54553b 100644
--- a/static/blog.css
+++ b/static/blog.css
@@ -1,5 +1,6 @@
  /* kitoy <kitoy__at__kitoy.me> */
 
+@import "/static/blog-default.css";
  :root
  {    
      --color-background: #202020;
@@ -9,236 +10,6 @@
      --font-emoji : "Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
      --font-basic : system-ui,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,Helvetica,Arial,"Helvetica Neue",sans-serif;
  }
- 
- html{
-   height: 100%;
-   width: 80%;
-   margin-left: 10%;
-
- }
-
-
- body {
-    color: var(--color-text);
-    background-color:  var(--color-background);
-    font-family: var(--font-basic);
-    font-weight: 400;
- }
-
- h1, h2, h3, h4, h5{
-     color: var(--color-title);
- }
- 
- hr {
-     color: var(--color-text);
- }
- 
- * {-moz-box-sizing: border-box; box-sizing: border-box;}
-
-a {
-  box-shadow: inset 0 0 0 0 var(--color-text);
-  color: --color-link;
-  padding: 0 .25rem;
-  margin: 0 -.25rem;
-  transition: color .3s ease-in-out, box-shadow .3s ease-in-out;
-}
-
-
-a:hover {
-  color: var(--color-background);
-  box-shadow: inset 300px 0 0 0 var(--color-text);
-  text-decoration: none;
-}
-
-a {
-    color: var(--color-link);
-    text-decoration: underline 2px;
-    font-weight: 700;
-    line-height: 1.5;
-}
-
- 
-.date {
-    margin-bottom: 0;
-}
-
-.slug {
-    //margin-left: 1rem;
-    text-align: left;
-    margin-bottom: 2rem;
-}
-
-.readmore {
-    text-align: right;
-}
-
-
-pre {
-    white-space: pre-wrap;       /* css-3 */
-    white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
-    white-space: -pre-wrap;      /* Opera 4-6 */
-    white-space: -o-pre-wrap;    /* Opera 7 */
-    word-wrap: break-word;       /* Internet Explorer 5.5+ */
-}
-
-
-ul {
-    list-style-type: none;
-    margin: 0;
-    padding: 0;
-}
-
-
-.articles {
-    max-width: 80%;
-    margin-left: auto;
-    margin-right: auto;
-    margin-top: 5rem;
-    margin-bottom: 3rem;
-    padding:0.5em;
-    border: 7px double;
-    border-color: var(--text-color);
-    border-radius: 10px 10px 10px 10px;
-    line-height: 1.5;
-    letter-spacing: 0.1vw;
-    text-align: justify;
-}
-
-.articles ul {
-    list-style-type: disc;
-    margin: 5vw;
-    padding-top: 1vw;
-    padding-bottom: 1vw;
-    padding-left: 1.5vw;
-}
-
-
-.head-article {
-    text-align: center;
-}
-
-
-.text-article p {
-    padding-left: 2vw;
-    padding-right:2vw;
-}
-
-.text-article pre {
-    padding-left: 2vw;
-    padding-right:2vw;
-}
-
-.text-article blockquote {
-    padding-left: 2vw;
-    padding-right:2vw;
-}
-
-
-.text-article h2, h3, h4, h5 {
-    padding-left: 1vw;
-    padding-right:1vw;
-    
-}
-
-.index {
-    text-align: left;
-}
-
-.articles img {
-     display: block;
-     margin-left: auto;
-     margin-right: auto;
-     width: 50%;
-     margin-bottom: 2vw;
- }
-
-.articles .description {
-    font-weight: 300;
-    font-style: italic;
-    font-size: 1.5vw;
-    padding-bottom: 30px;
-}
 
 
 
-.pagination a {
-     border: 1px solid;
-     border-color: $color_title;
-     padding: 3px;
-     font-size: 13px;
- }
-
-.center {
-    margin: auto;
-    width: 50%;
-     padding: 10px;
-}
-
-.contact{
-    text-align:center;
- }
-
-footer {
-    position: relative;
-    bottom:0px;
-    width: 100%;
-    text-align:center;
-    padding-bottom:1vw;
-}
-
- 
-@media only screen and (max-width: 980px)
-{
-    
-    .articles .description {
-	 font-size: 4vw;
-    }
-    
-     .articles {
-	 margin-left: auto;
-	 position: relative;
-	 font-size: 3.5vw;
-	 
-     }
-     
-     footer {
-	 font-size: 3vw;
-     }
-     
-     .articles img {
-	 display: block;
-	 margin-left: auto;
-	 margin-right: auto;
-	 width: 80%;
-     }
-
-
-     
- }
-
-
-
- @media only screen and (max-width: 980px){
-
-      html{
-	  height: 100%;
-	  width: 100%;
-	  margin: 0;
-      }
- }
-
-  @media only screen and (max-width: 768px)
-  { 
-      .h1 {
-	  font-size: 5vw;
-      }
-           
-      .icons img {
-	  width: 7vw;
-	  height: 7vw;
-	  margin: 20px;
-	  display:inline-block;
-	  align-items:center;
-      }
-
-  }