Beginning of size logic

sass/style.scss

@@ -4,17 +4,31 @@
   top: 0;
 }
 
+[data-theme="light"] {
+  --bg-color: #DDE1E9;
+  --elm-bg-color: #EFF1F5;
+  --text-color: #141414;
+  --link-color: #b7162e;
+}
+
+[data-theme="dark"] {
+  --bg-color: #181A1B;
+  --elm-bg-color: #1F2223;
+  --text-color: #DBD8D4;
+  --link-color: #DB4E63;
+}
+
 html {
-  background-color: #DDE1E9;
+  background-color: var(--bg-color);
 }
 
 body {
-  color: #141414;
+  color: var(--text-color);
   padding-bottom: 5em;
 }
 
 a {
-  color:#b7162e;
+  color: var(--link-color);
   cursor: crosshair;
   outline: 1px solid transparent;
   margin: 0;
@@ -32,27 +46,35 @@ h1 {
 }
 
 #main {
+  background-color: var(--elm-bg-color);
+
   position: relative;
-  width:60%;
-  max-width:50em;
+  width: 60%;
+  max-width: 50em;
   margin: auto;
 
   top: 3em;
   left: 6.5em;
   
-  padding-top: 1em;
-  padding-bottom: 1em;
-  padding-left: 3em;
-  padding-right: 3em;
+  padding: 3em;
 
-  background-color: #EFF1F5;
+  font-size: 16px;
+}
+
+@media (max-width: 980px) {
+  html, body {
+    margin: 0;
+    height: 100%;
+  }
+
+  #main {
+    width: 70%;
+    height: 100%;
+    top: 0;
+  }
 }
 
 li {
   list-style-type: square;
   padding-bottom: 2em;
 }
-
-.container {
-  padding: 20px;
-}