Optimize css

frontend/src/main.scss

@@ -1,8 +1,8 @@
-@import './styles/vars.scss';
-@import './styles/button.scss';
-@import './styles/form.scss';
-@import './styles/mixins.scss';
-@import './styles/settings.scss';
+@use 'styles/vars' as *;
+@use 'styles/button';
+@use 'styles/form';
+@use 'styles/mixins' as *;
+@use 'styles/settings';
 
 @import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@300&family=Open+Sans&display=swap');
 

frontend/src/styles/_mixins.scss

@@ -0,0 +1,11 @@
+@mixin square($size) {
+  width: $size;
+  height: $size;
+}
+
+@mixin background {
+  backdrop-filter: blur(24px);
+  @supports not (backdrop-filter: blur(24px)) {
+    background-color: rgba(0, 0, 0, 0.5);
+  }
+}

frontend/src/styles/_vars.scss

@@ -0,0 +1,24 @@
+$gray: #ccc;
+$red: #b33951;
+$accent: #b33951;
+$border-width: 1.5px;
+$border-width-focused: 3px;
+$border: $border-width solid white;
+$small-padding: 12px;
+$medium-padding: 24px;
+$large-padding: 64px;
+$border-radius: 15px;
+$animation-time: 200ms ease;
+$breakpoint: 700px;
+$height-breakpoint: 500px;
+$large-icon: 48px;
+$small-icon: 32px;
+$bright-decla: #4069a5;
+$bright-red: #d15652;
+$bright-neutral: #88888877;
+
+:root {
+  --bright-decla: #{$bright-decla};
+  --bright-red: #{$bright-red};
+  --bright-neutral: #{$bright-neutral};
+}

frontend/src/styles/button.scss

@@ -1,4 +1,4 @@
-@import './vars.scss';
+@use './vars.scss' as *;
 
 button {
   border: none;

frontend/src/styles/form.scss

@@ -1,5 +1,5 @@
-@import './vars.scss';
-@import './mixins.scss';
+@use 'vars' as *;
+@use 'mixins' as *;
 
 form {
   @include background;
@@ -38,7 +38,7 @@ form {
       position: relative;
       padding: 15px 0 0;
       margin-top: 10px;
-      margin: 10px 0 $small-padding 0;
+      margin: 10px $small-padding / 2 $small-padding $small-padding / 2;
 
       input {
         font-family: inherit;
@@ -48,6 +48,7 @@ form {
         padding: 10px 0 0px 0;
         background: transparent;
         margin-bottom: $border-width-focused - $border-width;
+        width: 100%;
 
         &::placeholder {
           color: transparent;

frontend/src/styles/settings.scss

@@ -1,5 +1,5 @@
-@import './vars.scss';
-@import './mixins.scss';
+@use 'vars' as *;
+@use 'mixins' as *;
 
 #toggle-settings-container,
 #settings-container {