Use sass instead of pure css

src/sass/include/_mixins.css

@@ -0,0 +1,60 @@
+@import '_variables';
+
+@mixin panel($width, $max-width) {
+    max-width: $max-width;
+    margin: 0 auto;
+    float: none;
+    border-radius: 0;
+    position: relative;
+    width: $width;
+}
+
+@mixin play-button {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    z-index: 1;
+
+    &:hover {
+        .overlay-circle {
+            border-color: $accent;
+        }
+
+        .overlay-triangle {
+            border-color: transparent transparent transparent $accent;
+        }
+    }
+}
+
+@mixin breakable {
+    overflow: hidden;
+    overflow-wrap: break-word;
+}
+
+@mixin ellipsis {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+@mixin center-panel($bg) {
+    padding: 12px;
+    border-radius: 4px;
+    display: flex;
+    background: $bg;
+    box-shadow: 0 0 15px $shadow_dark;
+    margin: auto;
+    margin-top: -50px;
+}
+
+@mixin input-colors {
+    &:hover {
+        border-color: $accent;
+    }
+
+    &:active {
+        border-color: $accent_light;
+    }
+}

src/sass/include/_variables.scss

@@ -0,0 +1,36 @@
+// colors
+$bg_color: #0F0F0F;
+$fg_color: #F8F8F2;
+$fg_faded: #F8F8F2CF;
+$fg_dark: #9d9da0;
+
+$bg_panel: #161616;
+$bg_elements: #121212;
+$bg_overlays: #1F1F1F;
+
+$grey: #888889;
+$dark_grey: #404040;
+$darker_grey: #282828;
+$darkest_grey: #222222;
+$border_grey: #3E3E35;
+
+$accent: #FF6C60;
+$accent_light: #FFACA0;
+$accent_dark: #8A3731;
+$accent_border: #FF6C6091;
+
+$play_button_red: #D8574D;
+$more_replies_dots: #AD433B;
+$error_red: #420A05;
+
+$verified_blue: #1DA1F2;
+
+$shadow: rgba(0,0,0,.6);
+$shadow_dark: rgba(0,0,0,.2);
+
+//fonts
+$font_0: Helvetica Neue;
+$font_1: Helvetica;
+$font_2: Arial;
+$font_3: sans-serif;
+$font_4: fontello;