diff --git a/src/css/_base.scss b/src/css/_base.scss
index a028d2646..17e7c385a 100644
--- a/src/css/_base.scss
+++ b/src/css/_base.scss
@@ -7,78 +7,7 @@ html {
   height: 100%;
   body {
     height: 100%;
-    color: var(--color-accent);
     margin: 0;
-
-    .root {
-      height: 100%;
-    }
-
-    .ltr {
-      font-family: "Kanit Regular";
-      direction: ltr;
-    }
-
-    .rtl {
-      font-family: "Cairo Regular", "Arial", "Tahoma", sans-serif;
-      direction: rtl;
-    }
-
-    .invisible, .hidden {
-      display: none;
-    }
-
-    .outline-0 {
-      outline: 0;
-    }
-
-    .scroll-y {
-      overflow-y: auto;
-    }
-
-    .font-cairo {
-      font-family: "Cairo Regular";
-    }
-
-    .font-cairo-bold {
-      font-family: "Cairo Bold";
-    }
-
-    .font-amiri {
-      font-family: "Amiri Quran Regular";
-    }
-
-    .color-primary {
-      color: var(--primary-color);
-    }
-
-    .color-secondary {
-      color: var(--secondary-color) !important;
-    }
-
-    .color-accent {
-      color: var(--accent-color);
-    }
-
-    .color-white {
-      color: var(--white-color);
-    }
-
-    .background-primary {
-      background: var(--primary-color);
-    }
-
-    .background-secondary {
-      background: var(--secondary-color);
-    }
-
-    .background-accent {
-      background: var(--accent-color);
-    }
-
-    .border-accent {
-      border: 1px solid var(--accent-color);
-    }
   }
 }
 
@@ -86,6 +15,7 @@ body .root .content.theme {
   margin: 0 auto;
   max-width: $breakpoint-md;
   width: 85%;
+  color: var(--color-accent);
 
   header {
     a[data-testid="h1"] {
@@ -97,6 +27,72 @@ body .root .content.theme {
   ul.body {
     scrollbar-color: var(--primary-color) var(--secondary-color);
   }
+
+  .root {
+    height: 100%;
+  }
+
+  .ltr {
+    font-family: "Kanit Regular";
+    direction: ltr;
+  }
+
+  .rtl {
+    font-family: "Cairo Regular", "Arial", "Tahoma", sans-serif;
+    direction: rtl;
+  }
+
+  .invisible, .hidden {
+    display: none;
+  }
+
+  .outline-0 {
+    outline: 0;
+  }
+
+  .scroll-y {
+    overflow-y: auto;
+  }
+
+  .font-cairo {
+    font-family: "Cairo Regular";
+  }
+
+  .font-cairo-bold {
+    font-family: "Cairo Bold";
+  }
+
+  .font-amiri {
+    font-family: "Amiri Quran Regular";
+  }
+
+  .color-primary {
+    color: var(--primary-color);
+  }
+
+  .color-secondary {
+    color: var(--secondary-color) !important;
+  }
+
+  .color-accent {
+    color: var(--accent-color);
+  }
+
+  .background-primary {
+    background: var(--primary-color);
+  }
+
+  .background-secondary {
+    background: var(--secondary-color);
+  }
+
+  .background-accent {
+    background: var(--accent-color);
+  }
+
+  .border-accent {
+    border: 1px solid var(--accent-color);
+  }
 }
 
 /**