M static/style.css → static/style.css

@@ -19,40 +19,54 @@ font-family: 'secular';
   src: url('/static/fonts/SecularOne-Regular.ttf');
 }
 
-@media screen and (max-width: 1200px) {
-  html {
-    font-size: 100%;
-  }
-}
- 
-@media screen and (max-width: 768px) {
-  html {
-    font-size: 300%;
-  }  
-}
-
 html { 
   color: #333;
 }
 
-h1 {
+@media screen and (min-width: 200px) and (max-width: 1000px) {
+  h1 {
 	font-family: 'secular', sans-serif;
-  font-size: 5vw;
+  font-size: 50px;
   line-height: 0.3;
+  text-align: center;
 }
 
-em {
-	font-family: 'operator', italic;
-  font-size: 1.5vw;
-  line-height: 0.6;
+  em {
+  	font-family: 'operator', italic;
+    font-size: 22px;
+    line-height: 0.6;
+  }
+  
+  a {
+  	font-family: 'operator', monospace;
+    font-size: 18px;
+    color: #444;
+    line-height: 2;
+  } 
 }
 
-a {
-	font-family: 'operator', monospace;
-  font-size: 1vw;
-  color: #444;
-  line-height: 2;
+@media screen and (min-width: 1100px) {
+  h1 {
+  	font-family: 'secular', sans-serif;
+    font-size: 100px;
+    line-height: 0.3;
+    text-align: center;
+  }
+  
+  em {
+  	font-family: 'operator', italic;
+    font-size: 30px;
+    line-height: 0.6;
+  }
+  
+  a {
+  	font-family: 'operator', monospace;
+    font-size: 22px;
+    color: #444;
+    line-height: 2;
+  }
 }
+
 
 .centered {
   text-align: center;