diff --git a/src/assets/css/main.scss.liquid b/src/assets/css/main.scss.liquid
index fa1895a..badd496 100644
--- a/src/assets/css/main.scss.liquid
+++ b/src/assets/css/main.scss.liquid
@@ -5,231 +5,7 @@ permalink: /assets/css/tocompile.scss
 
 @charset "utf-8";
 
-.author__urls.social-icons .svg-inline--fa,
-.page__footer-follow .social-icons .svg-inline--fa {
-    color: rgba(102, 235, 97, 0.829) !important;
-  }
-
-/* Colors */
-$background-color: #141010 !default;
-$text-color: #fff6fbb9 !default;
-$primary-color: #ff00ff !default;
-$link-color: $primary-color !default;
-$link-color-hover: mix(#fff, $link-color, 25%) !default;
-$link-color-visited: mix(#000, $link-color, 25%) !default;
-$code-background-color: mix(rgb(43, 39, 39), $background-color, 15%) !default;
-$code-background-color-dark: mix(rgb(59, 54, 54), $background-color, 20%) !default;
-
-/* Notices */
-
-$success-color: #3fa63f !default;
-$warning-color: #d67f05 !default;
-$danger-color: #ff0000 !default;
-$info-color: #3b9cba !default;
-
-// section not needed under 11ty
-/* neon syntax highlighting (base16) */
-$base00: #1a191a;
-$base01: #e0e0e0;
-$base02: #b4a6a6;
-$base03: #928e8e;
-$base04: #ccc2c2;
-$base05: #bd6262;
-$base06: #a74040;
-$base07: #701b1b;
-$base08: #ff0086;
-$base09: #fd8900;
-$base0a: #aba800;
-$base0b: #00c918;
-$base0c: #1faaaa;
-$base0d: #3777e6;
-$base0e: #ad00a1;
-$base0f: #926e5c;
- //  base16-atelier-heath
- // base16-synth-midnight-dark
- // base16-summerfruit-dark
- // base16-seti
- // base16-outrun-dark (a bit bright)
- // base16-material-darker
- // base16-harmonic-dark
- // base16-google-dark (little dark for my tastes)
- // base16-default-dark (little dull)
- // base16-classic-dark
- // base16-brewer
-
- // section not needed under 11ty
- // Hacking the syntax highlighting
- .nb {
-  /* Name.Builtin */
-  color: $base0f !important;
-}
-
-.o {
-  /* Operator */
-  color: $base04 !important;
-}
-.n {
-  /* Name */
-  color: $base05 !important;
-}
-.p {
-  /* Punctuation */
-  color: #3ab469 !important;
-}
-.sr {
-  /* Literal.String.Regex */
-  color: $base0c !important;
-}
-
-// Progress Bar
-#progress-bar {
-  background: linear-gradient(to right, red, orange , yellow, green,
-  blue, indigo, violet var(--scroll), transparent 0);
-  position: fixed;
-  overflow: hidden;
-  width: 100%;
-  height: 3px;
-  z-index: 1;
-}
-
-// Scroll to top
-#scroll-to-top {
-  background: rgb(215, 210, 210);
- display:block;
- position:fixed;
- font-size:25px;
- bottom:25px;
- right:10%;
- opacity:0;
- z-index:99;
- text-align:center;
- transform:translateY(30%);
- transition:transform 0.5s ease-in-out, opacity 0.5s ease-in-out
-}
-@media (max-width: 600px) {
- #scroll-to-top {
-  font-size:20px
- }
-}
-@media (max-width: 600px) {
- #scroll-to-top {
-  right:5%;
-  bottom:15px
- }
-}
-#scroll-to-top :last-child {
- transition:transform 0.7s ease-in-out
-}
-#scroll-to-top :last-child:active,
-#scroll-to-top :last-child:hover {
- transform:translateY(-10%)
-}
-#scroll-to-top span {
- cursor:pointer;
- color:#dee3ee
-}
-#scroll-to-top span:hover .up-arrow,
-#scroll-to-top span:active .up-arrow {
- color:#00adb5
-}
-
-tt,
-code,
-kbd,
-samp,
-pre {
-  color: #1bb6be !important
-}
-
-$github-color: #fff !default;
-
-div.highlight {
-	position: relative;
-}
-
-div pre {
-  border: 4px #7e1c1c solid;
-  border-radius: 20px;
-}
-
-code {
-  outline: 1px #7e1c1c solid;
-}
-
-code > span {
-  padding-left: 10px;
-}
-
-// messes up table code blocks
-//code > span:first-child {
-//  padding-top: 5px;
-//}
-
-//code > span:last-child {
-//  padding-bottom: 5px;
-//}
-
-// hack to remove outline that above sets
-td > div > pre {
-  border: unset;
-}
-
-pre > code > div {
-  display: flex;
-}
-
-td {
-  display: inline-flex;
-  // below is hack so Firefox looks the same as Safari / Chrome.
-  // Both will ignore the assignment because they don't know about "ruby-base"
-  // https://caniuse.com/mdn-css_properties_display_ruby_values
-  display: ruby-base;
-}
-
-// === for copy-code-to-clipboard
-
-// h/t https://simplernerd.com/hugo-add-copy-to-clipboard-button/
-
-.clipboard-button {
-	position: absolute;
-	top: 2px;
-	right: 2px;
-	padding: 6px 8px 4px 8px;
-	margin: 5px;
-//	color: gray-500;
-//	border-color: gray-500;
-//	background-color: gray-100;
-	border: 1px solid;
-	border-radius: 6px;
-	font-size: 0.8em;
-	z-index: 1;
-	opacity: 0;
-	transition: 0.1s;
-}
-.clipboard-button > svg {
-//	fill: gray-500;
-}
-.clipboard-button:hover {
-	cursor: pointer;
-	border-color: #01b139;
-	background-color: #87d09e;
-	opacity: 1;
-}
-.clipboard-button:hover > svg {
-	fill: #1900ff;
-}
-.clipboard-button:focus {
-	outline: 0;
-}
-
-.highlight:hover > .clipboard-button {
-	opacity: 1;
-	transition: 0.2s;
-}
-
-.highlight {
-	line-height: 1.5;
-}
+@import "my-vars.scss";
 
 //@import "progress.css"; // for progress bar
 //@import "minimal-mistakes/skins/{{ site.minimal_mistakes_skin | default: 'default' }}"; // skin
diff --git a/src/assets/css/my-vars.scss b/src/assets/css/my-vars.scss
new file mode 100644
index 0000000..2e0e9e7
--- /dev/null
+++ b/src/assets/css/my-vars.scss
@@ -0,0 +1,227 @@
+@charset "utf-8";
+
+.author__urls.social-icons .svg-inline--fa,
+.page__footer-follow .social-icons .svg-inline--fa {
+    color: rgba(102, 235, 97, 0.829) !important;
+  }
+
+/* Colors */
+$background-color: #141010 !default;
+$text-color: #fff6fbb9 !default;
+$primary-color: #ff00ff !default;
+$link-color: $primary-color !default;
+$link-color-hover: mix(#fff, $link-color, 25%) !default;
+$link-color-visited: mix(#000, $link-color, 25%) !default;
+$code-background-color: mix(rgb(43, 39, 39), $background-color, 15%) !default;
+$code-background-color-dark: mix(rgb(59, 54, 54), $background-color, 20%) !default;
+
+/* Notices */
+
+$success-color: #3fa63f !default;
+$warning-color: #d67f05 !default;
+$danger-color: #ff0000 !default;
+$info-color: #3b9cba !default;
+
+// section not needed under 11ty
+/* neon syntax highlighting (base16) */
+$base00: #1a191a;
+$base01: #e0e0e0;
+$base02: #b4a6a6;
+$base03: #928e8e;
+$base04: #ccc2c2;
+$base05: #bd6262;
+$base06: #a74040;
+$base07: #701b1b;
+$base08: #ff0086;
+$base09: #fd8900;
+$base0a: #aba800;
+$base0b: #00c918;
+$base0c: #1faaaa;
+$base0d: #3777e6;
+$base0e: #ad00a1;
+$base0f: #926e5c;
+ //  base16-atelier-heath
+ // base16-synth-midnight-dark
+ // base16-summerfruit-dark
+ // base16-seti
+ // base16-outrun-dark (a bit bright)
+ // base16-material-darker
+ // base16-harmonic-dark
+ // base16-google-dark (little dark for my tastes)
+ // base16-default-dark (little dull)
+ // base16-classic-dark
+ // base16-brewer
+
+ // section not needed under 11ty
+ // Hacking the syntax highlighting
+ .nb {
+  /* Name.Builtin */
+  color: $base0f !important;
+}
+
+.o {
+  /* Operator */
+  color: $base04 !important;
+}
+.n {
+  /* Name */
+  color: $base05 !important;
+}
+.p {
+  /* Punctuation */
+  color: #3ab469 !important;
+}
+.sr {
+  /* Literal.String.Regex */
+  color: $base0c !important;
+}
+
+// Progress Bar
+#progress-bar {
+  background: linear-gradient(to right, red, orange , yellow, green,
+  blue, indigo, violet var(--scroll), transparent 0);
+  position: fixed;
+  overflow: hidden;
+  width: 100%;
+  height: 3px;
+  z-index: 1;
+}
+
+// Scroll to top
+#scroll-to-top {
+  background: rgb(215, 210, 210);
+ display:block;
+ position:fixed;
+ font-size:25px;
+ bottom:25px;
+ right:10%;
+ opacity:0;
+ z-index:99;
+ text-align:center;
+ transform:translateY(30%);
+ transition:transform 0.5s ease-in-out, opacity 0.5s ease-in-out
+}
+@media (max-width: 600px) {
+ #scroll-to-top {
+  font-size:20px
+ }
+}
+@media (max-width: 600px) {
+ #scroll-to-top {
+  right:5%;
+  bottom:15px
+ }
+}
+#scroll-to-top :last-child {
+ transition:transform 0.7s ease-in-out
+}
+#scroll-to-top :last-child:active,
+#scroll-to-top :last-child:hover {
+ transform:translateY(-10%)
+}
+#scroll-to-top span {
+ cursor:pointer;
+ color:#dee3ee
+}
+#scroll-to-top span:hover .up-arrow,
+#scroll-to-top span:active .up-arrow {
+ color:#00adb5
+}
+
+tt,
+code,
+kbd,
+samp,
+pre {
+  color: #1bb6be !important
+}
+
+$github-color: #fff !default;
+
+div.highlight {
+	position: relative;
+}
+
+div pre {
+  border: 4px #7e1c1c solid;
+  border-radius: 20px;
+}
+
+code {
+  outline: 1px #7e1c1c solid;
+}
+
+code > span {
+  padding-left: 10px;
+}
+
+// messes up table code blocks
+//code > span:first-child {
+//  padding-top: 5px;
+//}
+
+//code > span:last-child {
+//  padding-bottom: 5px;
+//}
+
+// hack to remove outline that above sets
+td > div > pre {
+  border: unset;
+}
+
+pre > code > div {
+  display: flex;
+}
+
+td {
+  display: inline-flex;
+  // below is hack so Firefox looks the same as Safari / Chrome.
+  // Both will ignore the assignment because they don't know about "ruby-base"
+  // https://caniuse.com/mdn-css_properties_display_ruby_values
+  display: ruby-base;
+}
+
+// === for copy-code-to-clipboard
+
+// h/t https://simplernerd.com/hugo-add-copy-to-clipboard-button/
+
+.clipboard-button {
+	position: absolute;
+	top: 2px;
+	right: 2px;
+	padding: 6px 8px 4px 8px;
+	margin: 5px;
+//	color: gray-500;
+//	border-color: gray-500;
+//	background-color: gray-100;
+	border: 1px solid;
+	border-radius: 6px;
+	font-size: 0.8em;
+	z-index: 1;
+	opacity: 0;
+	transition: 0.1s;
+}
+.clipboard-button > svg {
+//	fill: gray-500;
+}
+.clipboard-button:hover {
+	cursor: pointer;
+	border-color: #01b139;
+	background-color: #87d09e;
+	opacity: 1;
+}
+.clipboard-button:hover > svg {
+	fill: #1900ff;
+}
+.clipboard-button:focus {
+	outline: 0;
+}
+
+.highlight:hover > .clipboard-button {
+	opacity: 1;
+	transition: 0.2s;
+}
+
+.highlight {
+	line-height: 1.5;
+}