break down global.scss into smaller files

+ rename css folder to scss

src/assets/scss/_variables.scss

@@ -0,0 +1,79 @@
+// colors
+
+$body: #0f1218;
+$separator: #ffffff2f;
+$highlight-blue: #006eff;
+$bbb: #161616; //bottom controls background
+$theme: #464545fd;
+
+// sizes
+$small: 0.5rem;
+$smaller: 0.25rem;
+$medium: 0.75rem;
+$large: 1.5rem;
+$larger: 2rem;
+
+$banner-height: 18rem;
+
+// apple human design guideline colors
+$black: #181a1c;
+$white: #ffffffde;
+
+$gray: #1c1c1e;
+$gray1: rgb(142, 142, 147);
+$gray2: rgb(99, 99, 102);
+$gray3: rgb(72, 72, 74);
+$gray4: rgb(58, 58, 60);
+$gray5: rgb(44, 44, 46);
+
+$red: #ff453a;
+$blue: #0a84ff;
+$darkblue: #055ee2;
+$green: rgb(20, 160, 55);
+$yellow: rgb(255, 214, 10);
+$orange: rgb(255, 159, 10);
+$pink: rgb(255, 55, 95);
+$purple: #bf5af2;
+$brown: rgb(172, 142, 104);
+$indigo: #5e5ce6;
+$teal: rgb(64, 200, 224);
+
+$primary: $gray4;
+$accent: $red;
+$secondary: $gray5;
+$cta: $blue;
+$danger: $red;
+$track-hover: $gray4;
+$context: $gray5;
+
+// SVG COLORS
+$default: $accent;
+$track-btn-svg: $red;
+$side-nav-svg: $red;
+
+// media query mixins
+@mixin phone-only {
+  @media (max-width: 599px) {
+    @content;
+  }
+}
+@mixin tablet-portrait {
+  @media (max-width: 900px) {
+    @content;
+  }
+}
+@mixin tablet-landscape {
+  @media (max-width: 1200px) {
+    @content;
+  }
+}
+@mixin for-desktop-up {
+  @media (min-width: 1200px) {
+    @content;
+  }
+}
+@mixin for-big-desktop-up {
+  @media (min-width: 1800px) {
+    @content;
+  }
+}