Add responsive design styles for medium and large screens in CSS

Author: nikoscham

FEAScript-website.css

@@ -129,6 +129,8 @@ mjx-container {
 }
 
 /* Media queries */
+
+/* Small screens: up to 500px */
 @media screen and (max-width: 500px) {
   body {
     padding: 10px;
@@ -158,12 +160,72 @@ mjx-container {
   }
 }
 
+/* Medium screens: 500px to 1000px */
+@media screen and (min-width: 500px) and (max-width: 1000px) {
+  body {
+    padding: 15px;
+  }
+
+  h1 {
+    font-size: 140%;
+  }
+
+  h2 {
+    font-size: 125%;
+    line-height: 1.3em;
+  }
+
+  h3 {
+    font-size: 115%;
+  }
+
+  p {
+    max-width: 900px;
+  }
+
+  #banner {
+    width: 150px;
+    padding-left: 1.2em;
+    padding-bottom: 1.2em;
+  }
+
+  #banner img {
+    width: 150px;
+  }
+
+  #responsive-logo {
+    height: 60px;
+  }
+}
+
+/* Large screens: 1000px and above */
 @media screen and (min-width: 1000px) {
+  body {
+    padding: 20px;
+  }
+
+  h1 {
+    font-size: 150%;
+  }
+
+  h2 {
+    font-size: 130%;
+    line-height: 1.4em;
+  }
+
+  h3 {
+    font-size: 120%;
+  }
+
   #banner {
     width: 250px;
   }
 
   #banner img {
     width: 250px;
   }
+
+  #responsive-logo {
+    height: 80px;
+  }
 }