diff --git a/simplesnake/simplesnake.appcache b/simplesnake/simplesnake.appcache
index 04d3a9f..a6551e9 100755
--- a/simplesnake/simplesnake.appcache
+++ b/simplesnake/simplesnake.appcache
@@ -2,5 +2,6 @@ CACHE MANIFEST
# Last Modified: 2017 Apr 13
CACHE:
-simplesnake.html
+simplesnake.css
simplesnake.js
+simplesnake.html
diff --git a/simplesnake/simplesnake.css b/simplesnake/simplesnake.css
new file mode 100755
index 0000000..4cd2dcb
--- /dev/null
+++ b/simplesnake/simplesnake.css
@@ -0,0 +1,67 @@
+
+body.hints:before,
+body.hints:after {
+ display: block;
+ position: absolute;
+ left: 0;
+ top: 12.5%;
+ bottom: 12.5%;
+ z-index: 100;
+}
+body.hints:before {
+ content: "";
+ width: 100%;
+ border-top: dashed 0.5vmin red;
+ border-bottom: dashed 0.5vmin red;
+}
+body.hints:after {
+ content: "↺↻";
+ width: 37vmin;
+ right: 50%;
+ left: auto;
+ overflow: visible;
+ border-right: dashed 0.5vmin red;
+
+ color: rgba(255, 0, 0, 0.5);
+ font-size: 15vmin;
+ line-height: 70vmin;
+ white-space: pre;
+ letter-spacing: 50vmin;
+}
+.hints .simplesnake {
+ opacity: 0.3;
+}
+.hints .simplesnake:before,
+.hints .simplesnake:after {
+ position: absolute;
+ display: block;
+ text-align: center;
+ width: 100vw;
+ color: red;
+ font-size: 5vh;
+ line-height: 10vh;
+ z-index: 100;
+}
+.hints .simplesnake:before {
+ content: "new level";
+}
+.hints .simplesnake:after {
+ bottom: 0;
+ content: "pause";
+}
+
+body {
+ font-family: sans-serif;
+ overflow: hidden;
+}
+
+.simplesnake .field {
+ position: relative;
+ left: 50%;
+ margin-left: -45vmin;
+
+ width: 90vmin;
+ height: 90vmin;
+ border: solid 1px silver;
+}
+
diff --git a/simplesnake/simplesnake.html b/simplesnake/simplesnake.html
index 84e38c3..b244363 100644
--- a/simplesnake/simplesnake.html
+++ b/simplesnake/simplesnake.html
@@ -3,75 +3,7 @@
Simple Snake
-
+