feat: ✨ move styles out of App.vue and modularize

src/scss/_flex.scss

@@ -0,0 +1,67 @@
+.flex {
+  display: flex;
+  flex-flow: row wrap;
+
+  &--row {
+    flex-direction: row;
+  }
+
+  &--column {
+    flex-direction: column;
+  }
+
+  &--nowrap {
+    flex-wrap: nowrap;
+  }
+
+  &--center {
+    justify-content: center;
+
+    &-v {
+      align-items: center;
+    }
+  }
+
+  &--end {
+    justify-content: flex-end;
+
+    &-v {
+      align-items: flex-end;
+    }
+  }
+
+  > .col {
+    flex: 1 0 0;
+    max-width: 100%;
+
+    &--center {
+      text-align: center;
+
+      &-v {
+        align-self: center;
+      }
+    }
+
+    @for $i from 1 through 12 {
+      &-#{$i} {
+        $width: percentage(($i / 12));
+        flex: 0 0 $width;
+        max-width: $width;
+      }
+      @include mq-desktop {
+        &-d-#{$i} {
+          $width: percentage(($i / 12));
+          flex: 0 0 $width;
+          max-width: $width;
+        }
+      }
+      @include mq-mobile {
+        &-m-#{$i} {
+          $width: percentage(($i / 12));
+          flex: 0 0 $width;
+          max-width: $width;
+        }
+      }
+    }
+  }
+}

src/scss/_mixins.scss

@@ -0,0 +1,11 @@
+@mixin mq-desktop() {
+  @media (min-width: 35em) {
+    @content
+  }
+};
+
+@mixin mq-mobile() {
+  @media (max-width: 34.9em) {
+    @content
+  }
+};

src/scss/_variables.scss

@@ -0,0 +1,6 @@
+$bg-color-light:      #e74c3c;
+$bg-color-dark:       #2c3e50;
+$bg-color-warning:    #ec9b00;
+$copy-color:          #fff;
+$copy-color-grey:     #dedede;
+$copy-color-darkgrey: #303030;

src/scss/base.scss

@@ -0,0 +1,49 @@
+@import url("https://fonts.googleapis.com/css?family=Exo:300,300i,900,900i|Fira+Sans+Extra+Condensed:300,700&display=swap");
+@import "variables";
+@import "mixins";
+@import "flex";
+
+* {
+  box-sizing: border-box;
+}
+
+:root {
+  font-family: "Fira Sans Extra Condensed", sans-serif;
+  font-size: 16px;
+  line-height: 1.5;
+  text-size-adjust: 100%;
+}
+
+.bubbles {
+  background-color: $bg-color-dark;
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  overflow: hidden;
+  z-index: -1;
+
+  &::before,
+  &::after {
+      content: "";
+      position: absolute;
+      border-radius: 100%;
+  }
+
+  &::before {
+      background-color: rgba(lighten($bg-color-dark, 10%), 0.7);
+      height: 80vw;
+      width: 80vw;
+      bottom: -45vw;
+      right: -25vw;
+  }
+
+  &::after {
+      background-color: rgba(lighten($bg-color-dark, 10%), 0.7);
+      height: 80vw;
+      width: 80vw;
+      bottom: -25vw;
+      right: -50vw;
+  }
+}