diff --git a/carolyns_creations/frames/style/style.scss b/carolyns_creations/frames/style/style.scss
index a6e7eb6..0692c0a 100644
--- a/carolyns_creations/frames/style/style.scss
+++ b/carolyns_creations/frames/style/style.scss
@@ -1,55 +1,56 @@
-@use '../../../style/menu';
+@use 'menu.css';
 
 // GENERAL
 
 html {
-	background-color: #fff7d7;
-	font-family: 'Comic Sans MS';
+  background-color: #fff7d7;
+  font-family: 'Comic Sans MS';
 }
 
 body {
-	font-size: 13px;
-	color: #810541;
-    margin: 0;
-    padding: 0;
+  font-size: 13px;
+  color: #810541;
+  margin: 0;
+  padding: 0;
 }
 
 // MENU
 
 .menu {
-	padding: 7px;
-	margin: 0;
-	color: #660000;
-	font-size: 13px;
+  padding: 7px;
+  margin: 0;
+  color: #660000;
+  font-size: 13px;
 
-	li { list-style: none; }
+  li { list-style: none; }
 }
 
 // LINKS
 
 a {
-	color: #f63;
+  color: #f63;
 
-	&:visited { color: #8a2be2; }
-	&:active  { color: #0f0; }
+  &:visited { color: #8a2be2; }
+
+  &:active { color: #0f0; }
 }
 
 .defunct { text-decoration: line-through; }
 
 // TEXT
 
-p {	padding: 5px 10px; }
+p { padding: 5px 10px; }
 
-.green  { color: #006400; }
+.green { color: #006400; }
 .purple { color: #800080; }
-.brown  { color: #660000; }
+.brown { color: #660000; }
 
 .normal { font-size: 13px; }
-.big    { font-size: 16px; }
+.big { font-size: 16px; }
 .bigger { font-size: 18px; }
 
-.courier         { font-family: 'Courier New'; }
-.comic-sans      { font-family: 'Comic Sans MS'; }
+.courier { font-family: 'Courier New'; }
+.comic-sans { font-family: 'Comic Sans MS'; }
 .times-new-roman { font-family: 'Times New Roman'; }
 
 .bold { font-weight: 700; }
@@ -57,8 +58,8 @@ p {	padding: 5px 10px; }
 // FORMATTING
 
 .center {
-	text-align: center;
-	padding: 10px 0;
+  text-align: center;
+  padding: 10px 0;
 }
 
 .float-left { float: left; }
@@ -72,49 +73,49 @@ p {	padding: 5px 10px; }
 
 
 .side-padding {
-	width: 80%;
-	display: table;
-	margin: 0 auto;
+  width: 80%;
+  display: table;
+  margin: 0 auto;
 }
 
 .more-side-padding {
-	width: 60%;
-	display: table;
-	margin: 0 auto;
+  width: 60%;
+  display: table;
+  margin: 0 auto;
 }
 
 .less-side-padding {
-	width: 90%;
-	display: table;
-	margin: 0 auto;
+  width: 90%;
+  display: table;
+  margin: 0 auto;
 }
 
 table.img-size img {
-	width: 320px;
-	height: 224px;
+  width: 320px;
+  height: 224px;
 }
 
 table.center-table {
-    width: 50%;
-    margin: 0 auto;
+  width: 50%;
+  margin: 0 auto;
 }
 
 table.wide-center-table {
-    width: 90%;
-    margin: 0 auto;
+  width: 90%;
+  margin: 0 auto;
 }
 
 .border-outer {
-    width: max-content;
-    margin: 0 auto;
-    border: 2px solid;
+  width: max-content;
+  margin: 0 auto;
+  border: 2px solid;
 
-    .border-inner {
-        width: 90vw;
-        margin: 2px;
-        padding: 30px;
-        border: 1px solid;
-    }
+  .border-inner {
+    width: 90vw;
+    margin: 2px;
+    padding: 30px;
+    border: 1px solid;
+  }
 }
 
 .border-brown { border-color: #660000; }
@@ -124,37 +125,38 @@ table.wide-center-table {
 // PAGE SPECIFIC
 
 #sandz {
-	background-color: #dafae8;
-	color: #00552b;
+  background-color: #dafae8;
+  color: #00552b;
 
-	a {
-		color: #800080;
+  a {
+    color: #800080;
 
-		&:visited { color: #808080; }
-		&:active  { color: #f0f; }
-	}
+    &:visited { color: #808080; }
+
+    &:active { color: #f0f; }
+  }
 }
 
 #catz1dex {
-    background-color: #33cccc;
-    color: #000;
-    font-family: Times;
+  background-color: #33cccc;
+  color: #000;
+  font-family: Times;
 
-    a {
-        color: #fff;
+  a {
+    color: #fff;
 
-        &:visited { color: #fff; }
-    }
+    &:visited { color: #fff; }
+  }
 }
 
 #dogz1fooler {
-    background-color: #8442ef;
-    color: #f7f5d7;
-    font-family: Times;
+  background-color: #8442ef;
+  color: #f7f5d7;
+  font-family: Times;
 
-    a {
-        color: #00ff00;
+  a {
+    color: #00ff00;
 
-        &:visited { color: #fff; }
-    }
-}
\ No newline at end of file
+    &:visited { color: #fff; }
+  }
+}
diff --git a/carolyns_creations/style/landing.scss b/carolyns_creations/style/landing.scss
index 79b89c4..aad26aa 100644
--- a/carolyns_creations/style/landing.scss
+++ b/carolyns_creations/style/landing.scss
@@ -1,40 +1,40 @@
-@use '../../style/menu';
+@use 'menu.css';
 
 html {
-	background-color: #202020;
-	text-align: center;
-	color: #fff;
-	font-family: 'Comic Sans MS';
-	font-size: 1em;
+  background-color: #202020;
+  text-align: center;
+  color: #fff;
+  font-family: 'Comic Sans MS';
+  font-size: 1em;
 }
 
 .content {
-	margin-top: 55px;
+  margin-top: 55px;
 }
 
 p {
-	padding-top: 10px;
-	padding-bottom: 10px;
+  padding-top: 10px;
+  padding-bottom: 10px;
 }
 
 a {
-	color: #fff;
-	text-decoration: none;
-	font-weight: bold;
+  color: #fff;
+  text-decoration: none;
+  font-weight: bold;
 
-	&:visted {
-		color: #fff;
-		text-decoration: none;
-	}
+  &:visted {
+    color: #fff;
+    text-decoration: none;
+  }
 
-	&:active {
-		color: #fff;
-		text-decoration: none;
-	}
+  &:active {
+    color: #fff;
+    text-decoration: none;
+  }
 
-	&:hover {
-		color: #ffff40;
-		text-decoration: line-through;
-		cursor: ne-resize;
-	}
-}
\ No newline at end of file
+  &:hover {
+    color: #ffff40;
+    text-decoration: line-through;
+    cursor: ne-resize;
+  }
+}
diff --git a/menu.js b/menu.js
index 7dfe2f7..a26d1e0 100644
--- a/menu.js
+++ b/menu.js
@@ -3,6 +3,10 @@
 const siteRoot = '/' + location.pathname.split('/')[1]
 const {wayback} = await import(`${siteRoot}/config.js`)
 
+/* --------------------------------------------------------------------------------------------- import menu css ---- */
+
+import '/style/menu.css'
+
 /* -------------------------------------------------------------------------------------------------- build menu ---- */
 let menu = document.createElement('div')
 menu.id = 'archive-menu'
diff --git a/petz5world/style/style.scss b/petz5world/style/style.scss
index fbd1c14..310b941 100644
--- a/petz5world/style/style.scss
+++ b/petz5world/style/style.scss
@@ -1,19 +1,19 @@
-@use '../../style/menu';
+@use 'menu.css';
 
 // general
 
 body {
-	text-align: center;
-	font-family: 'Georgia', serif;
-	font-size: 16px;
+  text-align: center;
+  font-family: 'Georgia', serif;
+  font-size: 16px;
 }
 
 // index
 
 #hit-counter {
-	display: inline-block;
-	border: 8px #bdbdbd solid;
-	background-color: #bdbdbd;
+  display: inline-block;
+  border: 8px #bdbdbd solid;
+  background-color: #bdbdbd;
 }
 
 // text
@@ -33,18 +33,18 @@ h2 { font-size: 24px; }
 // misc formatting
 
 .missing-asset {
-	border: 1px solid;
-	padding: 5px;
+  border: 1px solid;
+  padding: 5px;
 }
 
 .display-table {
-	display: table;
-	margin: 10px auto;
+  display: table;
+  margin: 10px auto;
 }
 
 .inline-block {
-	display: inline-block;
-	margin: 0;
+  display: inline-block;
+  margin: 0;
 }
 
 // hell
@@ -55,4 +55,4 @@ em.r { color: #f00; }
 em.y { color: #ff0; }
 em.g { color: #9f0; }
 em.b { color: #3ff; }
-em.p { color: #96f; }
\ No newline at end of file
+em.p { color: #96f; }
diff --git a/style/_menu.scss b/style/_menu.scss
deleted file mode 100644
index 6aec617..0000000
--- a/style/_menu.scss
+++ /dev/null
@@ -1,56 +0,0 @@
-div#archive-menu {
-	position: fixed;
-	top: 20px;
-	right: 20px;
-	text-align: right;
-	font-size: 16px !important;
-
-	padding: 10px;
-	overflow: hidden;
-
-	height: unset;
-	width: unset;
-
-	max-width: 0;
-	max-height: 0;
-	transition: max-height 0.5s ease-out, max-width 0.5s ease-out;
-
-	a {
-		display: block;
-
-		visibility: hidden;
-		transition: visibility 0s;
-	}
-
-	a:hover {
-		text-decoration: underline;
-		text-decoration-style: wavy;
-	}
-
-	#hrt {
-		font-family: sans-serif !important;
-		display: block;
-		position: absolute;
-		top: -1px;
-		right: 5px;
-
-		opacity: 100%;
-		transition: opacity 0.5s ease-out;
-	}
-}
-
-div#archive-menu:hover {
-	max-width: 200px;
-	max-height: 200px;
-	transition: max-height 0.5s ease-in, max-width 0.5s ease-in;
-
-	a {
-		visibility: visible;
-		transition-delay: 0.5s;
-	}
-
-	#hrt {
-		opacity: 0%;
-		transition: opacity 0.5s ease-in;
-	}
-}
\ No newline at end of file
diff --git a/style/menu.css b/style/menu.css
new file mode 100644
index 0000000..677df99
--- /dev/null
+++ b/style/menu.css
@@ -0,0 +1,61 @@
+/*noinspection DuplicatedCode,CssUnresolvedCustomProperty*/
+div#archive-menu {
+    position: fixed;
+    top: 20px;
+    right: 20px;
+    text-align: right;
+    font-size: 16px !important;
+
+    padding: 10px;
+    overflow: hidden;
+
+    height: unset;
+    width: unset;
+
+    max-width: 0;
+    max-height: 0;
+    transition: max-height 0.5s ease-out, max-width 0.5s ease-out;
+
+    border: 1px solid var(--color, black);
+    background: var(--background, white);
+    color: var(--color, black);
+}
+
+div#archive-menu a {
+    display: block;
+
+    visibility: hidden;
+    transition: visibility 0s;
+}
+
+div#archive-menu a:hover {
+    text-decoration: underline;
+    text-decoration-style: wavy;
+}
+
+div#archive-menu #hrt {
+    font-family: sans-serif !important;
+    display: block;
+    position: absolute;
+    top: -1px;
+    right: 5px;
+
+    opacity: 100%;
+    transition: opacity 0.5s ease-out;
+}
+
+div#archive-menu:hover {
+    max-width: 200px;
+    max-height: 200px;
+    transition: max-height 0.5s ease-in, max-width 0.5s ease-in;
+}
+
+div#archive-menu:hover a {
+    visibility: visible;
+    transition-delay: 0.5s;
+}
+
+div#archive-menu:hover #hrt {
+    opacity: 0;
+    transition: opacity 0.5s ease-in;
+}
diff --git a/vpz_research/style/style.scss b/vpz_research/style/style.scss
index f7ac404..8ce1b71 100644
--- a/vpz_research/style/style.scss
+++ b/vpz_research/style/style.scss
@@ -1,54 +1,55 @@
-@use '../../style/menu';
+@use 'menu.css';
 
 /* GLOBAL --------------------------------------------------------------------------------------- */
 
 body {
-	font-family: Arial, Helvetica, sans-serif;
-	font-size: 13px;
-	color: #fff;
-	background-color: #006;
-	padding: 0;
-	margin: 0;
+  font-family: Arial, Helvetica, sans-serif;
+  font-size: 13px;
+  color: #fff;
+  background-color: #006;
+  padding: 0;
+  margin: 0;
 }
 
 a {
-	color: #fc3;
+  color: #fc3;
 
-	&:active { color: #009d27; }
-	&:visited { color: #00f; }
+  &:active { color: #009d27; }
+
+  &:visited { color: #00f; }
 }
 
 nav {
-	background-color: #fff;
-	background-image: url(../img/main-menu_0b725143.gif);
-	width: 180px;
-	height: 100vh;
-	position: fixed;
-	padding: 20px 10px;
+  background-color: #fff;
+  background-image: url(../img/main-menu_0b725143.gif);
+  width: 180px;
+  height: 100vh;
+  position: fixed;
+  padding: 20px 10px;
 
-	text-align: right;
+  text-align: right;
 
-	a {
-		display: block;
-		margin-bottom: 8px;
-	}
+  a {
+    display: block;
+    margin-bottom: 8px;
+  }
 
-	#images { text-align: center; }
+  #images { text-align: center; }
 
-	#line {
-		border-bottom: 1px solid rgba(171, 230, 246, 0.5);
-	}
+  #line {
+    border-bottom: 1px solid rgba(171, 230, 246, 0.5);
+  }
 }
 
-main{
-	margin-left: 200px;
-	padding: 15px 10px;
-	min-height: 100vh;
+main {
+  margin-left: 200px;
+  padding: 15px 10px;
+  min-height: 100vh;
 
-	*:first-child {
-		padding-top: 0;
-		margin-top: 0;
-	}
+  *:first-child {
+    padding-top: 0;
+    margin-top: 0;
+  }
 }
 
 /* text */
@@ -78,102 +79,103 @@ p { margin-bottom: 20px; }
 #index h1 { font-size: 32px; }
 
 #index h2 {
-	font-size: 16px;
-	font-weight: 700;
-	padding-bottom: 0;
-	margin-bottom: 0;
+  font-size: 16px;
+  font-weight: 700;
+  padding-bottom: 0;
+  margin-bottom: 0;
 
-	& + p {
-		padding-top: 0;
-		margin-top: 0;
-	}
+  & + p {
+    padding-top: 0;
+    margin-top: 0;
+  }
 }
 
 #index main table {
-	width: 585px;
-	margin: 20px auto;
-	border-collapse: collapse;
-	font-weight: 700;
+  width: 585px;
+  margin: 20px auto;
+  border-collapse: collapse;
+  font-weight: 700;
 
-	td {
-		border: #c0c0c0 solid 2px;
-		padding: 2px;
-	}
+  td {
+    border: #c0c0c0 solid 2px;
+    padding: 2px;
+  }
 
-	td.title {
-		background-color: #fc3;
-		color: #006;
-	}
+  td.title {
+    background-color: #fc3;
+    color: #006;
+  }
 
-	ul {
-		list-style-position: outside;
-		padding: 0;
-		margin: 0;
-		padding-left: 12px;
+  ul {
+    list-style-position: outside;
+    padding: 0;
+    margin: 0;
+    padding-left: 12px;
 
-		li { padding-left: 15px; }
+    li { padding-left: 15px; }
 
-		li:nth-child(even) {
-			color: #fc3;
-		}
-	}
+    li:nth-child(even) {
+      color: #fc3;
+    }
+  }
 
-	tr:nth-child(2) td {
-		padding-bottom: 15px;
-	}
+  tr:nth-child(2) td {
+    padding-bottom: 15px;
+  }
 }
 
 #index section#online-fun {
-	text-align: center;
+  text-align: center;
 
-	a:first-of-type {
-		text-decoration: none;
-	}
+  a:first-of-type {
+    text-decoration: none;
+  }
 }
 
 /* BREED PAGES ---------------------------------------------------------------------------------- */
 
 .breed-page {
-	h1 {
-		font-size: 24px;
-		display: inline;
-	}
+  h1 {
+    font-size: 24px;
+    display: inline;
+  }
 
-	#main-nav { margin: 10px 0 30px 0; }
+  #main-nav { margin: 10px 0 30px 0; }
 
-	h2 {
-		font-weight: 400;
-		font-size: 18px;
-	}
+  h2 {
+    font-weight: 400;
+    font-size: 18px;
+  }
 
-	nav a {
-		color: #fff;
+  nav a {
+    color: #fff;
 
-		&:visited { color: #fff; }
-		&:active { color: #004000; }
-	}
+    &:visited { color: #fff; }
 
-	table {
-		width: 553px;
-		margin: 0 auto;
-		margin-bottom: 50px;
-		text-align: center;
+    &:active { color: #004000; }
+  }
 
-		td {
-			border-bottom: 1px solid #fff;
-			padding: 1px;
-			padding-bottom: 7px;
-		}
+  table {
+    width: 553px;
+    margin: 0 auto;
+    margin-bottom: 50px;
+    text-align: center;
 
-		.title {
-			background-color: #009;
-			font-weight: 700;
-			font-size: 16px;
-			padding-bottom: 1px;
-		}
+    td {
+      border-bottom: 1px solid #fff;
+      padding: 1px;
+      padding-bottom: 7px;
+    }
 
-		tr:last-child td { border-bottom: none; }
+    .title {
+      background-color: #009;
+      font-weight: 700;
+      font-size: 16px;
+      padding-bottom: 1px;
+    }
 
-		p { text-align: left; }
-	}
-}
\ No newline at end of file
+    tr:last-child td { border-bottom: none; }
+
+    p { text-align: left; }
+  }
+}
diff --git a/wordfire/index.html b/wordfire/index.html
index 73de319..ccb815e 100644
--- a/wordfire/index.html
+++ b/wordfire/index.html
@@ -10,7 +10,7 @@
 	<!--  -->
 
 	<!-- style -->
-	<link rel="stylesheet" href="style/style.css">
+	<link rel="stylesheet" href="wordfire.css">
 	<style>
 		a { color: #06c; }
 		a:active { color: #909; }
diff --git a/wordfire/play1.html b/wordfire/play1.html
index 08ed37e..0af2362 100644
--- a/wordfire/play1.html
+++ b/wordfire/play1.html
@@ -9,7 +9,7 @@
     <!--  -->
 
     <!-- style -->
-    <link rel="stylesheet" href="style/style.css">
+    <link rel="stylesheet" href="wordfire.css">
     <style>
         body {
             width: 760px;
diff --git a/wordfire/play2.html b/wordfire/play2.html
index 3971bef..7f3011c 100644
--- a/wordfire/play2.html
+++ b/wordfire/play2.html
@@ -9,7 +9,7 @@
     <!--  -->
 
     <!-- style -->
-    <link rel="stylesheet" href="style/style.css">
+    <link rel="stylesheet" href="wordfire.css">
     <style>
         /* page grid */
 
diff --git a/wordfire/play3.html b/wordfire/play3.html
index 2632b6d..bc4d291 100644
--- a/wordfire/play3.html
+++ b/wordfire/play3.html
@@ -9,7 +9,7 @@
     <!--  -->
 
     <!-- style -->
-    <link rel="stylesheet" href="style/style.css">
+    <link rel="stylesheet" href="wordfire.css">
     <style>
         body { background-color: #6cf; }
 
diff --git a/wordfire/play4.html b/wordfire/play4.html
index a97120f..27183bf 100644
--- a/wordfire/play4.html
+++ b/wordfire/play4.html
@@ -11,7 +11,7 @@
     <!--  -->
 
     <!-- style -->
-    <link rel="stylesheet" href="style/style.css">
+    <link rel="stylesheet" href="wordfire.css">
     <style>
         body { background-color: #fff; padding: 0; margin: 2px; }
 
diff --git a/wordfire/possums.html b/wordfire/possums.html
index 0909395..d448e58 100644
--- a/wordfire/possums.html
+++ b/wordfire/possums.html
@@ -9,7 +9,7 @@
     <!--  -->
 
     <!-- style -->
-    <link rel="stylesheet" href="style/style.css">
+    <link rel="stylesheet" href="wordfire.css">
     <style>
         body { background-color: #900; color: #009; }
 
diff --git a/wordfire/precious.html b/wordfire/precious.html
index 7a02185..0053ac0 100644
--- a/wordfire/precious.html
+++ b/wordfire/precious.html
@@ -9,7 +9,7 @@
     <!--  -->
 
     <!-- style -->
-    <link rel="stylesheet" href="style/style.css">
+    <link rel="stylesheet" href="wordfire.css">
     <style>
         body { background-color: #ccf; background-image: url(img/preciousmkg_countrybreeze_1.gif); }
 
diff --git a/wordfire/sound.html b/wordfire/sound.html
index 176ab90..a9bb155 100644
--- a/wordfire/sound.html
+++ b/wordfire/sound.html
@@ -9,7 +9,7 @@
     <!--  -->
 
     <!-- style -->
-    <link rel="stylesheet" href="style/style.css">
+    <link rel="stylesheet" href="wordfire.css">
     <style>
         body {
             background-image: url(img/sound_clouds.jpg);
diff --git a/wordfire/style/style.css b/wordfire/style/style.css
deleted file mode 100644
index 8e3f45e..0000000
--- a/wordfire/style/style.css
+++ /dev/null
@@ -1,113 +0,0 @@
-nav#archive-menu {
-  position: fixed;
-  top: 20px;
-  right: 20px;
-  text-align: right;
-  font-size: 16px !important;
-  padding: 10px;
-  overflow: hidden;
-  max-width: 0;
-  max-height: 0;
-  transition: max-height 0.5s ease-out, max-width 0.5s ease-out;
-}
-nav#archive-menu a {
-  display: block;
-  visibility: hidden;
-  transition: visibility 0s;
-}
-nav#archive-menu a:hover {
-  text-decoration: underline;
-  text-decoration-style: wavy;
-}
-nav#archive-menu #hrt {
-  font-family: sans-serif !important;
-  display: block;
-  position: absolute;
-  top: -1px;
-  right: 5px;
-  opacity: 100%;
-  transition: opacity 0.5s ease-out;
-}
-
-nav#archive-menu:hover {
-  max-width: 200px;
-  max-height: 200px;
-  transition: max-height 0.5s ease-in, max-width 0.5s ease-in;
-}
-nav#archive-menu:hover a {
-  visibility: visible;
-  transition-delay: 0.5s;
-}
-nav#archive-menu:hover #hrt {
-  opacity: 0%;
-  transition: opacity 0.5s ease-in;
-}
-
-body {
-  font-family: Verdana, Arial, Helvetica, sans-serif;
-  background-color: #ccf;
-  font-size: 13px;
-}
-
-h1 {
-  font-size: 48px;
-  font-weight: 700;
-  color: #c0f;
-  font-style: italic;
-  text-decoration: underline;
-}
-
-.center {
-  text-align: center;
-}
-
-.small {
-  font-size: 10px;
-}
-
-.medium {
-  font-size: 16px;
-}
-
-.big {
-  font-size: 18px;
-}
-
-.arial {
-  font-family: Arial, Helvetica, sans-serif;
-}
-
-.times {
-  font-family: "Times New Roman", serif;
-}
-
-.georgia {
-  font-family: Georgia, serif;
-}
-
-.courier {
-  font-family: "Courier New", Courier, monospace;
-}
-
-.missing-asset {
-  border: 1px solid;
-  padding: 5px;
-}
-
-.display-table {
-  display: table;
-  margin: 10px auto;
-}
-
-.inline-block {
-  display: inline-block;
-  margin: 0;
-}
-
-#god {
-  float: right;
-  width: 130px;
-  text-align: center;
-}
-
-/*# sourceMappingURL=style.css.map */
diff --git a/wordfire/style/style.css.map b/wordfire/style/style.css.map
deleted file mode 100644
index be2ac41..0000000
--- a/wordfire/style/style.css.map
+++ /dev/null
@@ -1 +0,0 @@
-{"version":3,"sourceRoot":"","sources":["../../style/_menu.scss","style.scss"],"names":[],"mappings":"AAAA;EACC;EACA;EACA;EACA;EACA;EAEA;EACA;EAEA;EACA;EACA;;AAEA;EACC;EAEA;EACA;;AAGD;EACC;EACA;;AAGD;EACC;EACA;EACA;EACA;EACA;EAEA;EACA;;;AAIF;EACC;EACA;EACA;;AAEA;EACC;EACA;;AAGD;EACC;EACA;;;AChDF;EACC;EACA;EACA;;;AAGD;EACC;EACA;EACA;EACA;EACA;;;AAKD;EAAU;;;AAEV;EAAS;;;AAET;EAAU;;;AAEV;EAAO;;;AAEP;EAAS;;;AAET;EAAS;;;AAET;EAAW;;;AAEX;EAAW;;;AAIX;EACC;EACA;;;AAGD;EACC;EACA;;;AAGD;EACC;EACA;;;AAGD;EAAO;EAAc;EAAc","file":"style.css"}
\ No newline at end of file
diff --git a/wordfire/style/style.scss b/wordfire/style/style.scss
deleted file mode 100644
index 10ba8c8..0000000
--- a/wordfire/style/style.scss
+++ /dev/null
@@ -1,52 +0,0 @@
-@use '../../style/menu';
-
-body {
-	font-family: Verdana, Arial, Helvetica, sans-serif;
-	background-color: #ccf;
-	font-size: 13px;
-}
-
-h1 {
-	font-size: 48px;
-	font-weight: 700;
-	color: #c0f;
-	font-style: italic;
-	text-decoration: underline;
-}
-
-// text
-
-.center { text-align: center; }
-
-.small { font-size: 10px; }
-
-.medium { font-size: 16px; }
-
-.big { font-size: 18px; }
-
-.arial { font-family: Arial, Helvetica, sans-serif; }
-
-.times { font-family: 'Times New Roman', serif; }
-
-.georgia { font-family: Georgia, serif; }
-
-.courier { font-family: "Courier New", Courier, monospace; }
-
-// misc
-
-.missing-asset {
-	border: 1px solid;
-	padding: 5px;
-}
-
-.display-table {
-	display: table;
-	margin: 10px auto;
-}
-
-.inline-block {
-	display: inline-block;
-	margin: 0;
-}
-
-#god { float: right; width: 130px; text-align: center; }
\ No newline at end of file
diff --git a/wordfire/wordfire.css b/wordfire/wordfire.css
new file mode 100644
index 0000000..377464f
--- /dev/null
+++ b/wordfire/wordfire.css
@@ -0,0 +1,51 @@
+body {
+    --background: #ccf;
+    font-family: Verdana, Arial, Helvetica, sans-serif;
+    background-color: var(--background);
+    font-size: 13px;
+}
+
+h1 {
+    font-size: 48px;
+    font-weight: 700;
+    color: #c0f;
+    font-style: italic;
+    text-decoration: underline;
+}
+
+/* text */
+
+.center { text-align: center; }
+
+.small { font-size: 10px; }
+
+.medium { font-size: 16px; }
+
+.big { font-size: 18px; }
+
+.arial { font-family: Arial, Helvetica, sans-serif; }
+
+.times { font-family: 'Times New Roman', serif; }
+
+.georgia { font-family: Georgia, serif; }
+
+.courier { font-family: "Courier New", Courier, monospace; }
+
+/* misc */
+
+.missing-asset {
+    border: 1px solid;
+    padding: 5px;
+}
+
+.display-table {
+    display: table;
+    margin: 10px auto;
+}
+
+.inline-block {
+    display: inline-block;
+    margin: 0;
+}
+
+#god { float: right; width: 130px; text-align: center; }