diff --git a/start_site.py b/start_site.py
index 075515b..cdfff5f 100644
--- a/start_site.py
+++ b/start_site.py
@@ -20,11 +20,14 @@ Markdown(app)
 app.config["husk"] = toml.load("settings.toml")
 content_path = app.config["husk"]["content"]["path"]
 highlight_style = app.config["husk"]["content"]["style"]
-stylesheet = f"{highlight_style}.css"
-stylesheet_auto_complete = f"{highlight_style}-auto-complete.css"
+stylesheet = "stylesheet.css"
+stylesheet_auto_complete = "auto-complete.css"
 project_name =  app.config["husk"]["project"]["name"]
 project_title = app.config["husk"]["project"]["title"]
 
+app.config["husk"]["style"] = toml.load("style.toml")
+colors = app.config["husk"]["style"][highlight_style]
+
 
 @app.route('/index.json')
 def index():
@@ -40,7 +43,7 @@ def index():
 def content(path="README"):
     with open(os.path.join(app.root_path, content_path, f'{path}.md'), "r") as _f:
         md_file = _f.read()
-    md = markdown.Markdown(extensions=['toc',TocExtension(toc_class="HolyGrail-ads", title=""),"fenced_code", "codehilite", "tables", "mdx_math"], extension_configs={"mdx_math": {"enable_dollar_delimiter": True}})
+    md = markdown.Markdown(extensions=['toc',TocExtension(toc_class="", title=""),"fenced_code", "codehilite", "tables", "mdx_math"], extension_configs={"mdx_math": {"enable_dollar_delimiter": True}})
     html = md.convert(md_file)
     formatter = HtmlFormatter(style=highlight_style, full=True, cssclass="codehilite")
     css_string = formatter.get_style_defs()
@@ -49,6 +52,7 @@ def content(path="README"):
     res = render_template(
             "documentation.html", 
             toc=md.toc, md_doc=md_template, 
+            colors = colors,
             stylesheet=stylesheet, stylesheet_auto_complete=stylesheet_auto_complete, 
             project_name=project_name, project_title=project_title,
             tree=cut_path_tree(
diff --git a/static/auto-complete.css b/static/auto-complete.css
index 5e45d77..4fe654a 100644
--- a/static/auto-complete.css
+++ b/static/auto-complete.css
@@ -1,9 +1,7 @@
 .autocomplete-suggestions {
     text-align: left;
     cursor: default;
-    border: 1px solid #262626;
     border-top: 0;
-    background: #ecf5ff;
     box-shadow: -1px 1px 3px rgba(0,0,0,.1);
 
     /* core styles should not be changed */
@@ -16,6 +14,7 @@
     box-sizing: border-box;
     
 }
+
 .autocomplete-suggestion {
     position: relative;
     cursor: pointer;
@@ -24,22 +23,16 @@
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
-    color: #262626;
 }
 
 .autocomplete-suggestion b {
     font-weight: normal;
-    color: #262626;
 }
 
 .autocomplete-suggestion.selected {
-    background: #2e9dff;
-    color: #e5e5e5;
 }
 
 .autocomplete-suggestion:hover {
-    background: #2e9dff;
-    color: #e5e5e5;
 }
 
 .autocomplete-suggestion > .context {
diff --git a/static/github-dark-auto-complete.css b/static/github-dark-auto-complete.css
index f564cff..4fe654a 100644
--- a/static/github-dark-auto-complete.css
+++ b/static/github-dark-auto-complete.css
@@ -1,9 +1,7 @@
 .autocomplete-suggestions {
     text-align: left;
     cursor: default;
-    border: 1px solid #c6cdd5;
     border-top: 0;
-    background: #0d1117;
     box-shadow: -1px 1px 3px rgba(0,0,0,.1);
 
     /* core styles should not be changed */
@@ -16,6 +14,7 @@
     box-sizing: border-box;
     
 }
+
 .autocomplete-suggestion {
     position: relative;
     cursor: pointer;
@@ -24,22 +23,16 @@
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
-    color: #ecf2f8;
 }
 
 .autocomplete-suggestion b {
     font-weight: normal;
-    color: #161b22;
 }
 
 .autocomplete-suggestion.selected {
-    background: #77bdfb;
-    color: #ecf2f8;
 }
 
 .autocomplete-suggestion:hover {
-    background: #77bdfb;
-    color: #ecf2f8;
 }
 
 .autocomplete-suggestion > .context {
diff --git a/static/github-dark.css b/static/github-dark.css
index 5a1b95c..54f0bea 100644
--- a/static/github-dark.css
+++ b/static/github-dark.css
@@ -1,18 +1,21 @@
-html *{ font-family: Dejavu Sans Mono, MesloGS NF, Menlo, Consolas, Monospace !important; }
-body { text-decoration: none; color: #ecf2f8; background-color: #161b22;}
+html *{ font-family: Dejavu Sans Mono, MesloGS NF, Menlo, Consolas, Twemoji Mozilla Monospace !important; }
+body { margin:0; padding: 0; text-decoration: none;}
 blockquote { text-align: center; font-size: 16px; font-style: normal; line-height: 30px;}
-pre { background-color: #0d1117;color: #ecf2f8;border: 1px solid #89929b; font-size: 14px; padding-left: 2ch;padding-top:2ch; padding-bottom: 2ch; overflow: auto; }
-code { background-color: #0d1117; color: #ecf2f8; }
+pre { font-size: 14px; padding-left: 2ch;padding-top:2ch; padding-bottom: 2ch; overflow: auto; max-width:100%; border-radius: 5px;}
+code { }
 hr { height: 0px; }
 a {color: inherit; }  
-a:hover {color: #77bdfb; text-decoration: solid underline;}
-details > summary{ background-color: #0d1117; font-size: 18px;}
-details > summary:hover { background-color: #21262d; color: #ecf2f8;}
+a:hover { text-decoration: solid underline;}
+details > summary{ font-size: 18px;}
+details > summary:hover { }
 details summary::-webkit-details-marker,
-details summary::marker { content: "\1F4C1\20";}
-::selection { background-color: #fa7970; }
-::-moz-selection { background-color: #fa7970; }
-.menu { line-height: 1em; font-size: 32px; line-height: 1em; text-decoration: none; }
+/*details summary::marker { content: "\1F4C1\20";}*/
+details summary::marker { display: none; content: ""; }
+::selection { }
+::-moz-selection { }
+.menu { line-height: 1em; font-size: 32px; text-decoration: none; width: 100%; margin: 0 auto; opacity: 1; }
+.banner { float: left; margin-left: 3ch; padding-top: 8px;}
+.header-wrapper { width: 100%; position: fixed; top: 0; padding-bottom: 8px; padding-top: 8px; opacity: 0.8; }
 
 .HolyGrail,
 .HolyGrail-body {
@@ -23,15 +26,16 @@ details summary::marker { content: "\1F4C1\20";}
 .HolyGrail-nav {
   padding-right: 1em;
   padding-top: 1em;
+  padding-bottom: 1em;
   order: -1;
-  background-color: #0d1117;
 }
 
-@media (min-width: 48em) {
+@media (min-width: 768px) {
   .HolyGrail-body {
     flex-direction: row;
     flex: 1;
     text-align: left;
+    padding-top: 6vh;
   }
 
   .HolyGrail-content {
@@ -39,22 +43,33 @@ details summary::marker { content: "\1F4C1\20";}
     text-align: left;
     margin-left: 1em;
     margin-right: 1em;
-    width: 70%;
-    border-top: 1px solid #89929b; border-bottom: 1px solid #89929b;
+    max-width: 80.5em;
   }
 
   .HolyGrail-nav, .HolyGrail-ads {
     /* 12em is the width of the columns */
-    flex: 0 0 14em;
-    background-color: #0d1117;
+    flex: 0 0 12em;
     /* experimental line height */
     line-height: 1.8em;
-    width: 15%;
   }
+  .HolyGrail-ads {
+       overflow: hidden;
+       padding-right: 8px;
+    min-width: 18em;
+    max-width: 18em;
+    border-top-left-radius: 10px;
+    border-bottom-left-radius: 10px;
+    }
+  .HolyGrail-nav {
+    min-width: 18em;
+    max-width: 18em;
+    border-top-right-radius: 10px;
+    border-bottom-right-radius: 10px;
+    }
 
   .HolyGrail-nav ul {
         list-style-type: none!important;
-        padding-left : 1ch;
+        padding-left: 1.5ch;
         margin: 0em;
         text-align: left;
   }
@@ -70,7 +85,10 @@ details summary::marker { content: "\1F4C1\20";}
   }
 
   .HolyGrail-nav li::marker {
-        content: "\1F4DD\20";
+        /*content: "\1F4DD\20";*/
+        display: none;
+        content: "";
+        
     }
 
   .HolyGrail-nav a{
@@ -102,35 +120,32 @@ details summary::marker { content: "\1F4C1\20";}
   }
 
   .HolyGrail-ads  ul{
-        padding-left: 0.5em;
+        padding-left: 1.5ch;
         padding-right: 0;
   }
 
   .HolyGrail-ads ul li:before {
-        content: "\203B\20";
+        content: "\007C\20";
   }
-
 }
 
-.search-container{
-    position: relative;
+.search-container {
+    /*width: 75%; */
+    margin: 0 auto; 
+    float: right;
+    /*margin-right: 0%;*/
+    width: 80%; 
 }
 .search-container input {
-    display: inline-block;
-    align: center;
-    margin-top: 8px;
-    margin-bottom: 16px;
-    width: 30%;
+    width: 35%;
     height: 42px;
-    background-color: #0d1117;
-    border: 1px solid #21262d;
-    font-weight: 20px;
-    color: #c6cdd5;
+    font-weight: 30px;
     cursor: pointer;
     padding-left: 1ch;
     padding-right: 1ch;
+    border-radius: 5px;
 }
 .search-container input:focus {
-    border: 2px solid #c6cdd5;
     outline: 0 none;
 }
+
diff --git a/static/stylesheet.css b/static/stylesheet.css
index 040c3f8..54f0bea 100644
--- a/static/stylesheet.css
+++ b/static/stylesheet.css
@@ -1,18 +1,21 @@
-html *{ font-family: Dejavu Sans Mono, MesloGS NF, Menlo, Consolas, Monospace !important; }
-body { text-decoration: none; color: #262626; background-color: #fff;}
+html *{ font-family: Dejavu Sans Mono, MesloGS NF, Menlo, Consolas, Twemoji Mozilla Monospace !important; }
+body { margin:0; padding: 0; text-decoration: none;}
 blockquote { text-align: center; font-size: 16px; font-style: normal; line-height: 30px;}
-pre { background-color: #fff;color: #262626;border: 1px solid #262626; font-size: 14px; padding-left: 2ch;padding-top:2ch; padding-bottom: 2ch; overflow: auto; }
-code { background-color: #fff; color: #262626; }
+pre { font-size: 14px; padding-left: 2ch;padding-top:2ch; padding-bottom: 2ch; overflow: auto; max-width:100%; border-radius: 5px;}
+code { }
 hr { height: 0px; }
-a {color: inherit; text-decoration: none; }  
-a:hover {color: #2e9dff; text-decoration: solid underline;}
-details > summary{ background-color: #ecf5ff; font-size: 18px;}
-details > summary:hover { background-color: #2e9dff; color: #ecf2f8;}
+a {color: inherit; }  
+a:hover { text-decoration: solid underline;}
+details > summary{ font-size: 18px;}
+details > summary:hover { }
 details summary::-webkit-details-marker,
-details summary::marker { content: "\1F4C1\20";}
-::selection { background-color: #2e9dff; }
-::-moz-selection { background-color: #2e9dff; }
-.menu { line-height: 1em; font-size: 32px; line-height: 1em; text-decoration: none; }
+/*details summary::marker { content: "\1F4C1\20";}*/
+details summary::marker { display: none; content: ""; }
+::selection { }
+::-moz-selection { }
+.menu { line-height: 1em; font-size: 32px; text-decoration: none; width: 100%; margin: 0 auto; opacity: 1; }
+.banner { float: left; margin-left: 3ch; padding-top: 8px;}
+.header-wrapper { width: 100%; position: fixed; top: 0; padding-bottom: 8px; padding-top: 8px; opacity: 0.8; }
 
 .HolyGrail,
 .HolyGrail-body {
@@ -23,15 +26,16 @@ details summary::marker { content: "\1F4C1\20";}
 .HolyGrail-nav {
   padding-right: 1em;
   padding-top: 1em;
+  padding-bottom: 1em;
   order: -1;
 }
 
-@media (min-width: 48em) {
+@media (min-width: 768px) {
   .HolyGrail-body {
     flex-direction: row;
     flex: 1;
     text-align: left;
-    border-top: 1px solid #262626; border-bottom: 1px solid #262626;
+    padding-top: 6vh;
   }
 
   .HolyGrail-content {
@@ -39,77 +43,109 @@ details summary::marker { content: "\1F4C1\20";}
     text-align: left;
     margin-left: 1em;
     margin-right: 1em;
+    max-width: 80.5em;
   }
 
   .HolyGrail-nav, .HolyGrail-ads {
     /* 12em is the width of the columns */
-    flex: 0 0 14em;
-    background-color: #ecf5ff;
+    flex: 0 0 12em;
+    /* experimental line height */
+    line-height: 1.8em;
+  }
+  .HolyGrail-ads {
+       overflow: hidden;
+       padding-right: 8px;
+    min-width: 18em;
+    max-width: 18em;
+    border-top-left-radius: 10px;
+    border-bottom-left-radius: 10px;
+    }
+  .HolyGrail-nav {
+    min-width: 18em;
+    max-width: 18em;
+    border-top-right-radius: 10px;
+    border-bottom-right-radius: 10px;
+    }
+
+  .HolyGrail-nav ul {
+        list-style-type: none!important;
+        padding-left: 1.5ch;
+        margin: 0em;
+        text-align: left;
   }
 
+  .HolyGrail-nav li {
+        list-style-type: none!important;
+        /* padding-left : 0.5ch; */
+        margin: 0em;
+        text-align: left;
+        /* experimental line height */
+        line-height: 1.5em;
+        list-style-position: inside;
+  }
+
+  .HolyGrail-nav li::marker {
+        /*content: "\1F4DD\20";*/
+        display: none;
+        content: "";
+        
+    }
+
+  .HolyGrail-nav a{
+        overflow-wrap: break-word;
+        text-decoration: none;
+  }
+
+  .HolyGrail-nav a:hover{
+        text-decoration: solid underline;
+  }
+    
+  .HolyGrail-nav a:before{
+        content: "";
+  }
 
   .HolyGrail-ads  ul li {
         list-style-type: none!important;
         text-align: left;
         border: none;
         white-space: normal;
-    }
-  .HolyGrail-nav ul {
-        list-style-type: none!important;
-        padding-left : 0.3em;
-        margin: 0em;
-        text-align: left;
-    }
+  }
 
-  .HolyGrail-nav li {
-        list-style-type: none!important;
-        padding-left : 1em;
-        margin: 0em;
-        text-align: left;
-    }
-    .HolyGrail-nav a{
-        overflow-wrap: break-word;
+  .HolyGrail-ads  a {
+        text-decoration: none;
+  }
 
-    }
-
-    .HolyGrail-nav a:hover{
-    }
-    
-    .HolyGrail-nav a:before{
-        content: "";
-    }
+  .HolyGrail-ads  a:hover {
+        text-decoration: solid underline;
+  }
 
   .HolyGrail-ads  ul{
-        padding-left: 0.5em;
+        padding-left: 1.5ch;
         padding-right: 0;
-    }
-
-
-    .HolyGrail-ads ul li:before {
-        content: "\203B\20";
-    }
+  }
 
+  .HolyGrail-ads ul li:before {
+        content: "\007C\20";
+  }
 }
 
-.search-container{
-    position: relative;
+.search-container {
+    /*width: 75%; */
+    margin: 0 auto; 
+    float: right;
+    /*margin-right: 0%;*/
+    width: 80%; 
 }
 .search-container input {
-    display: inline-block;
-    align: center;
-    margin-top: 8px;
-    margin-bottom: 16px;
-    width: 30%;
+    width: 35%;
     height: 42px;
-    background-color: #ecf5ff;
-    border: 1px solid #262626;
-    font-weight: 20px;
-    color: #262626;
+    font-weight: 30px;
     cursor: pointer;
     padding-left: 1ch;
     padding-right: 1ch;
+    border-radius: 5px;
 }
 .search-container input:focus {
-    border: 2px solid #2e9dff;
     outline: 0 none;
 }
+
diff --git a/static/svg/1f4c1.svg b/static/svg/1f4c1.svg
new file mode 100644
index 0000000..099d58b
--- /dev/null
+++ b/static/svg/1f4c1.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36"><path fill="#269" d="M0 29c0 2.209 1.791 4 4 4h24c2.209 0 4-1.791 4-4V12c0-2.209-1.791-4-4-4h-9c-3.562 0-3-5-8.438-5H4C1.791 3 0 4.791 0 7v22z"/><path fill="#55ACEE" d="M30 10h-6.562C18 10 18.562 15 15 15H6c-2.209 0-4 1.791-4 4v10c0 .553-.448 1-1 1s-1-.447-1-1c0 2.209 1.791 4 4 4h26c2.209 0 4-1.791 4-4V14c0-2.209-1.791-4-4-4z"/></svg>
\ No newline at end of file
diff --git a/static/svg/1f4dd.svg b/static/svg/1f4dd.svg
new file mode 100644
index 0000000..1697ffb
--- /dev/null
+++ b/static/svg/1f4dd.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36"><path fill="#CCD6DD" d="M31 32c0 2.209-1.791 4-4 4H5c-2.209 0-4-1.791-4-4V4c0-2.209 1.791-4 4-4h22c2.209 0 4 1.791 4 4v28z"/><path fill="#99AAB5" d="M27 24c0 .553-.447 1-1 1H6c-.552 0-1-.447-1-1 0-.553.448-1 1-1h20c.553 0 1 .447 1 1zm-16 4c0 .553-.448 1-1 1H6c-.552 0-1-.447-1-1 0-.553.448-1 1-1h4c.552 0 1 .447 1 1zM27 8c0 .552-.447 1-1 1H6c-.552 0-1-.448-1-1s.448-1 1-1h20c.553 0 1 .448 1 1zm0 4c0 .553-.447 1-1 1H6c-.552 0-1-.447-1-1 0-.553.448-1 1-1h20c.553 0 1 .447 1 1zm0 4c0 .553-.447 1-1 1H6c-.552 0-1-.447-1-1 0-.553.448-1 1-1h20c.553 0 1 .447 1 1zm0 4c0 .553-.447 1-1 1H6c-.552 0-1-.447-1-1 0-.553.448-1 1-1h20c.553 0 1 .447 1 1z"/><path fill="#66757F" d="M31 6.272c-.827-.535-1.837-.579-2.521-.023l-.792.646-1.484 1.211-.1.08-2.376 1.938-11.878 9.686c-.437.357-.793 1.219-1.173 2.074-.378.85-.969 2.852-1.443 4.391-.148.25-1.065 1.846-.551 2.453.52.615 2.326.01 2.568-.076 1.626-.174 3.731-.373 4.648-.58.924-.211 1.854-.395 2.291-.752.008-.006.01-.018.017-.023l11.858-9.666.792-.646.144-.118V6.272z"/><path fill="#D99E82" d="M18.145 22.526s-1.274-1.881-2.117-2.553c-.672-.843-2.549-2.116-2.549-2.116-.448-.446-1.191-.48-1.629-.043-.437.438-.793 1.366-1.173 2.291-.472 1.146-1.276 4.154-1.768 5.752-.083.272.517-.45.503-.21-.01.187.027.394.074.581l-.146.159.208.067c.025.082.05.154.068.21l.159-.146c.187.047.394.084.58.074.24-.014-.483.587-.21.503 1.598-.493 4.607-1.296 5.752-1.768.924-.381 1.854-.736 2.291-1.174.439-.435.406-1.178-.043-1.627z"/><path fill="#EA596E" d="M25.312 4.351c-.876.875-.876 2.293 0 3.168l3.167 3.168c.876.874 2.294.874 3.168 0l3.169-3.168c.874-.875.874-2.293 0-3.168l-3.169-3.168c-.874-.875-2.292-.875-3.168 0l-3.167 3.168z"/><path fill="#FFCC4D" d="M11.849 17.815l3.17 3.17 3.165 3.166 11.881-11.879-6.337-6.336-11.879 11.879z"/><path fill="#292F33" d="M11.298 26.742s-2.06 1.133-2.616.576c-.557-.558.581-2.611.581-2.611s1.951.036 2.035 2.035z"/><path fill="#CCD6DD" d="M23.728 5.935l3.96-3.96 6.336 6.337-3.96 3.96z"/><path fill="#99AAB5" d="M26.103 3.558l.792-.792 6.336 6.335-.792.792zM24.52 5.142l.791-.791 6.336 6.335-.792.792z"/></svg>
\ No newline at end of file
diff --git a/style.toml b/style.toml
new file mode 100644
index 0000000..f08c924
--- /dev/null
+++ b/style.toml
@@ -0,0 +1,63 @@
+[github-dark]
+body_background ="#161b22"
+body = "#ecf2f8" 
+pre_background = "#0d1117"
+pre = "#ecf2f8"
+#pre_border = "#89929b"
+pre_border = "none"
+code_background = "#0d1117"
+code = "#ecf2f8"
+a = "#77bdfb"
+details_background = "#0d1117"
+details_hover_background = "#21262d"
+details_hover = "#ecf2f8"
+selection_background = "#fa7970"
+moz_selection_background = "#fa7970"
+header_background = "#161b22"
+nav_background = "#0d1117"
+content_border_top = "#89929b"
+content_border_bottom = "#89929b"
+search_input_background = "#0d1117"
+search_input = "#c6cdd5"
+search_input_border = "#21262d"
+search_focus_border = "#c6cdd5"
+autocomplete_suggestions_background = "#0d1117"
+autocomplete_suggestions_border = "#c6cdd5"
+autocomplete_suggestion = "#ecf2f8"
+autocomplete_suggestion_b = "#161b22"
+autocomplete_suggestion_selected_background = "#77bdfb"
+autocomplete_suggestion_selected = "#ecf2f8"
+autocomplete_suggestion_hover_background = "#77bdfb"
+autocomplete_suggestion_hover = "#ecf2f8"
+
+[one-dark]
+body_background ="#2f333d"
+body = "#979fad"
+pre_background = "#282c34"
+pre = "#979fad"
+pre_border = "#282c34"
+code_background = "#282c34"
+code = "#979fad"
+a = "#2979ff"
+details_background = "#3a3f4b"
+details_hover_background = "#2f333d"
+details_hover = "#979fad"
+selection_background = "#668799"
+moz_selection_background = "#668799"
+header_background = "#2f333d"
+nav_background = "#282c34"
+content_border_top = "#979fad"
+content_border_bottom = "#979fad"
+search_input_background = "#3a3f4b"
+search_input = "#979fad"
+search_input_border = "#282c34"
+search_focus_border = "#282c34"
+autocomplete_suggestions_background = "#3a3f4b"
+autocomplete_suggestions_border = "#2f333d"
+autocomplete_suggestion = "#979fad"
+autocomplete_suggestion_b = "#979fad"
+autocomplete_suggestion_selected_background = "#3a3f4b"
+autocomplete_suggestion_selected = "#979fad"
+autocomplete_suggestion_hover_background = "#979fad"
+autocomplete_suggestion_hover = "#3a3f4b"
+
diff --git a/templates/template.html b/templates/template.html
index 247f43a..2e2c6b6 100644
--- a/templates/template.html
+++ b/templates/template.html
@@ -1,6 +1,5 @@
 <!doctype html>
 <html lang="en">
-    <center>
     <head>
         {% block head %}
         <script src="https://cdn.jsdelivr.net/npm/fuse.js/dist/fuse.js"></script>
@@ -10,37 +9,62 @@
         <script type="text/javascript" src="{{ url_for('static', filename='js/search.js')}}"></script>
         <link rel="stylesheet" href="{{ url_for('static', filename=stylesheet) }}">
         <link rel="stylesheet" href="{{ url_for('static', filename=stylesheet_auto_complete) }}">
-        <br>
         <title>{% block title %}{{ project_title }}{% endblock %}</title>
         <meta name="viewport" content="width=device-width, initial-scale=1">
         {% endblock %}
+        <style type="text/css">
+            body { background-color: {{ colors.body_background }}; color: {{ colors.body }}; }
+            pre  { background-color: {{ colors.pre_background }}; color: {{ colors.pre }}; border: 1px solid {{ colors.pre_border }}; }
+            code { background-color: {{ colors.code_background }}; color: {{ colors.code }}; }
+            a:hover { color: {{ colors.a }}; }
+            details > summary { background-color: {{ colors.details_background }}; }
+            details > summary:hover { background-color: {{ colors.details_hover_background }}; color: {{ colors.details_hover }}; }
+            ::selection { background-color: {{ colors.selection_background }}; }
+            ::-moz-selection { background-color: {{ colors.moz_selection_background }}; }
+            .header-wrapper { background-color: {{ colors.header_background }}; }
+            .HolyGrail-nav, .HolyGrail-ads { background-color: {{ colors.nav_background }}; }
+            .HolyGrail-content { border-top: 1px solid {{ colors.content_border_top }}; border-bottom: 1px solid {{ colors.content_border_bottom }}; }
+            .search-container-color input { background-color: {{ colors.search_input_background }}; color: {{ colors.search_input }}; border: 1px solid {{ colors.search_input_border }}; }
+            .search-container-color input:focus { border: 2px solid {{ colors.search_focus_border }}; }
+        </style> 
+        <style>
+            .autocomplete-suggestions{ background: {{ colors.autocomplete_suggestions_background }}; border: 1px solid {{ colors.autocomplete_suggestions_border }}; }
+            .autocomplete-suggestion { color: {{ colors.autocomplete_suggestion }}; }
+            .autocomplete-suggestion b { color: {{ colors.autocomplete_suggestion_b }}; }
+            .autocomplete-suggestion.selected { background: {{ colors.autocomplete_suggestion_selected_background }}; color: {{ colors.autocomplete_suggestion_selected }}; }
+            .autocomplete-suggestion:hover { background: {{ colors.autocomplete_suggestion_hover_background }}; color: {{ colors.autocomplete_suggestion_hover }}; }
+        </style>
     </head>
-
     <body class="HolyGrail">
   <header>
-    <div class="menu">
-    <a href="{{ url_for('content') }}" style="text-decoration:none">{{ project_name }}</a>
+    <div class= "header-wrapper">
+        <div class="menu">
+            <div class="banner">
+                <a href="{{ url_for('content') }}" style="text-decoration:none">{{ project_name }}</a>
+                </div>
+                <div class="search-container">    
+                    <div class="search-container-color">
+                    <label for="search-by"><i class="fas fa-search"></i></label>
+                    <input data-search-input="" id="search-by" type="search" placeholder="Search..." autocomplete="off">
+                    <!--button type="submit"><i class="search"></i>&#128269;</button>-->
+                    <span data-search-clear=""><i class="fas fa-times"></i></span>
+                    </div>
+                </div>
+            </div>
+        </div>
     </div>
-    <div class="search-container">    
-        <label for="search-by"><i class="fas fa-search"></i></label>
-        <input data-search-input="" id="search-by" type="search" placeholder="Search..." autocomplete="off">
-        <!--button type="submit"><i class="search"></i>&#128269;</button>-->
-        <span data-search-clear=""><i class="fas fa-times"></i></span>
-    <p></p>
-    </div>
-</div>
   </header>
-
   <div class="HolyGrail-body">
+    <main class="HolyGrail-content">{% block content %}{% endblock %}</main>
     <nav class="HolyGrail-nav">
   <ul>
       {%- for item in tree.children recursive %}
       {%- set name = item.name.split('/')[-1] -%}
       {%- if item.type != "directory" -%}
-      <li><a href="{{ item.name }}.html">{{ name }}</a></li>
+      <li><a href="{{ item.name }}.html"><img style="height: 16px;" src="{{ url_for('static', filename='svg/1f4dd.svg') }}"> {{ name }}</a></li>
         {%- else -%}
         {%- if item.children|length -%}
-        <details id={{ name }} ontoggle="linkClick(this); return false;" ><summary>{{ name[0]|upper }}{{ name[1:] }}</summary>
+        <details id={{ name }} ontoggle="linkClick(this); return false;" ><summary><img style="height: 20px;" src="{{ url_for('static', filename='svg/1f4c1.svg') }}"> {{ name[0]|upper }}{{ name[1:] }}</summary>
         {%- endif -%}
         {%- endif -%}
     {%- if item.children and item.children|length -%}
@@ -49,19 +73,16 @@
 {%- endfor %}
 </ul>
     </nav>
-    <main class="HolyGrail-content">{% block content %}{% endblock %}</main>
-    {{ toc | safe }}
+    <aside class="HolyGrail-ads">{{ toc | safe }}</aside>
   </div>
   <footer>
          {% block footer %}
-<p></p>
-    <center>
-            &copy; Stefan Friese
-    </center>
+<p></p><center>&copy; Stefan Friese</center><p></p>
+
             {% endblock %}
   </footer>
 </body>
-        <script>
+    <script>
     function linkClick(obj) {
        if (obj.open) {
            //console.log('open');
@@ -69,7 +90,7 @@
                            sessionStorage.removeItem(obj.id);
                        }
            sessionStorage.setItem(obj.id,"open");
-           console.log(obj.id);
+           //console.log(obj.id);
        } else {
            //console.log('closed');
             sessionStorage.removeItem(obj.id);