diff --git a/assets/css/styles.css b/assets/css/styles.css
index 587f644..bbb6240 100644
--- a/assets/css/styles.css
+++ b/assets/css/styles.css
@@ -11,24 +11,23 @@ a {
   color: darkblue;
 }
 
-nav {
-  background-color: #afcfff;
-  background-image: url("/assets/img/ostraka.jpg");
-  background-repeat: no-repeat;
-  background-blend-mode: luminosity;
-  background-size: cover;
-  opacity: 0.6;
-}
-
 nav a, nav ul {
-  color: black;
-  opacity: 1;
+  color: white;
 }
 
 nav ul {
   list-style-type: disclosure-open;
 }
 
+.toptitle {
+  background-image: url(/assets/img/ostraka.jpg);
+  background-repeat: no-repeat;
+  height: 200px;
+  font-size: 68px;
+  color: white;
+  text-shadow: 5px 2px black;
+}
+
 .gallery {
   max-width: content;
 }
diff --git a/assets/css/styles.css.map b/assets/css/styles.css.map
index 0ddb806..29a164b 100644
--- a/assets/css/styles.css.map
+++ b/assets/css/styles.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../_sass/main.scss"],"names":[],"mappings":"AAAA;EACI;EACA;;;AAEJ;EACI;;;AAEJ;EACI;;;AAEJ;EAKI;EACA;EACA;EAEA;EACA;EACA;;;AAEJ;EACI;EACA;;;AAEJ;EACI;;;AAEJ;EACI;;;AAEJ;EACI;;;AAEJ;EACI;;;AAEJ;EACI;EACA;;;AAEJ;EACI;EACA;;;AAEJ;EACI;EACA;;;AAEJ;EACE;IACE;;EAEF;AAAA;IAEE","sourcesContent":["body {\n    font-size: 24px;\n    background-color: #afcfff;\n}\np {\n    max-width: 72ch;\n}\na {\n    color: darkblue;\n}\nnav {\n    //background-color: #fef67b;\n    //background-color: #f4e3d7;\n    //background-color: bisque;\n    //background-color: aliceblue;\n    background-color: #afcfff;\n    background-image: url(\"/assets/img/ostraka.jpg\");\n    background-repeat: no-repeat;\n    // only b/w for legibility:\n    background-blend-mode: luminosity;\n    background-size: cover;\n    opacity: 0.6;\n}\nnav a, nav ul {\n    color: black;\n    opacity: 1.0;\n}\nnav ul {\n    list-style-type: disclosure-open;\n}\n.gallery {\n    max-width: content;\n}\n.larger {\n    font-size: larger;\n}\n.xx-large {\n    font-size: xx-large;\n}\n.wrap {\n    display: flex;\n    max-width: max-content;\n}\n.wrap1 {\n    margin: 0px;\n    width: 30%;\n}\n.wrap2 {\n    margin: 0px; /* remove all margins to fit two divs in the container */\n    width: 70%;\n}\n@media (max-width: 767px) {\n  .wrap {\n    flex-direction: column;\n  }\n  .wrap1,\n  .wrap2 {\n    width: auto;\n  }\n}\n"],"file":"styles.css"}
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["../../_sass/main.scss"],"names":[],"mappings":"AAAA;EACI;EACA;;;AAEJ;EACI;;;AAEJ;EACI;;;AAWJ;EACI;;;AAEJ;EACI;;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;;;AAEJ;EACI;;;AAEJ;EACI;;;AAEJ;EACI;;;AAEJ;EACI;EACA;;;AAEJ;EACI;EACA;;;AAEJ;EACI;EACA;;;AAEJ;EACE;IACE;;EAEF;AAAA;IAEE","sourcesContent":["body {\n    font-size: 24px;\n    background-color: #afcfff;\n}\np {\n    max-width: 72ch;\n}\na {\n    color: darkblue;\n}\nnav {\n    //background-color: #afcfff;\n    //background-image: url(\"/assets/img/ostraka.jpg\");\n    //background-repeat: no-repeat;\n    // only b/w for legibility:\n    //background-blend-mode: luminosity;\n    //background-size: cover;\n    //opacity: 0.6;\n}\nnav a, nav ul {\n    color: white;\n}\nnav ul {\n    list-style-type: disclosure-open;\n}\n.toptitle {\n    background-image: url(/assets/img/ostraka.jpg);\n    background-repeat: no-repeat;\n    height: 200px;\n    font-size: 68px;\n    color: white;\n    text-shadow: 5px 2px black;\n}\n.gallery {\n    max-width: content;\n}\n.larger {\n    font-size: larger;\n}\n.xx-large {\n    font-size: xx-large;\n}\n.wrap {\n    display: flex;\n    max-width: max-content;\n}\n.wrap1 {\n    margin: 0px;\n    width: 30%;\n}\n.wrap2 {\n    margin: 0px; /* remove all margins to fit two divs in the container */\n    width: 70%;\n}\n@media (max-width: 767px) {\n  .wrap {\n    flex-direction: column;\n  }\n  .wrap1,\n  .wrap2 {\n    width: auto;\n  }\n}\n"],"file":"styles.css"}
\ No newline at end of file
diff --git a/index.html b/index.html
index 04ef8ff..04b4b4f 100644
--- a/index.html
+++ b/index.html
@@ -37,7 +37,7 @@
 <div id="main">
 
   <div id="intro" class="section p-intro">
-    <h1>Scherbengericht <i>jetzt</i></h1>
+    <h1 class="toptitle">&nbsp;Scherbengericht <br/>&nbsp;&nbsp;<i>›jetzt‹</i></h1>
 
 <p class="larger">
   Braucht die <i>real existierende</i> <b>Demokratie</b> ein Mittel zur <b>Machtbegrenzung</b>?
diff --git a/intro.html b/intro.html
index 75efe92..b0ca9e2 100644
--- a/intro.html
+++ b/intro.html
@@ -16,7 +16,7 @@
     <script src="/assets/js/plugins/lg-share.umd.js"></script>
   </head>
   <body>
-    <h1>Scherbengericht <i>jetzt</i></h1>
+    <h1 class="toptitle">&nbsp;Scherbengericht <br/>&nbsp;&nbsp;<i>›jetzt‹</i></h1>
 
 <p class="larger">
   Braucht die <i>real existierende</i> <b>Demokratie</b> ein Mittel zur <b>Machtbegrenzung</b>?