diff --git a/Raleway-VariableFont_wght.ttf b/Raleway-VariableFont_wght.ttf
deleted file mode 100644
index d57fecc..0000000
Binary files a/Raleway-VariableFont_wght.ttf and /dev/null differ
diff --git a/index.html b/index.html
index 68879a5..bfb9845 100644
--- a/index.html
+++ b/index.html
@@ -1,76 +1,55 @@
 <html>
 <head>
 
-  <title>Mediocre Hub</title>
+  <title>mediocregopher</title>
 
   <link rel="apple-touch-icon" sizes="180x180" href="favicon/apple-touch-icon.png">
   <link rel="icon" type="image/png" sizes="32x32" href="favicon/favicon-32x32.png">
   <link rel="icon" type="image/png" sizes="16x16" href="favicon/favicon-16x16.png">
   <link rel="manifest" href="favicon/site.webmanifest">
 
-  <link rel="stylesheet" type="text/css" href="simple-grid.min.css" />
+  <link rel="stylesheet" href="/new.css">
 
   <style type="text/css">
 
-    @font-face {
-      font-family: Raleway;
-      src: url(Raleway-VariableFont_wght.ttf);
-    }
-
-    * {
-      color:#bada55;
-      font-family:Raleway;
-    }
-
-    body { background-color:#434343; }
-
-    a:link { color:#bada55; font-weight: bold; }
-    a:visited { color:#bada55; font-weight: normal; }
-    a:hover { color:#bada55; text-decoration: none; }
-
-    .pre-container {
-      width: 100%;
-    }
-
-    .pre-container pre {
-      padding-top: 2rem;
-      float: right;
-    }
-
     .fuck-it-up {
       font-family:Courier,monospace;
-      font-size:8pt;
+      font-size:0.75rem;
       line-height:4pt;
-      color:#bada55;
     }
 
-  </style>
-</head>
-
-<body><div class="container">
-
-    <div class="row">
-
-      <div class="col-4">
-
-        <h1>mediocregopher</h1>
+    :root {
+      --nc-tx-1: #BAD455;
+      --nc-tx-2: #BAD455;
+      --nc-bg-1: #434343;
+      --nc-bg-2: #434343;
+      --nc-bg-3: #434343;
+      --nc-lk-1: #BAD455;
+      --nc-lk-2: #BAD455;
+      --nc-lk-tx: #000000;
+      --nc-ac-1: #BAD455;
+      --nc-ac-tx: #434343;
+    }
 
-        <p>
-          Fuck Web 2.0
-        </p>
+    header {
+      border-bottom: 1px dashed var(--nc-tx-1);
+    }
 
-        <p>
-          This page acts as the hub of my web presence. Everything I do is
-          linked to from here.
-        </p>
+  </style>
 
-      </div>
+</head>
 
-      <div class="col-2"></div>
+<body>
 
-      <div class="col-6">
+  <header>
+    <h1>mediocregopher</h1>
+    <p>
+      This page acts as the hub of my web presence. Everything I do is linked to
+      from here.
+    </p>
+  </header>
 
-        <div class="pre-container"><pre class="fuck-it-up">
+  <pre class="fuck-it-up">
                 .%*.                                                        .-.
                .%@@@+.                                                .--=%@@@-
                =@@@@@@-                                         :--+@@@@@@@@@*
@@ -155,60 +134,36 @@
                                               @@@.
                                               +@-
                                                -
-        </pre></div>
-      </div>
-    </div>
-
-    <div class="row">
-
-      <div class="col-4">
-
-        <h2>Social</h2>
-        <ul>
-          <li><a href="https://blog.mediocregopher.com">Mediocre Blog</a> is for WIP projects.</li>
-          <li><a href="https://twitter.com/mediocre_gopher">Twitter</a> is for shilling, shitcoins, and hot takes.</li>
-          <li><a href="https://bgpicciano.com">Resume</a> is for jobs I've had.</li>
-        </ul>
-
-      </div>
-
-      <div class="col-4">
-
-        <h2>Dev</h2>
-        <ul>
-          <li><a href="https://github.com/mediocregopher">GitHub</a> is for open-source code I've written.</li>
-          <li><a href="https://github.com/mediocregopher/radix">radix</a> is for using redis with go.</li>
-          <li><a href="https://dehub.dev">dehub</a> is for decentralized git projects.</li>
-        </ul>
-
-      </div>
-
-      <div class="col-4">
-
-        <h2>Art</h2>
-        <ul>
-          <li><a href="https://mediocregopher.holaplex.com">Holaplex</a> is for NFTs I've made.</li>
-          <li><a href="https://exchange.art/collections/Cat%20Season">Cat Season</a> is there too.</li>
-        </ul>
-
-      </div>
-
-    </div>
-
-    <div class="row">
-
-      <div class="col-4">
-
-        <h2>Misc</h2>
-        <ul>
-          <li><a href="https://news.cryptic.io">Cryptic News</a> aggregates interesting blogs.</li>
-        </ul>
-
-      </div>
-
-    </div>
-
-</div></body>
+  </pre>
+
+  <h2>Social</h2>
+  <ul>
+    <li><a href="https://blog.mediocregopher.com">Mediocre Blog</a> is for WIP projects.</li>
+    <li><a href="https://twitter.com/mediocre_gopher">Twitter</a> is for shilling, shitcoins, and hot takes.</li>
+    <li><a href="https://bgpicciano.com">Resume</a> is for jobs I've had.</li>
+  </ul>
+
+  <h2>Dev</h2>
+  <ul>
+    <li><a href="https://github.com/mediocregopher">GitHub</a> is for open-source code I've written.</li>
+    <li><a href="https://github.com/mediocregopher/radix">radix</a> is for using redis with go.</li>
+    <li><a href="https://dehub.dev">dehub</a> is for decentralized git projects.</li>
+  </ul>
+
+  <h2>Art</h2>
+  <ul>
+    <li><a href="https://mediocregopher.holaplex.com">Holaplex</a> is for NFTs I've made.</li>
+    <li><a href="https://exchange.art/collections/Cat%20Season">Cat Season</a> is there too.</li>
+  </ul>
+
+  <h2>Misc</h2>
+  <ul>
+    <li><a href="https://news.cryptic.io">Cryptic News</a> aggregates interesting blogs.</li>
+  </ul>
+
+  <hr/>
+
+</body>
 
 <script>
   function replaceAt(str, index, replacement) {
diff --git a/new.css b/new.css
new file mode 100644
index 0000000..586a693
--- /dev/null
+++ b/new.css
@@ -0,0 +1,451 @@
+:root {
+	--nc-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+	--nc-font-mono: Consolas, monaco, 'Ubuntu Mono', 'Liberation Mono', 'Courier New', Courier, monospace;
+
+	/* Light theme */
+	--nc-tx-1: #000000;
+	--nc-tx-2: #1A1A1A;
+	--nc-bg-1: #FFFFFF;
+	--nc-bg-2: #F6F8FA;
+	--nc-bg-3: #E5E7EB;
+	--nc-lk-1: #0070F3;
+	--nc-lk-2: #0366D6;
+	--nc-lk-tx: #FFFFFF;
+	--nc-ac-1: #79FFE1;
+	--nc-ac-tx: #0C4047;
+
+	/* Dark theme */
+	--nc-d-tx-1: #ffffff;
+	--nc-d-tx-2: #eeeeee;
+	--nc-d-bg-1: #000000;
+	--nc-d-bg-2: #111111;
+	--nc-d-bg-3: #222222;
+	--nc-d-lk-1: #3291FF;
+	--nc-d-lk-2: #0070F3;
+	--nc-d-lk-tx: #FFFFFF;
+	--nc-d-ac-1: #7928CA;
+	--nc-d-ac-tx: #FFFFFF;
+}
+
+@media (prefers-color-scheme: dark) {
+	:root {
+		--nc-tx-1: var(--nc-d-tx-1);
+		--nc-tx-2: var(--nc-d-tx-2);
+		--nc-bg-1: var(--nc-d-bg-1);
+		--nc-bg-2: var(--nc-d-bg-2);
+		--nc-bg-3: var(--nc-d-bg-3);
+		--nc-lk-1: var(--nc-d-lk-1);
+		--nc-lk-2: var(--nc-d-lk-2);
+		--nc-lk-tx: var(--nc--dlk-tx);
+		--nc-ac-1: var(--nc-d-ac-1);
+		--nc-ac-tx: var(--nc--dac-tx);
+	}
+}
+
+* {
+	/* Reset margins and padding */
+	margin: 0;
+	padding: 0;
+}
+
+address,
+area,
+article,
+aside,
+audio,
+blockquote,
+datalist,
+details,
+dl,
+fieldset,
+figure,
+form,
+input,
+iframe,
+img,
+meter,
+nav,
+ol,
+optgroup,
+option,
+output,
+p,
+pre,
+progress,
+ruby,
+section,
+table,
+textarea,
+ul,
+video {
+	/* Margins for most elements */
+	margin-bottom: 1rem;
+}
+
+html,input,select,button {
+	/* Set body font family and some finicky elements */
+	font-family: var(--nc-font-sans);
+}
+
+body {
+	/* Center body in page */
+	margin: 0 auto;
+	max-width: 750px;
+	padding: 2rem;
+	border-radius: 6px;
+	overflow-x: hidden;
+	word-break: break-word;
+	overflow-wrap: break-word;
+	background: var(--nc-bg-1);
+
+	/* Main body text */
+	color: var(--nc-tx-2);
+	font-size: 1.03rem;
+	line-height: 1.5;
+}
+
+::selection {
+	/* Set background color for selected text */
+	background: var(--nc-ac-1);
+	color: var(--nc-ac-tx);
+}
+
+h1,h2,h3,h4,h5,h6 {
+	line-height: 1;
+	color: var(--nc-tx-1);
+	padding-top: .875rem;
+}
+
+h1,
+h2,
+h3 {
+	color: var(--nc-tx-1);
+	padding-bottom: 2px;
+	margin-bottom: 8px;
+	border-bottom: 1px solid var(--nc-bg-2);
+}
+
+h4,
+h5,
+h6 {
+	margin-bottom: .3rem;
+}
+
+h1 {
+	font-size: 2.25rem;
+}
+
+h2 {
+	font-size: 1.85rem;
+}
+
+h3 {
+	font-size: 1.55rem;
+}
+
+h4 {
+	font-size: 1.25rem;
+}
+
+h5 {
+	font-size: 1rem;
+}
+
+h6 {
+	font-size: .875rem;
+}
+
+a {
+	color: var(--nc-lk-1);
+}
+
+a:hover {
+	color: var(--nc-lk-2);
+}
+
+abbr:hover {
+	/* Set the '?' cursor while hovering an abbreviation */
+	cursor: help;
+}
+
+blockquote {
+	padding: 1.5rem;
+	background: var(--nc-bg-2);
+	border-left: 5px solid var(--nc-bg-3);
+}
+
+abbr {
+	cursor: help;
+}
+
+blockquote *:last-child {
+	padding-bottom: 0;
+	margin-bottom: 0;
+}
+
+header {
+	background: var(--nc-bg-2);
+	border-bottom: 1px solid var(--nc-bg-3);
+	padding: 2rem 1.5rem;
+	
+	/* This sets the right and left margins to cancel out the body's margins. It's width is still the same, but the background stretches across the page's width. */
+
+	margin: -2rem calc(50% - 50vw) 2rem;
+
+	/* Shorthand for:
+
+	margin-top: -2rem;
+	margin-bottom: 2rem;
+
+	margin-left: calc(50% - 50vw);
+	margin-right: calc(50% - 50vw); */
+
+	padding-left: calc(50vw - 50%);
+	padding-right: calc(50vw - 50%);
+}
+
+header h1,
+header h2,
+header h3 {
+	padding-bottom: 0;
+	border-bottom: 0;
+}
+
+header > *:first-child {
+	margin-top: 0;
+	padding-top: 0;
+}
+
+header > *:last-child {
+	margin-bottom: 0;
+}
+
+a button,
+button,
+input[type="submit"],
+input[type="reset"],
+input[type="button"] {
+	font-size: 1rem;
+	display: inline-block;
+	padding: 6px 12px;
+	text-align: center;
+	text-decoration: none;
+	white-space: nowrap;
+	background: var(--nc-lk-1);
+	color: var(--nc-lk-tx);
+	border: 0;
+	border-radius: 4px;
+	box-sizing: border-box;
+	cursor: pointer;
+	color: var(--nc-lk-tx);
+}
+
+a button[disabled],
+button[disabled],
+input[type="submit"][disabled],
+input[type="reset"][disabled],
+input[type="button"][disabled] {
+	cursor: default;
+	opacity: .5;
+
+	/* Set the [X] cursor while hovering a disabled link */
+	cursor: not-allowed;
+}
+
+.button:focus,
+.button:enabled:hover,
+button:focus,
+button:enabled:hover,
+input[type="submit"]:focus,
+input[type="submit"]:enabled:hover,
+input[type="reset"]:focus,
+input[type="reset"]:enabled:hover,
+input[type="button"]:focus,
+input[type="button"]:enabled:hover {
+	background: var(--nc-lk-2);
+}
+
+a img {
+	margin-bottom: 0px;
+}
+
+code,
+pre,
+kbd,
+samp {
+	/* Set the font family for monospaced elements */
+	font-family: var(--nc-font-mono);
+}
+
+code,
+samp,
+kbd,
+pre {
+	/* The main preformatted style. This is changed slightly across different cases. */
+	background: var(--nc-bg-2);
+	border: 1px solid var(--nc-bg-3);
+	border-radius: 4px;
+	padding: 3px 6px;
+	/* ↓ font-size is relative to containing element, so it scales for titles*/
+	font-size: 0.9em;
+}
+
+kbd {
+	/* Makes the kbd element look like a keyboard key */
+	border-bottom: 3px solid var(--nc-bg-3);
+}
+
+pre {
+	padding: 1rem 1.4rem;
+	max-width: 100%;
+	overflow: auto;
+}
+
+pre code {
+	/* When <code> is in a <pre>, reset it's formatting to blend in */
+	background: inherit;
+	font-size: inherit;
+	color: inherit;
+	border: 0;
+	padding: 0;
+	margin: 0;
+}
+
+code pre {
+	/* When <pre> is in a <code>, reset it's formatting to blend in */
+	display: inline;
+	background: inherit;
+	font-size: inherit;
+	color: inherit;
+	border: 0;
+	padding: 0;
+	margin: 0;
+}
+
+details {
+	/* Make the <details> look more "clickable" */
+	padding: .6rem 1rem;
+	background: var(--nc-bg-2);
+	border: 1px solid var(--nc-bg-3);
+	border-radius: 4px;
+}
+
+summary {
+	/* Makes the <summary> look more like a "clickable" link with the pointer cursor */
+	cursor: pointer;
+	font-weight: bold;
+}
+
+details[open] {
+	/* Adjust the <details> padding while open */
+	padding-bottom: .75rem;
+}
+
+details[open] summary {
+	/* Adjust the <details> padding while open */
+	margin-bottom: 6px;
+}
+
+details[open]>*:last-child {
+	/* Resets the bottom margin of the last element in the <details> while <details> is opened. This prevents double margins/paddings. */
+	margin-bottom: 0;
+}
+
+dt {
+	font-weight: bold;
+}
+
+dd::before {
+	/* Add an arrow to data table definitions */
+	content: '→ ';
+}
+
+hr {
+	/* Reset the border of the <hr> separator, then set a better line */
+	border: 0;
+	border-bottom: 1px solid var(--nc-bg-3);
+	margin: 1rem auto;
+}
+
+fieldset {
+	margin-top: 1rem;
+	padding: 2rem;
+	border: 1px solid var(--nc-bg-3);
+	border-radius: 4px;
+}
+
+legend {
+	padding: auto .5rem;
+}
+
+table {
+	/* border-collapse sets the table's elements to share borders, rather than floating as separate "boxes". */
+	border-collapse: collapse;
+	width: 100%
+}
+
+td,
+th {
+	border: 1px solid var(--nc-bg-3);
+	text-align: left;
+	padding: .5rem;
+}
+
+th {
+	background: var(--nc-bg-2);
+}
+
+tr:nth-child(even) {
+	/* Set every other cell slightly darker. Improves readability. */
+	background: var(--nc-bg-2);
+}
+
+table caption {
+	font-weight: bold;
+	margin-bottom: .5rem;
+}
+
+textarea {
+	/* Don't let the <textarea> extend off the screen naturally or when dragged by the user */
+	max-width: 100%;
+}
+
+ol,
+ul {
+	/* Replace the browser default padding */
+	padding-left: 2rem;
+}
+
+li {
+	margin-top: .4rem;
+}
+
+ul ul,
+ol ul,
+ul ol,
+ol ol {
+	margin-bottom: 0;
+}
+
+mark {
+	padding: 3px 6px;
+	background: var(--nc-ac-1);
+	color: var(--nc-ac-tx);
+}
+
+textarea,
+select,
+input {
+	padding: 6px 12px;
+	margin-bottom: .5rem;
+	background: var(--nc-bg-2);
+	color: var(--nc-tx-2);
+	border: 1px solid var(--nc-bg-3);
+	border-radius: 4px;
+	box-shadow: none;
+	box-sizing: border-box;
+}
+
+img {
+	max-width: 100%;
+}
diff --git a/simple-grid.min.css b/simple-grid.min.css
deleted file mode 100644
index d3f2cc2..0000000
--- a/simple-grid.min.css
+++ /dev/null
@@ -1 +0,0 @@
-@import url(https://fonts.googleapis.com/css?family=Lato:400,300,300italic,400italic,700,700italic);body,html{height:100%;width:100%;margin:0;padding:0;left:0;top:0;font-size:100%}.center,.container{margin-left:auto;margin-right:auto}*{font-family:Lato,Helvetica,sans-serif;color:#333447;line-height:1.5}h1{font-size:2.5rem}h2{font-size:2rem}h3{font-size:1.375rem}h4{font-size:1.125rem}h5{font-size:1rem}h6{font-size:.875rem}p{font-size:1.125rem;font-weight:200;line-height:1.8}.font-light{font-weight:300}.font-regular{font-weight:400}.font-heavy{font-weight:700}.left{text-align:left}.right{text-align:right}.center{text-align:center}.justify{text-align:justify}.container{width:90%}.row{position:relative;width:100%}.row [class^=col]{float:left;margin:.5rem 2%;min-height:.125rem}.col-1,.col-10,.col-11,.col-12,.col-2,.col-3,.col-4,.col-5,.col-6,.col-7,.col-8,.col-9{width:96%}.col-1-sm{width:4.33%}.col-2-sm{width:12.66%}.col-3-sm{width:21%}.col-4-sm{width:29.33%}.col-5-sm{width:37.66%}.col-6-sm{width:46%}.col-7-sm{width:54.33%}.col-8-sm{width:62.66%}.col-9-sm{width:71%}.col-10-sm{width:79.33%}.col-11-sm{width:87.66%}.col-12-sm{width:96%}.row::after{content:"";display:table;clear:both}.hidden-sm{display:none}@media only screen and (min-width:33.75em){.container{width:80%}}@media only screen and (min-width:45em){.col-1{width:4.33%}.col-2{width:12.66%}.col-3{width:21%}.col-4{width:29.33%}.col-5{width:37.66%}.col-6{width:46%}.col-7{width:54.33%}.col-8{width:62.66%}.col-9{width:71%}.col-10{width:79.33%}.col-11{width:87.66%}.col-12{width:96%}.hidden-sm{display:block}}@media only screen and (min-width:60em){.container{width:75%;max-width:60rem}}
