From 1a39254329393171f6935a5a5c66a786e73722ee Mon Sep 17 00:00:00 2001
From: Leander Seige <leander@seige.name>
Date: Fri, 12 Nov 2021 13:27:45 +0100
Subject: [PATCH] scrolltext

---
 dist/index.html       | 23 +++++++++++++----------
 src/css/main.css      |  5 +++++
 src/css/main_menu.css | 29 +++++++++++++++++++++++++++++
 src/css/mobile.css    |  1 +
 4 files changed, 48 insertions(+), 10 deletions(-)

diff --git a/dist/index.html b/dist/index.html
index ee69e1b..9dc917a 100644
--- a/dist/index.html
+++ b/dist/index.html
@@ -42,16 +42,19 @@
         <!-- <h1 draggable="false">Welcome!</h1> -->
         <button type="button" id="mb_start" class="button">Start</button><br />
         <button type="button" id="mb_settings" class="button">Settings</button>
-        <p>
-          <br />
-          <span class="darkgreen">Idea and Coding</span><br />
-          Leander Seige<br />
-          <br />
-          <span class="darkgreen">Music</span><br />
-          Chris Huelsbeck<br />
-          Juhani Junkala<br />
-          <br />
-        </p>
+        <div id="mmscrollcont">
+          <div id="mmscroll">
+            The terribly accurate clocks of Benrath Palace have nothing else in mind but to ruthlessly wake up the peacefully sleeping humans and animals of art and cultural history. But wait... suddenly a fearless hero comes to the rescue: bravely throwing fruits at the clocks to safeguard the sleep of the just.<br />
+            <br />
+            <span class="heading">Idea and Coding</span><br />
+            Leander Seige<br />
+            <br />
+            <span class="heading">Music</span><br />
+            Chris Huelsbeck<br />
+            Juhani Junkala<br />
+            <br />
+          </div><br />
+        </div>
         <a href="https://github.com/leanderseige/clocksattack#clocks-attack" target="_blank" class="button">About</a><br />
         <a href="https://www.shirtee.com/de/store/usedpictures/" target="_blank" class="button">Merch</a>
         <br />
diff --git a/src/css/main.css b/src/css/main.css
index 55e559b..4216d45 100644
--- a/src/css/main.css
+++ b/src/css/main.css
@@ -149,6 +149,11 @@ h1 {
 .red {
   color:red;
 }
+
 .darkgreen {
   color:#108010;
 }
+
+.heading {
+  color:white;
+}
diff --git a/src/css/main_menu.css b/src/css/main_menu.css
index d8790c3..5daf9e3 100644
--- a/src/css/main_menu.css
+++ b/src/css/main_menu.css
@@ -20,3 +20,32 @@ p {
   padding:0;
   margin:0;
 }
+
+#mmscrollcont {
+  padding:0;
+  margin:0;
+  height: 35vh;
+  overflow: hidden;
+  display:inline-block;
+  width:100%;
+}
+
+#mmscroll {
+  padding:0vh 3vh;
+  margin:0;
+  height: 35vh;
+  animation-name: mmscrollkf;
+  animation-duration: 40s;
+  animation-iteration-count: infinite;
+  animation-timing-function: linear;
+  display:inline-block;
+}
+
+@keyframes mmscrollkf {
+  from {
+    transform: translateY(100%);
+  }
+  to {
+    transform: translateY(-250%);
+  }
+}
diff --git a/src/css/mobile.css b/src/css/mobile.css
index 2ad7ad4..32e1ab0 100644
--- a/src/css/mobile.css
+++ b/src/css/mobile.css
@@ -5,6 +5,7 @@
   #level_background,
   #preloader,
   #mainmenu,
+  #mmscrollcont
   .fullscreen {
     width:100vw;
     height:100%;