diff --git a/assets/scss/_predefined.scss b/assets/scss/_fonts.scss
similarity index 62%
rename from assets/scss/_predefined.scss
rename to assets/scss/_fonts.scss
index 0deedb7..4c238aa 100644
--- a/assets/scss/_predefined.scss
+++ b/assets/scss/_fonts.scss
@@ -1,25 +1,3 @@
-// Colors
-$theme: hsl(172, 99%, 26%);
-$text: hsl(204, 28%, 93%);
-$light-grey: #292e32; // #494f5c;
-$dark-grey: #3B3E48;
-$highlight-grey: #7d828a;
-$typewriter: hsl(172, 100%, 36%);
-$codebackground: #1c2023 !default;
-$midnightblue: $codebackground;
-
-// Scroll to Top Default colors
-
-$stt-stroke:#CCC;
-$stt-circle:#3b3e48;
-$stt-arrow:#018574;
-
-kbd {
-  font-size: 0.9em !important;
-  color: inherit;
-  background-color: $midnightblue;
-}
-
 // Fonts
 $fonts: "IBM Plex Sans Light", "Segoe UI", Candara, sans-serif;
 $code-fonts: "IBM Plex Mono Light",  Consolas, "Andale Mono WT", "Andale Mono", Menlo, Monaco, monospace;
@@ -96,46 +74,3 @@ $code-fonts: "IBM Plex Mono Light",  Consolas, "Andale Mono WT", "Andale Mono",
     url('/fonts/IBMPlexMono-MediumItalic.woff2') format('woff2');
 }
 
-//Admonition
-$admonition-background: (
-  'note': rgba(68, 138, 255, 0.1),
-  'info': rgba(0, 184, 212, 0.1),
-  'tip': rgba(0, 191, 165, 0.1),
-  'success': rgba(0, 200, 83, 0.1),
-  'warning': rgba(255, 145, 0, 0.1),
-  'failure': rgba(255, 82, 82, 0.1),
-  'danger': rgba(255, 23, 68, 0.1),
-  'bug': rgba(245, 0, 87, 0.1),
-  ) !default;
-
-$admonition-color: (
-  'note': #448aff,
-  'info': #00b8d4,
-  'tip': #00bfa5,
-  'success': #00c853,
-  'warning': #ff9100,
-  'failure': #ff5252,
-  'danger': #ff1744,
-  'bug': #f50057,
-  ) !default;
-
-// Mixins
-@mixin dimmed {
-  opacity: .6;
-}
-
-@mixin aTag {
-  a {
-    word-wrap: break-word;
-    border: none;
-    box-shadow: inset 0 -4px 0 $theme;
-    transition-property: box-shadow;
-    transition-duration: .1s;
-
-    &:hover {
-      box-shadow: inset 0 -1em 0 $theme;
-    }
-  }
-}
-
-
diff --git a/assets/scss/_userstyles.scss b/assets/scss/_userstyles.scss
new file mode 100644
index 0000000..078bcb3
--- /dev/null
+++ b/assets/scss/_userstyles.scss
@@ -0,0 +1,9 @@
+// Typography configuration for typewriter text display
+$font-size-desktop: 1.5rem;          // Base font size for desktop viewports
+$font-size-mobile: 1.2rem;             // Reduced font size for mobile devices
+$line-height: 1.6;                   // Line height multiplier for optimal readability
+
+// Responsive container width settings across device breakpoints
+$width-desktop: 50vw;                // Container width for desktop screens (60% viewport width)
+$width-tablet: 70vw;                 // Container width for tablet screens (70% viewport width)
+$width-mobile: 80vw;                 // Container width for mobile screens (80% viewport width)