Implimented good scaling, made css more organized and efficient.

1 files changed, 31 insertions, 63 deletions

diff --git a/src/styles.css b/src/styles.css
index aa84661..663729e 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -8,89 +8,57 @@ body, td, th {
   line-height: 1.5em;
 }
 
-.centered {
-  margin-left: auto;
-  margin-right: auto;
-}
-
-.header {
-  min-width: 716px;
-  margin-top: 17px;
-  text-align: center;
-  font: 23px Arial;
-  border-bottom: 5px solid var(--link-tab-bg-color);
-  padding-bottom: 13px;
-}
-
-.link-tab {
-  font-weight: normal;
-  padding: 10px;
-  color: white;
-  background-color: var(--link-tab-bg-color);
-  text-decoration: none;
-}
-
-.link-tab:hover {
-  background-color: var(--link-tab-bg-hover-color);
-}
-
-.footer {
-  min-width: 716px;
-  text-align: center;
-  line-height: 49px;
-  border-top: 5px solid var(--link-tab-bg-color);
-  font-family: Arial;
-}
-
 img {
-  max-width: 100%;
+  max-width: 99%;
+  border: 1px solid black;
 }
 
 a {
   text-decoration: none;
   font-weight: bold;
-  color: #004080;
+  color: var(--link-tab-bg-hover-color);
 }
 
 article {
-  min-width: 716px;
-  margin: 0;
+  max-width: 40em;
   overflow: auto;
 }
 
-@media (min-width: 760px) {
-  article {
-    margin-left: 5%;
-    margin-right: 5%;
-  }
+.centered, article {
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.header, .footer {
+  text-align: center;
+  font-family: Arial;
+  line-height: 49px;
+}
+
+.header {
+  font-size: 23px;
+  border-bottom: 5px solid var(--link-tab-bg-color);
+  padding-bottom: 3px;
 }
 
-@media (min-width: 960px) {
-  article {
-    margin-left: 10%;
-    margin-right: 10%;
-  }
+.footer {
+  border-top: 5px solid var(--link-tab-bg-color);
+  padding-top: 3px;
 }
 
-@media (min-width: 1100px) {
-  article {
-    margin-left: 15%;
-    margin-right: 15%;
-  }
+.no-space-wrap, .link-tab {
+  white-space: nowrap;
 }
 
-@media (min-width: 1300px) {
-  article {
-    margin-left: 20%;
-    margin-right: 20%;
-  }
+.link-tab {
+  font-weight: normal;
+  padding: 10px;
+  color: white;
+  background-color: var(--link-tab-bg-color);
 }
 
-@media (min-width: 1560px) {
-  article {
-    margin-left: 25%;
-    margin-right: 25%;
-  }
+.link-tab:hover {
+  background-color: var(--link-tab-bg-hover-color);
 }
 
 @font-face {