diff --git a/src/cool-stuff/css-purgatory/base/Makefile b/src/cool-stuff/css-purgatory/base/Makefile
new file mode 100644
index 0000000..6b8b5f4
--- /dev/null
+++ b/src/cool-stuff/css-purgatory/base/Makefile
@@ -0,0 +1,14 @@
+clean:
+ rm css/*
+
+css:
+ sass scss:css
+
+css-watch:
+ sass -w scss:css
+
+server:
+ python -m http.server
+
+dev:
+ make -j 2 css-watch server
diff --git a/src/cool-stuff/css-purgatory/base/css/base.css b/src/cool-stuff/css-purgatory/base/css/base.css
new file mode 100644
index 0000000..5a831c5
--- /dev/null
+++ b/src/cool-stuff/css-purgatory/base/css/base.css
@@ -0,0 +1,227 @@
+/* ----------------- */
+/* Custom Properties */
+/* ----------------- */
+/* Many of the prop-
+ * erties here are
+ * where the substa-
+ * ntive changes
+ * will be made */
+/* colors */
+/* Black */
+/* Gray */
+/* White */
+/* font */
+/* Sizes divided by 16 so values given in px */
+/* ----- */
+/* Reset */
+/* ----- */
+*,
+*::before,
+*::after {
+ box-sizing: border-box;
+}
+
+body, h1, h2, h3, h4, h5, h6, p {
+ margin: 0;
+}
+
+h1, h2, h3, h4, h5, h6, p {
+ font-weight: 400;
+}
+
+h1, h2, h3 {
+ line-height: 1.1;
+}
+
+body {
+ font-family: sans-serif;
+ font-size: 1.5rem;
+ color: hsl(0deg, 0%, 0%);
+ background-color: hsl(0deg, 0%, 100%);
+ line-height: 1.5;
+ min-height: 100vh;
+}
+
+main {
+ margin-left: 1vw;
+ margin-top: 1vh;
+}
+
+img, picture {
+ max-width: 100%;
+ display: block;
+}
+
+input, button, textarea, select {
+ font: inherit;
+}
+
+@media (prefers-reduced-motion: reduce) {
+ *,
+*::before,
+*::after {
+ animation-duration: 0.01ms !important;
+ animation-iteration-count: 1 !important;
+ transition-duration: 0.01ms !important;
+ scroll-behaviour: auto !important;
+ }
+}
+/* --------------- */
+/* Utility Classes */
+/* --------------- */
+/* Layouts */
+.container {
+ padding-inline: 4rem;
+ margin-inline: auto;
+ max-width: 80rem;
+}
+
+.flex {
+ display: flex;
+ gap: 2rem;
+}
+
+.column {
+ justify-content: center;
+ align-items: center;
+ flex-direction: column;
+ align-content: center;
+}
+
+.row {
+ flex-direction: row;
+ flex-wrap: wrap;
+ justify-content: space-evenly;
+ align-content: baseline;
+ max-width: 100%;
+}
+
+.two-columns {
+ display: grid;
+ /* Will shrink to one column, never exceed two!
+ * The `max` in `minmax` asks that the columns
+ * be no smaller */
+ grid-template-columns: repeat(auto-fit, minmax(max(30rem, 40%), 1fr));
+ column-gap: 1rem;
+ justify-content: space-evenly;
+}
+
+.lock-bottom {
+ position: absolute;
+ bottom: 0%;
+}
+
+/* Other */
+.hr::after { /* Add fake hr after header */
+ content: "";
+ position: absolute;
+ display: block;
+ clear: both;
+ width: 100%;
+ height: 0.15rem;
+ background-color: black;
+}
+
+/* Color Classes */
+.bg-dark {
+ background-color: hsl(0deg, 0%, 0%);
+}
+
+.bg-light {
+ background-color: hsl(0deg, 0%, 50%);
+}
+
+.bg-white {
+ background-color: hsl(0deg, 0%, 100%);
+}
+
+.text-dark {
+ color: hsl(0deg, 0%, 0%);
+}
+
+.text-light {
+ color: hsl(0deg, 0%, 50%);
+}
+
+.text-white {
+ color: hsl(0deg, 0%, 100%);
+}
+
+/* Font Classes */
+.fs-900 {
+ font-size: 7.8125rem;
+}
+
+.fs-800 {
+ font-size: 4.6875rem;
+}
+
+.fs-700 {
+ font-size: 3.5rem;
+}
+
+.fs-600 {
+ font-size: 2rem;
+}
+
+.fs-500 {
+ font-size: 1.75rem;
+}
+
+.fs-400 {
+ font-size: 1.5rem;
+}
+
+.fs-300 {
+ font-size: 1.125rem;
+}
+
+.fs-200 {
+ font-size: 1rem;
+}
+
+.ff-serif {
+ font-family: serif;
+}
+
+.ff-sans-cond {
+ font-family: sans-serif;
+}
+
+.ff-sans {
+ font-family: sans-serif;
+}
+
+.uppercase {
+ text-transform: uppercase;
+}
+
+.lowercase {
+ text-transform: lowercase;
+}
+
+/* Semantic Tags and Their Classes */
+header {
+ margin-bottom: 3vh;
+}
+
+section:not(:last-of-type) {
+ margin-bottom: 3vh;
+}
+
+footer {
+ margin-top: 3vh;
+}
+
+/* -------------------- */
+/* Non-Reusable Classes */
+/* -------------------- */
+/* meant for these pages
+ * only, not to be used
+ * in practice */
+.colors--block {
+ padding: 3rem 1rem 1rem;
+ border: 1px solid black;
+}
+
+/*# sourceMappingURL=base.css.map */
diff --git a/src/cool-stuff/css-purgatory/base/css/base.css.map b/src/cool-stuff/css-purgatory/base/css/base.css.map
new file mode 100644
index 0000000..d4395b0
--- /dev/null
+++ b/src/cool-stuff/css-purgatory/base/css/base.css.map
@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../scss/base.scss"],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAAA;AAME;AAE0B;AACC;AACA;AAE3B;AAEA;AAcF;AACA;AACA;AAEA;AAAA;AAAA;EAGE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE,aAzBQ;EA0BR,WAhCO;EAiCP,OA7CY;EA8CZ,kBA5CY;EA6CZ;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;AAAA;AAAA;IAGE;IACA;IACA;IACA;;;AAKJ;AACA;AACA;AAEA;AAEA;EACE;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;AACA;AAAA;AAAA;EAGA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;AAEA;EACE;EAEA;EACA;EACA;EACA;EACA;EAEA;;;AAGF;AAEA;EAAY,kBA5IE;;;AA6Id;EAAY,kBA5IE;;;AA6Id;EAAY,kBA5IE;;;AA8Id;EAAc,OAhJA;;;AAiJd;EAAc,OAhJA;;;AAiJd;EAAc,OAhJA;;;AAkJd;AAEA;EAAU,WA/ID;;;AAgJT;EAAU,WA/ID;;;AAgJT;EAAU,WA/ID;;;AAgJT;EAAU,WA/ID;;;AAgJT;EAAU,WA/ID;;;AAgJT;EAAU,WA/ID;;;AAgJT;EAAU,WA/ID;;;AAgJT;EAAU,WA/ID;;;AAiJT;EAAY,aA/ID;;;AAgJX;EAAgB,aA/ID;;;AAgJf;EAAW,aA/ID;;;AAiJV;EAAa;;;AACb;EAAa;;;AAEb;AAEA;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;AACA;AACA;AACA;AAAA;AAAA;AAIA;EACE;EACA","file":"base.css"}
\ No newline at end of file
diff --git a/src/cool-stuff/css-purgatory/base/index.html b/src/cool-stuff/css-purgatory/base/index.html
index 85c5bcc..acb308e 100644
--- a/src/cool-stuff/css-purgatory/base/index.html
+++ b/src/cool-stuff/css-purgatory/base/index.html
@@ -4,7 +4,7 @@
CSS Purgatory - Base
-
+
diff --git a/src/cool-stuff/css-purgatory/base/landingpage.html b/src/cool-stuff/css-purgatory/base/landingpage.html
index caff4da..c817705 100644
--- a/src/cool-stuff/css-purgatory/base/landingpage.html
+++ b/src/cool-stuff/css-purgatory/base/landingpage.html
@@ -4,7 +4,7 @@
Base - Landing Page
-
+