feautre(css): fix background for mobile clients

_css/styles.css

@@ -1,34 +1,48 @@
-/* 
+/*
  * vim: ts=2 sw=2 et ft=css
- */ 
+ */
 
-html { 
-    background: url('https://0x29a.ch/_img/ft.jpg') no-repeat center center fixed;
-    -moz-background-size: cover;
-    -webkit-background-size: cover;
-    -o-background-size: cover;
-    background-size: cover;
+html, body {
+  height: 100%;
+  margin: 0;
+}
+
+body {
+  min-height: 100vh;
+}
+
+body::before {
+  content: '';
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: url('https://0x29a.ch/_img/ft.jpg') no-repeat 70% 20%;
+  background-size: cover;
+  z-index: -1;
 }
 
 h1 {
-  font-family: 'Oswald', sans-serif; text-transform: uppercase;
+  font-family: 'Oswald', sans-serif;
+  text-transform: uppercase;
   color: white;
+  margin: 0;
 }
 
 p {
-  font-family: 'Roboto', sans-serif; 
+  font-family: 'Roboto', sans-serif;
   color: white;
-  padding: 10px 0px 0px 0px;
+  padding: 10px 0 0 0;
 }
 
 #quotes-wrapper {
   position: absolute;
   left: 50%;
   top: 50%;
-  margin-top: -50px;
-  margin-left: -340px;
-}
-
-.quotes {
-  display: hidden;
+  transform: translate(-50%, -50%);
+  width: 90%;
+  max-width: 680px;
+  padding: 0 1rem;
+  box-sizing: border-box;
 }