Pannel control styles done

public/sass/_control-panel.scss

@@ -0,0 +1,126 @@
+.control-panel {
+    height: 60vh;
+    max-width: 100vw;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    flex-wrap: wrap;
+
+    padding: 5vh 15vw;
+
+    button {
+        
+        width: 16vw;
+        max-width: 250px;
+        height: 16vw;
+        max-height: 250px;
+
+        margin: 0px 3vw;
+
+        font-size: 1.8vw;
+        font-weight: bold;
+
+        border: none;
+        border-radius: 5px;
+
+        cursor: pointer;
+
+        @mixin generateColors($background-color) {
+            
+            background-color: $background-color;
+            border: 1px solid adjust-color($color: $background-color, $blackness: 10%, $alpha: 1.0);
+            
+            transition: ease-in-out 0.4s;
+
+            & {
+                display: inline-block;
+                vertical-align: middle;
+                -webkit-transform: perspective(1px) translateZ(0);
+                transform: perspective(1px) translateZ(0);
+                box-shadow: 0 0 1px rgba(0, 0, 0, 0);
+                -webkit-transition-duration: 0.3s;
+                transition-duration: 0.3s;
+                -webkit-transition-property: transform;
+                transition-property: transform;
+              }
+              &:hover, &:focus, &:active {
+                -webkit-transform: scale(1.1);
+                transform: scale(1.1);
+              }
+
+            &:hover {
+                
+                background-color: adjust-color($color: $background-color, $lightness: 10%, $alpha: 1.0);
+                transition: ease-in-out 0.4s;
+
+            }
+        }
+
+        &.add-words {
+            
+            $background-color: #77b3d6;
+
+            @include generateColors($background-color);
+        }
+
+        &.add-category {
+
+            $background-color: #c469cc;
+
+            @include generateColors($background-color);
+        }
+
+        &.delete-category {
+
+            $background-color: #f79143;
+
+            @include generateColors($background-color);
+        }
+
+        &.delete-word {
+
+            $background-color: #df6767;
+
+            @include generateColors($background-color);
+        }
+
+        &.edit-word {
+
+            $background-color: #7dbb4e;
+
+            @include generateColors($background-color)
+        }
+    }
+}
+
+@media (max-width: 991.98px) {
+
+    .control-panel {
+
+        height: auto;
+
+        flex-direction: column;
+        justify-content: space-around;
+        align-items: initial;        
+
+        flex-wrap: nowrap;
+
+        button {
+            max-width: none;
+            max-height: none;
+            
+            width: 66vw;
+            height: 20vh;
+
+            font-size: 3vw;
+
+            margin-bottom: 3vh;
+        }
+    }
+}
+
+@media (max-width: 576px) {
+
+}

public/sass/index.scss

@@ -27,4 +27,5 @@ html, body {
 @import 'letters-registered';
 @import 'letter-input';
 @import 'form';
-@import 'message';
+@import 'message';
+@import 'control-panel';