V0.0.9 / Styling Done

public/styles/medium.css

@@ -1,26 +1,33 @@
 body {
   padding: 7.5rem;
   padding-top: 5rem;
-  height: calc(100vh - 12.5rem);
+  height: calc(100vh - 5rem);
 }
 
 .logo {
   width: 7.5rem;
   height: 7.5rem;
 }
-.logo-text-container {
-  flex-direction: column;
-  justify-content: center;
-  align-items: flex-start;
+
+.intro .overline {
+  font-size: 3rem;
 }
-.logo-text-container p:last-of-type {
-  margin-left: 0;
+.intro .subheader {
+  font-size: 4rem;
+}
+
+.overline[data-button] {
+  display: inline-block;
+}
+.overline[data-button]:not(:first-of-type) {
+  margin-left: 1.5rem;
 }
 
 .symptom {
   width: 100%;
   max-width: 20rem;
-  display: inline-block;
+  height: 20rem;
+  display: inline-flex;
   margin-bottom: 0.75rem;
 }
 .symptom-emoji {
@@ -51,7 +58,31 @@ body {
   border-top-right-radius: 1rem;
   border-bottom-right-radius: 1rem;
 }
+
 footer {
   font-size: 1.7rem;
-  padding: 1.5rem;
+  padding: 5rem 7.5rem;
+  width: calc(100vw - 15rem);
+  margin-left: -7.5rem;
+  flex-direction: row;
+}
+footer > div {
+  flex-direction: column;
+  flex: 1;
+}
+
+footer > div:not(:first-of-type) {
+  margin-left: 3rem;
+  margin-top: 0;
+}
+footer > div:last-of-type {
+  flex: 3;
+  align-items: flex-end;
+}
+.input-popup {
+  height: 10rem;
+}
+
+.input-popup.expanded {
+  height: 55vh;
 }