styles from aymeric

styles.css

@@ -1,21 +1,19 @@
+@import url('https://fonts.googleapis.com/css?family=Poppins');
+
 @font-face {
       font-family: "Libertinage x";
       src: url("fonts/Libertinage-x.ttf");
 }
-@font-face {
-      font-family: "OSP-DIN";
-      src: url("fonts/OSP-DIN.ttf");
-}
 
 body {
     margin: 5em;
     font-family: "Libertinage x", serif;
     font-size: 1.1em;
     color: #2d2020;
-    background: #f2eee3;
+    background: #f2eee8;
 }
 #map {
-    background: #f2eee3 !important;
+    background: #f2eee8 !important;
 }
 div.tile {
     color: #2d2020;
@@ -23,31 +21,41 @@ div.tile {
     pointer-events: auto; /* this enables links */
 }
 div.tile img.imagetile {
+    filter: grayscale(100%); /* recent browsers */
+    -webkit-filter: grayscale(100%); /* old webkit based browsers */
+    filter: gray; /* old IE until 9, then needs SVG??? */
     position: absolute;
     left: 0; top: 0;
     z-index: 0; 
 }
+div.tile img.imagetile:hover {
+    filter: none;
+}
 div.tile div.text {
     position: absolute;
     left: 0; top: 0;
     z-index: 1;
-    font-family: sans-serif;
+    font-family: "Poppins", sans-serif;
     font-size: 15px;
-    line-height: 18px;
+    line-height: 16px;
     /*text-shadow: 1px 1px 2px black;*/
-    padding-right: 10px;
+    padding-right: 20px;
     padding-left: 0px;
     margin-top: 0px;
 }
 div.tile div.text p {
+    font-size: 12px;
+    /*color: #f2eee8;*/
+    /*background: #dd2e47;*/
     margin: 0;
-    hyphens: auto;
+    line-height: 12px;
+    padding-left: 10px;
+    /*hyphens: auto;*/
 }
 div.tile div.text a {
     margin: 0;
     text-decoration: none;
-    color: #f2eee3;
-    background: #ed4e47;
+    color: #dd2e47;
 }
 div.tile div.text a:hover {}
 div.coords {