diff --git a/app/static/css/partials/_film.scss b/app/static/css/partials/_film.scss
old mode 100644
new mode 100755
index afaa48b..ea576a2
--- a/app/static/css/partials/_film.scss
+++ b/app/static/css/partials/_film.scss
@@ -1,7 +1,7 @@
 
 
 .films {
-  margin: 8px;
+  margin: var(--spacing-2);
   box-sizing: border-box;
 
   a {
@@ -9,7 +9,7 @@
     text-decoration: none;
   }
   .film {
-    margin-bottom: 16px;
+    margin-bottom: var(--spacing-2);
     h1 {
       font-weight: bold;
       font-size: 20px;
@@ -17,9 +17,9 @@
   }
   @media screen and (max-width: 799px) {
     .film {
-      margin-bottom: 16px;
+      margin-bottom: var(--spacing-2);
       h2 {
-        margin-bottom: 8px;
+        margin-bottom: var(--spacing);
       }
     }
   }
@@ -30,7 +30,7 @@ main > .film {
   max-width: 1080px;
   margin: auto;
   .info {
-    margin: 8px;
+    margin: var(--spacing) var(--spacing-2);
     margin-bottom: 32px;
     text-overflow: ellipsis;
     overflow: hidden;
@@ -43,12 +43,12 @@ main > .film {
       margin: 24px 0;
     }
     .details {
-      margin-top: 16px;
+      margin-top: var(--spacing-2);
     }
     .bio {
-      margin-top: 16px;
+      margin-top: var(--spacing-2);
       div {
-        margin-top: 8px;
+        margin-top: var(--spacing);
       }
     }
   }
@@ -57,14 +57,14 @@ main > .film {
   }
   .play {
     text-align: center;
-    margin: 8px;
-    margin-top: 16px;
-    margin-bottom: 16px;
+    margin: var(--spacing);
+    margin-top: var(--spacing-2);
+    margin-bottom: var(--spacing-2);
 
     .texts {
-      padding-top: 16px;
+      padding-top: var(--spacing-2);
       .text {
-        padding-bottom: 16px;
+        padding-bottom: var(--spacing-2);
       }
     }
   }
@@ -72,7 +72,7 @@ main > .film {
     h1 {
       span {
         display: block;
-        margin-bottom: 8px;
+        margin-bottom: var(--spacing);
       }
     }
   }
diff --git a/app/static/css/partials/_layout.scss b/app/static/css/partials/_layout.scss
index 4c6899c..3d32061 100755
--- a/app/static/css/partials/_layout.scss
+++ b/app/static/css/partials/_layout.scss
@@ -3,6 +3,9 @@
 	--bg-color-2: #0099ff;
 	--bg-color-3: #ffff00;
 	--bg-color-4: #ff3399;
+
+    --spacing: 8px;
+    --spacing-2: calc(var(--spacing) * 2);
 }
 
 @keyframes background_animation {
diff --git a/app/static/css/partials/_menu.scss b/app/static/css/partials/_menu.scss
old mode 100644
new mode 100755
index 0a27188..bf2bc2e
--- a/app/static/css/partials/_menu.scss
+++ b/app/static/css/partials/_menu.scss
@@ -3,8 +3,8 @@
   background-color: #333;
   position: relative;
   height: 72px;
-  padding-left: 16px;
-  padding-top: 16px;
+  padding-left: var(--spacing-2);
+  padding-top: var(--spacing-2);
   @media screen and (max-width: 799px) {
     padding-left: 0;
     padding-right: 0;
@@ -13,12 +13,12 @@
   nav {
     display: block;
     text-align: right;
-    margin-right: 16px;
+    margin-right: var(--spacing-2);
     @media screen and (max-width: 799px) {
       text-align: center;
       width: 100%;
       margin-right: 0;
-      margin-top: 16px;
+      margin-top: var(--spacing-2);
     }
   }
 
diff --git a/app/static/css/partials/_text.scss b/app/static/css/partials/_text.scss
index 2d9c575..16a0a09 100755
--- a/app/static/css/partials/_text.scss
+++ b/app/static/css/partials/_text.scss
@@ -41,7 +41,7 @@ main > .texts {
   }
 
   .text {
-    margin: 8px;
+    margin: var(--spacing);
     h1 {
       font-weight: bold;
       font-size: 20px;
@@ -49,9 +49,9 @@ main > .texts {
   }
   @media screen and (max-width: 799px) {
     .text {
-      margin-bottom: 16px;
+      margin-bottom: var(--spacing-2);
       h2 {
-        margin-bottom: 8px;
+        margin-bottom: var(--spacing);
       }
     }
   }