diff --git a/.replit b/.replit
new file mode 100644
index 00000000..65984a6d
--- /dev/null
+++ b/.replit
@@ -0,0 +1,2 @@
+language="html"
+run="index.html"
\ No newline at end of file
diff --git a/404.html b/404.html
index 9b865194..908e0127 100644
--- a/404.html
+++ b/404.html
@@ -45,25 +45,13 @@
     <meta name="twitter:creator:id" content="1436857621827530753">
 
     <script src="https://R74n.com/load.js"></script>
-
+    <link rel="stylesheet" type="text/css" href="style.css">
+    
     <style>
-        html, body {
-            width:  100%;
-            height: 100%;
-            margin: 0;
-        }
+
         body {
-            font-family: 'Press Start 2P';
-            background-color: #000000;
-            color: #ffffff;
+            padding-top: 50px;
         }
-        .pagetitle {
-            font-size: 2em;
-            padding-left: 0.25em;
-        }
-        a {color: rgb(255, 0, 255);text-decoration: none;}
-        a:hover {color: rgb(255, 121, 255);}
-        a:active, a:hover:active {color: rgb(255, 179, 255);}
         /* align the image to the center of the page */
         .img404 {
             display: block;
diff --git a/ad.html b/ad.html
index 0c9ab955..6cee376c 100644
--- a/ad.html
+++ b/ad.html
@@ -45,26 +45,13 @@
     <meta name="twitter:creator:id" content="1436857621827530753">
 
     <script src="https://R74n.com/load.js"></script>
-
+    <link rel="stylesheet" type="text/css" href="style.css">
+    
     <style>
-        html, body {
-            width:  100%;
-            height: 100%;
-            margin: 0;
-        }
+
         body {
-            font-family: 'Press Start 2P';
-            background-color: #000000;
-            color: #ffffff;
             padding-top: 50px;
         }
-        .pagetitle {
-            font-size: 2em;
-            padding-left: 0.25em;
-        }
-        a {color: rgb(255, 0, 255);text-decoration: none;}
-        a:hover {color: rgb(255, 121, 255);}
-        a:active, a:hover:active {color: rgb(255, 179, 255);}
         /* align the image to the center of the page */
         .img404 {
             display: block;
diff --git a/index.html b/index.html
index cdc53906..78d63851 100644
--- a/index.html
+++ b/index.html
@@ -74,331 +74,6 @@
     }</script>
 
     <script src="https://R74n.com/load.js"></script>
-
-    <style>
-        html, body {
-            width:  100%;
-            height: 100%;
-            margin: 0;
-        }
-        body {
-            font-family: 'Press Start 2P';
-            background-color: #000000;
-            color: #ffffff;
-        }
-        .pagetitle {
-            padding: 10px;
-            padding-bottom: 0px;
-            font-size: 0.75em;
-            position: absolute;
-            top: 0;
-            left: 0;
-        }
-        a {color: rgb(255, 0, 255);text-decoration: none;}
-        a:hover {color: rgb(255, 121, 255);}
-        a:active, a:hover:active {color: rgb(255, 179, 255);}
-        #gameDiv { /*game canvas*/
-            border: 1px solid #ffffff;
-            position: absolute;
-            left: 50%;
-            transform: translate(-50%, -0%);
-            -webkit-touch-callout: none; /* iOS Safari */
-                -webkit-user-select: none; /* Safari */
-                -khtml-user-select: none; /* Konqueror HTML */
-                -moz-user-select: none; /* Old versions of Firefox */
-                    -ms-user-select: none; /* Internet Explorer/Edge */
-                        user-select: none;
-            margin-top: 15px;
-        }
-        #infoParent, #modParent, #settingsParent {
-            display: none;
-        }
-        #infoScreen, #modManager, #settingsMenu {
-            border: 1px solid #ffffff;
-            position: absolute;
-            left: 50%;
-            transform: translate(-50%, 28%);
-            width: 95%;
-            height: 50%;
-            max-width: 700px;
-            padding: 10px;
-            background-color: rgb(31, 31, 31);
-            overflow-x: hidden;
-        }
-        .menuTitle {
-            font-size: 1.5em;
-            text-decoration: underline;
-        }
-        .menuText {
-            margin-top: 5px;
-            line-height: 1.5em;
-        }
-        #infoText {
-            white-space: pre-wrap;
-        }
-        .XButton {
-            position: absolute;
-            right: 0px;
-            top: 0px;
-            font-size: 2em;
-            background-color: rgb(100, 33, 33);
-            padding:5px;
-            text-align:center;
-            border: 1px solid #ffffff;
-        }
-        .XButton:hover {
-            background-color: rgb(200, 33, 33);
-        }
-        #infoSearch, #modManagerUrl {
-            position: absolute;
-            bottom: 50%;
-            width: 95%;
-            max-width: 700px;
-            height: 50px;
-            left: 50%;
-            transform: translate(-50%, 198.5%);
-            background-color: rgb(66, 66, 66);
-            color: white;
-            font-size: 1.5em;
-            padding: 8px;
-            font-family: 'Press Start 2P';
-        }
-        #infoSearch:focus, #modManagerUrl:focus {
-            outline: none;
-        }
-        /*#modManagerAdd {
-            position: absolute;
-            bottom: 25%;
-            right: 25%;
-            height: 50px;
-            width: 50px;
-            transform: translate(-25%, -25%);
-            background-color: rgb(0, 190, 32);
-            color: white;
-            font-size: 2em;
-            padding: 10px;
-            font-family: 'Press Start 2P';
-        }*/
-        #modManagerList {
-            margin-top: 20px;
-        }
-        #modManagerList li {
-            list-style-type: none;
-            position: relative;
-        }
-        #modManagerList li::before {
-            content: '•';
-            position: absolute;
-            left: -1.5em;
-            font-size: 1em;
-            font-family: 'Press Start 2P';
-        }
-        .removeModX {
-            color: red;
-            cursor: pointer;
-        }
-        .removeModX:hover {
-            color: rgb(255, 107, 107);
-        }
-        .infoLink {
-            color: rgb(116, 140, 221);
-            cursor: pointer;
-            text-decoration: underline;
-        }
-        button, input[type="submit"], input[type="reset"] {
-            background: none;
-            color: inherit;
-            border: none;
-            padding: 0;
-            font: inherit;
-            cursor: pointer;
-        }
-        .usingTab button:focus {
-            filter: brightness(75%);
-            outline: none;
-        }
-        #underBox {
-            position: absolute;
-            left: 50%;
-            transform: translate(-50%, -0%);
-            margin-top: 10px;
-            width: 100%;
-        }
-        #controls button {
-            padding: 5px 10px;
-            border-radius: 5px;
-            font-size: 1em;
-            text-shadow: 0.5px 1px 4px #000000;
-            color: rgba(255, 255, 255, 0.75);
-            border: 1px solid #797979;
-            margin: 0px 5px 5px 5px;
-            font-variant: small-caps;
-        }
-        #controls button.bright {
-            text-shadow: 0.5px 1px 4px #ffffff;
-            color: rgba(0, 0, 0, 0.75);   
-        }
-        /*Darken when active*/
-        #controls button:active, #controls button:active:hover {
-            filter: brightness(60%);
-        }
-        #controls button:hover {
-            filter: brightness(90%);
-        }
-        #controls button:disabled {
-            cursor: not-allowed;
-        }
-        #controls button[current="true"], #controls button[on="true"] {
-            border: 1px solid #ffffff;
-            filter: brightness(110%);
-            box-shadow: 0 5px 15px rgba(255, 255, 255, .4);
-            color: rgba(255, 255, 255, 1);
-        }
-        #controls button.bright[current="true"] {
-            color: rgba(0, 0, 0, 1);
-        }
-        #controls button[on="true"] {
-            border-color:lime;
-            color:lime;
-        }
-        #controls div {
-            display:block;
-        }
-        .stat {
-            margin-right: 25px;
-            margin-bottom: 5px;
-            float:right;
-        }
-        #stats {
-            margin: 0px 5px 5px 5px;
-            font-size: 0.75em;
-            height: 2em;
-            width:100%;
-        }
-        /* screen size < 700px */
-        @media screen and (max-width: 700px) {
-            #stats {padding-bottom:2em;}
-            .pagetitle {
-                font-size: 1em;
-                padding-left: 0.25em;
-            }
-        }
-        /* screen size > 1325px, h1::after {content:" Sandboxels"} */
-        @media screen and (min-width: 1325px) {
-            .pagetitle::after {content:" Sandboxels"}
-        }
-        #stat-pos, #stat-pixels, #stat-shift, #stat-tps, #stat-ticks, #stat-view {
-            float:left;
-        }
-        .categoryName {
-            font-size: 0.75em;
-            text-transform: uppercase;
-            margin-left: 5px;
-            vertical-align: middle;
-        }
-        #extraInfo {
-            margin:5px
-        }
-        #toolControls, #category-tools {
-            white-space: nowrap;
-            overflow-x: auto;
-            overflow-y: hidden;
-            width: 100%;
-            position: absolute;
-        }
-        #toolControls {
-            margin-top: -3.5em;
-            z-index: 3;
-        }
-        #category-tools {
-            margin-top: -1.5em;
-            z-index: 2;
-        }
-        .category {
-            padding-top: 3em;
-        }
-        #categoryControls {
-            margin-top: 0.5em;
-            margin-bottom: 5px;
-            background-color: rgba(255, 255, 255, 0.125);
-            white-space: nowrap;
-            overflow-x: auto;
-            overflow-y: hidden;
-            width: 100%;
-            position: absolute;
-            z-index: 1;
-            padding-bottom:1px;
-            scrollbar-color: rgba(255, 255, 255, 0.25) rgba(255, 255, 255, 0.15);
-            scrollbar-width: thin;
-        }
-        #categoryControls button {
-            /* Borderless buttons */
-            border: none;
-            border-radius: 0;
-            padding-right: 8px;
-            margin: 0;
-            padding-top: 5px;
-            padding-bottom: 5px;
-            display: inline-block;
-            position: relative;
-            z-index:0;
-        }
-        #categoryControls button:not(:last-child) {
-            border-right: 1px solid rgba(255, 255, 255, 0.4);
-        }
-        #categoryControls button[current="true"] {
-            border: none;
-            background-color: rgba(255, 255, 255, 0.4);
-        }
-        /* Dark Gray X Scrollbar for categoryControls */
-        #categoryControls::-webkit-scrollbar {
-            width: 5px;
-            height: 8px;
-            background-color: rgba(255, 255, 255, 0.15);
-        }
-        #categoryControls::-webkit-scrollbar-thumb {
-            background-color: rgba(255, 255, 255, 0.25);
-            border-radius: 5px;
-        }
-        #categoryControls::-webkit-scrollbar-track {
-            box-shadow: inset 0 0 5px rgba(255, 255, 255, 0.15);
-            border-radius: 10px;
-        }
-        #categoryControls::-webkit-scrollbar-thumb:hover {
-            background-color: rgba(255, 255, 255, 0.3);
-        }
-        .category {
-            margin-top:3.1em;
-            position:relative;
-            display:flex;
-            flex-direction: column;
-            flex-wrap:wrap;
-            text-align:center;
-        }
-        button, input { /*Disable double tap zoom on mobile devices*/
-            touch-action: manipulation;
-        }
-        select {
-            background-color: black;
-            vertical-align: middle;
-            margin-left: 5px;
-            margin-right: 5px;
-            border: white 0.5px solid;
-            border-radius: 20px;
-            padding: 0.5em;
-            color: white;
-        }
-        #canvasDiv {
-            position:relative;
-        }
-        #colorSelector {
-            position:absolute;
-            bottom:1em;
-            right:1em;
-            display: none;
-        }
-    </style>
-
     <script>
         // replaceAll polyfill
         if (!String.prototype.replaceAll) {String.prototype.replaceAll = function(str, newStr){if (Object.prototype.toString.call(str).toLowerCase() === '[object regexp]') {return this.replace(str, newStr);}return this.replace(new RegExp(str, 'g'), newStr);};}
@@ -8124,6 +7799,7 @@ for (var k = 0; k < b0.split(" AND ").length; k++) {
 
         }
     </script>
+  <link rel="stylesheet" type="text/css" href="style.css">
 </head>
 
 <body>
diff --git a/style.css b/style.css
new file mode 100644
index 00000000..3d0f8cf1
--- /dev/null
+++ b/style.css
@@ -0,0 +1,333 @@
+        html, body {
+            width:  100%;
+            height: 100%;
+            margin: 0;
+        }
+        body {
+            font-family: 'Press Start 2P';
+            background-color: #000000;
+            color: #ffffff;
+        }
+        .pagetitle {
+            padding: 10px;
+            padding-bottom: 0px;
+            font-size: 0.75em;
+            position: absolute;
+            top: 0;
+            left: 0;
+        }
+        a {color: rgb(255, 0, 255);text-decoration: none;}
+        a:hover {color: rgb(255, 121, 255);}
+        a:active, a:hover:active {color: rgb(255, 179, 255);}
+        #gameDiv { /*game canvas*/
+            border: 1px solid #ffffff;
+            position: absolute;
+            left: 50%;
+            transform: translate(-50%, -0%);
+            -webkit-touch-callout: none; /* iOS Safari */
+                -webkit-user-select: none; /* Safari */
+                -khtml-user-select: none; /* Konqueror HTML */
+                -moz-user-select: none; /* Old versions of Firefox */
+                    -ms-user-select: none; /* Internet Explorer/Edge */
+                        user-select: none;
+            margin-top: 15px;
+        }
+        #infoParent, #modParent, #settingsParent {
+            display: none;
+        }
+        #infoScreen, #modManager, #settingsMenu {
+            border: 1px solid #ffffff;
+            position: absolute;
+            left: 50%;
+            transform: translate(-50%, 28%);
+            width: 95%;
+            height: 50%;
+            max-width: 700px;
+            padding: 10px;
+            background-color: rgb(31, 31, 31);
+            overflow-x: hidden;
+        }
+        .menuTitle {
+            font-size: 1.5em;
+            text-decoration: underline;
+        }
+        .menuText {
+            margin-top: 5px;
+            line-height: 1.5em;
+        }
+        #infoText {
+            white-space: pre-wrap;
+        }
+        .XButton {
+            position: absolute;
+            right: 0px;
+            top: 0px;
+            font-size: 2em;
+            background-color: rgb(100, 33, 33);
+            padding:5px;
+            text-align:center;
+            border: 1px solid #ffffff;
+        }
+        .XButton:hover {
+            background-color: rgb(200, 33, 33);
+        }
+        #infoSearch, #modManagerUrl {
+            position: absolute;
+            bottom: 50%;
+            width: 95%;
+            max-width: 700px;
+            height: 50px;
+            left: 50%;
+            transform: translate(-50%, 198.5%);
+            background-color: rgb(66, 66, 66);
+            color: white;
+            font-size: 1.5em;
+            padding: 8px;
+            font-family: 'Press Start 2P';
+        }
+        #infoSearch:focus, #modManagerUrl:focus {
+            outline: none;
+        }
+        /*#modManagerAdd {
+            position: absolute;
+            bottom: 25%;
+            right: 25%;
+            height: 50px;
+            width: 50px;
+            transform: translate(-25%, -25%);
+            background-color: rgb(0, 190, 32);
+            color: white;
+            font-size: 2em;
+            padding: 10px;
+            font-family: 'Press Start 2P';
+        }*/
+        #modManagerList {
+            margin-top: 20px;
+        }
+        #modManagerList li {
+            list-style-type: none;
+            position: relative;
+        }
+        #modManagerList li::before {
+            content: '•';
+            position: absolute;
+            left: -1.5em;
+            font-size: 1em;
+            font-family: 'Press Start 2P';
+        }
+        .removeModX {
+            color: red;
+            cursor: pointer;
+        }
+        .removeModX:hover {
+            color: rgb(255, 107, 107);
+        }
+        .infoLink {
+            color: rgb(116, 140, 221);
+            cursor: pointer;
+            text-decoration: underline;
+        }
+        button, input[type="submit"], input[type="reset"] {
+            background: none;
+            color: inherit;
+            border: none;
+            padding: 0;
+            font: inherit;
+            cursor: pointer;
+        }
+        .usingTab button:focus {
+            filter: brightness(75%);
+            outline: none;
+        }
+        #underBox {
+            position: absolute;
+            left: 50%;
+            transform: translate(-50%, -0%);
+            margin-top: 10px;
+            width: 100%;
+        }
+        #controls button {
+            padding: 5px 10px;
+            border-radius: 5px;
+            font-size: 1em;
+            text-shadow: 0.5px 1px 4px #000000;
+            color: rgba(255, 255, 255, 0.75);
+            border: 1px solid #797979;
+            margin: 0px 5px 5px 5px;
+            font-variant: small-caps;
+        }
+        #controls button.bright {
+            text-shadow: 0.5px 1px 4px #ffffff;
+            color: rgba(0, 0, 0, 0.75);   
+        }
+        /*Darken when active*/
+        #controls button:active, #controls button:active:hover {
+            filter: brightness(60%);
+        }
+        #controls button:hover {
+            filter: brightness(90%);
+        }
+        #controls button:disabled {
+            cursor: not-allowed;
+        }
+        #controls button[current="true"], #controls button[on="true"] {
+            border: 1px solid #ffffff;
+            filter: brightness(110%);
+            box-shadow: 0 5px 15px rgba(255, 255, 255, .4);
+            color: rgba(255, 255, 255, 1);
+        }
+        #controls button.bright[current="true"] {
+            color: rgba(0, 0, 0, 1);
+        }
+        #controls button[on="true"] {
+            border-color:lime;
+            color:lime;
+        }
+        #controls div {
+            display:block;
+        }
+        .stat {
+            margin-right: 25px;
+            margin-bottom: 5px;
+            float:right;
+        }
+        #stats {
+            margin: 0px 5px 5px 5px;
+            font-size: 0.75em;
+            height: 2em;
+            width:100%;
+        }
+        /* screen size < 700px */
+        @media screen and (max-width: 700px) {
+            #stats {padding-bottom:2em;}
+            .pagetitle {
+                font-size: 1em;
+                padding-left: 0.25em;
+            }
+        }
+        /* screen size > 1325px, h1::after {content:" Sandboxels"} */
+        @media screen and (min-width: 1325px) {
+            .pagetitle::after {content:" Sandboxels"}
+        }
+        #stat-pos, #stat-pixels, #stat-shift, #stat-tps, #stat-ticks, #stat-view {
+            float:left;
+        }
+        .categoryName {
+            font-size: 0.75em;
+            text-transform: uppercase;
+            margin-left: 5px;
+            vertical-align: middle;
+        }
+        #extraInfo {
+            margin:5px
+        }
+        #toolControls, #category-tools {
+            white-space: nowrap;
+            overflow-x: auto;
+            overflow-y: hidden;
+            width: 100%;
+            position: absolute;
+        }
+
+        /* Scrollbars */
+
+        #toolControls, #category-tools, #categoryControls, #elementControls {
+          scrollbar-color: rgba(255, 255, 255, 0.25) rgba(255, 255, 255, 0.1);
+          scrollbar-width: thin;
+        }
+
+        @media screen and (max-width: 700px) {
+          #toolControls, #category-tools, #categoryControls, #elementControls {
+            margin-bottom: 200px !important;
+          }
+        }
+        
+        #toolControls::-webkit-scrollbar, #category-tools::-webkit-scrollbar, #categoryControls::-webkit-scrollbar, #elementControls::-webkit-scrollbar {
+            width: 5px;
+            height: 8px;
+            background-color: rgba(255, 255, 255, 0.15);
+        }
+        #toolControls::-webkit-scrollbar-thumb, #category-tools::-webkit-scrollbar-thumb, #categoryControls::-webkit-scrollbar-thumb, #elementControls::-webkit-scrollbar-thumb {
+            background-color: rgba(255, 255, 255, 0.25);
+            border-radius: 5px;
+        }
+        #toolControls::-webkit-scrollbar-track, #category-tools::-webkit-scrollbar-track, #categoryControls::-webkit-scrollbar-track, #elementControls::-webkit-scrollbar-track {
+            box-shadow: inset 0 0 5px rgba(255, 255, 255, 0.15);
+            border-radius: 10px;
+        }
+        #toolControls::-webkit-scrollbar-thumb:hover, #category-tools::-webkit-scrollbar-thumb:hover, #categoryControls::-webkit-scrollbar-thumb:hover, #elementControls::-webkit-scrollbar-thumb:hover {
+            background-color: rgba(255, 255, 255, 0.3);
+        }
+
+        #toolControls {
+            margin-top: -3.5em;
+            z-index: 3;
+        }
+        #category-tools {
+            margin-top: -1.5em;
+            z-index: 2;
+        }
+        .category {
+            padding-top: 3em;
+        }
+        #categoryControls {
+            margin-top: 0.5em;
+            margin-bottom: 5px;
+            background-color: rgba(255, 255, 255, 0.125);
+            white-space: nowrap;
+            overflow-x: auto;
+            overflow-y: hidden;
+            width: 100%;
+            position: absolute;
+            z-index: 1;
+            padding-bottom:1px;
+        }
+        #categoryControls button {
+            /* Borderless buttons */
+            border: none;
+            border-radius: 0;
+            padding-right: 8px;
+            margin: 0;
+            padding-top: 5px;
+            padding-bottom: 5px;
+            display: inline-block;
+            position: relative;
+            z-index:0;
+        }
+        #categoryControls button:not(:last-child) {
+            border-right: 1px solid rgba(255, 255, 255, 0.4);
+        }
+        #categoryControls button[current="true"] {
+            border: none;
+            background-color: rgba(255, 255, 255, 0.4);
+        }
+        .category {
+            margin-top:3.1em;
+            position:relative;
+            display:flex;
+            flex-direction: column;
+            flex-wrap:wrap;
+            text-align:center;
+        }
+        button, input { /*Disable double tap zoom on mobile devices*/
+            touch-action: manipulation;
+        }
+        select {
+            background-color: black;
+            vertical-align: middle;
+            margin-left: 5px;
+            margin-right: 5px;
+            border: white 0.5px solid;
+            border-radius: 20px;
+            padding: 0.5em;
+            color: white;
+        }
+        #canvasDiv {
+            position:relative;
+        }
+        #colorSelector {
+            position:absolute;
+            bottom:1em;
+            right:1em;
+            display: none;
+        }
\ No newline at end of file