--- a/weather_server/static/style.css	Sun Oct 06 15:21:03 2019 -0400
+++ b/weather_server/static/style.css	Sun Oct 06 17:09:23 2019 -0400
@@ -1,12 +1,24 @@
-html, body {
+html {
+    margin: 0;
+    padding: 0;
+    height: 100%;
+    width: 100%;
+
+    font-family: Roboto, sans-serif;
+
+    --temp-background: #0d47a1;
+    --temp-text: white;
+    --dewpoint-background: #5472d3;
+    --dewpoint-text: white;
+}
+
+body {
     margin: 0;
     padding: 0;
     display: flex;
     flex-flow: column nowrap;
     width: 100%;
     height: 100%;
-
-    font-family: Roboto, sans-serif;
 }
 
 h1 {
@@ -35,6 +47,9 @@
     padding: 0;
     font: inherit;
     flex: auto;
+}
+
+p.plain {
     position: relative;
     display: flex;
     flex-direction: column;
@@ -43,34 +58,49 @@
     line-height: 1;
 }
 
-p.important .key {
+p.plain.important .key {
     display: block;
     opacity: 75%;
     font-size: 18px;
 }
 
-p.important .value {
+p.plain.important .value {
     margin-top: 0;
     font-size: 150px;
     display: flex;
     flex-flow: row nowrap;
 }
 
-p.important .value .unit {
+p.plain.important .value .unit {
     font-size: 33%;
     font-weight: bold;
     opacity: 66%;
     padding-top: 0.25em;
 }
 
+p.fancy {
+    position: relative;
+}
+
+p.fancy canvas {
+    display: block;
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+}
+
 #temp {
-    background: #0d47a1;
-    color: white;
+    background: var(--temp-background);
+    color: var(--temp-text);
 }
 
 #dewpoint {
-    background: #5472d3;
-    color: white;
+    background: var(--dewpoint-background);
+    color: var(--dewpoint-text);
 }
 
 #timestamp {