Add css for Tracker component

components/TheTracker.vue

 <template>
-  <section>
+  <section class="tracker-section">
     <div class="tracker">
-      <label for="goal">You're 40% of the way to your goal of</label>
-      <input id="goal" type="text">
+      <label for="goal">You're <span>40%</span> of the way to your goal of</label>
+      <div class="goal-input">
+        <input
+          id="goal"
+          type="text"
+          size="2"
+          maxlength="9"
+          value="2000"
+          oninput="this.parentNode.dataset.value = this.value"
+        >
+        <span>ml</span>
+      </div>
       <button>+</button>
     </div>
-    <button>Reset coaster</button>
+    <button class="button">Reset coaster</button>
   </section>
 </template>
 
@@ -13,10 +23,79 @@
 
 </script>
 
-<style scoped>
-input {
+<style scoped lang="scss">
+.tracker-section {
+  height: 620px;
+  margin-bottom: 150px;
+  padding-top: 150px;
+}
+
+.tracker {
+  margin-bottom: 70px;
+  max-width: 250px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  label {
+    text-shadow: 0 3px 7px #333;
+
+    span {
+      color: #004377;
+      text-shadow: none;
+    }
+  }
+
+  button {
+    margin: .25em;
+    font-size: 4em;
+    line-height: 1;
+    width: 1em;
+    aspect-ratio: 1;
+    background-image: linear-gradient(240deg, white, #89ceff);
+    border-radius: 50%;
+    box-shadow: 0 3px 8px #666;
+    color: #3783BB;
+  }
+}
+
+.goal-input {
+  margin-top: 1em;
   border: 4px solid white;
-  border-radius: 10px;
+  border-radius: 20px;
+  box-shadow: 0 3px 5px #555 inset,
+  0 3px 5px #555;
+  padding: .15em .75em 0 .75em;
+  color: #004377;
+
+  // Magic input field resizing based on text length
+  // Based off https://css-tricks.com/auto-growing-inputs-textareas/
+  display: inline-grid;
+  vertical-align: top;
+  align-items: center;
+  &::after {
+    content: attr(data-value) '   ';
+    visibility: hidden;
+    white-space: pre-wrap;
+    grid-area: 1 / 1;
+  }
+
+  span {
+    grid-area: 1 / 2;
+  }
+}
+
+#goal {
+  margin: 0;
+  padding: .25em;
   background: transparent;
+  color: #004377;
+  width: auto;
+  grid-area: 1 / 1;
+
+  &::placeholder {
+    color: #004377;
+    opacity: 1;
+  }
 }
 </style>