diff --git a/src/assets/styles/main.css b/src/assets/styles/main.css
new file mode 100644
index 0000000..1bae9aa
--- /dev/null
+++ b/src/assets/styles/main.css
@@ -0,0 +1,418 @@
+@charset "UTF-8";
+:root {
+  --test-var: #909090;
+  --background-color: #ffffff;
+  --background-color-secondary: #301e4e;
+  --background-color-tertiary: #ff6e6c;
+  --primary: #1f1135;
+  --secondary: #ff6e6c;
+  --text-primary: #1f1135;
+  --text-secondary: #ffffff;
+  --text-tertiary: #301e4e;
+  --link-color: #301e4e;
+  --tag-color: #301e4e;
+  --button-color: #ff636c;
+  --ratio: 1.2;
+  --s-5: calc(var(--s-4) / var(--ratio));
+  --s-4: calc(var(--s-3) / var(--ratio));
+  --s-3: calc(var(--s-2) / var(--ratio));
+  --s-2: calc(var(--s-1) / var(--ratio));
+  --s-1: calc(var(--s0) / var(--ratio));
+  --s0: 1rem;
+  --s1: calc(var(--s0) * var(--ratio));
+  --s2: calc(var(--s1) * var(--ratio));
+  --s3: calc(var(--s2) * var(--ratio));
+  --s4: calc(var(--s3) * var(--ratio));
+  --s5: calc(var(--s4) * var(--ratio));
+  --max-width: 1000px;
+}
+
+*, *::before, *::after {
+  box-sizing: border-box;
+}
+
+body, h1, h2, h3, h4, p, figure, blockquote, dl, dd {
+  margin: 0;
+}
+
+ul[role=list], ol[role=list] {
+  list-style: none;
+}
+
+html {
+  scroll-behavior: smooth;
+}
+
+body {
+  min-height: 100vh;
+  text-rendering: optimizeSpeed;
+  line-height: 1.5;
+}
+
+a:not([class]) {
+  text-decoration-skip-ink: auto;
+}
+
+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-behavior: auto !important;
+  }
+} /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
+html {
+  line-height: 1.15;
+  -webkit-text-size-adjust: 100%;
+}
+
+body {
+  margin: 0;
+}
+
+main {
+  display: block;
+}
+
+h1 {
+  font-size: 2em;
+  margin: 0.67em 0;
+}
+
+hr {
+  box-sizing: content-box;
+  height: 0;
+  overflow: visible;
+}
+
+pre {
+  font-family: monospace, monospace;
+  font-size: 1em;
+}
+
+a {
+  background-color: rgba(0, 0, 0, 0);
+}
+
+abbr[title] {
+  border-bottom: none;
+  text-decoration: underline;
+  text-decoration: underline dotted;
+}
+
+b, strong {
+  font-weight: bolder;
+}
+
+code, kbd, samp {
+  font-family: monospace, monospace;
+  font-size: 1em;
+}
+
+small {
+  font-size: 80%;
+}
+
+sub, sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+img {
+  border-style: none;
+}
+
+button, input, optgroup, select, textarea {
+  font-family: inherit;
+  font-size: 100%;
+  line-height: 1.15;
+  margin: 0;
+}
+
+button, input {
+  overflow: visible;
+}
+
+button, select {
+  text-transform: none;
+}
+
+button, [type=button], [type=reset], [type=submit] {
+  -webkit-appearance: button;
+}
+
+button::-moz-focus-inner, [type=button]::-moz-focus-inner, [type=reset]::-moz-focus-inner, [type=submit]::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+button:-moz-focusring, [type=button]:-moz-focusring, [type=reset]:-moz-focusring, [type=submit]:-moz-focusring {
+  outline: 1px dotted ButtonText;
+}
+
+fieldset {
+  padding: 0.35em 0.75em 0.625em;
+}
+
+legend {
+  box-sizing: border-box;
+  color: inherit;
+  display: table;
+  max-width: 100%;
+  padding: 0;
+  white-space: normal;
+}
+
+progress {
+  vertical-align: baseline;
+}
+
+textarea {
+  overflow: auto;
+}
+
+[type=checkbox], [type=radio] {
+  box-sizing: border-box;
+  padding: 0;
+}
+
+[type=number]::-webkit-inner-spin-button, [type=number]::-webkit-outer-spin-button {
+  height: auto;
+}
+
+[type=search] {
+  -webkit-appearance: textfield;
+  outline-offset: -2px;
+}
+
+[type=search]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+::-webkit-file-upload-button {
+  -webkit-appearance: button;
+  font: inherit;
+}
+
+details {
+  display: block;
+}
+
+summary {
+  display: list-item;
+}
+
+template {
+  display: none;
+}
+
+[hidden] {
+  display: none;
+}
+
+#layout {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+  overflow: hidden;
+  background: linear-gradient(310deg, var(--background-color-tertiary), var(--background-color-tertiary) 20%, var(--background-color) 20%);
+}
+
+#main-container {
+  width: 90%;
+  max-width: var(--max-width);
+  margin: 0 auto;
+  padding-bottom: var(--s1);
+  flex: 1 0 auto;
+  overflow: hidden;
+}
+
+#main-container main {
+  max-width: 65ch;
+}
+
+h1 {
+  font-size: clamp(var(--s3), 3vw, var(--s4));
+  margin: 0 0 var(--s0);
+}
+
+h2 {
+  font-size: clamp(var(--s2), 3vw, var(--s3));
+}
+
+h3 {
+  font-size: clamp(var(--s1), 3vw, var(--s2));
+  margin: 0 0 var(--s-1);
+  font-style: italic;
+}
+
+h4 {
+  margin: var(--s-2) 0;
+  font-size: clamp(var(--s-0), 3vw, var(--s1));
+  text-transform: uppercase;
+}
+
+p {
+  margin-bottom: var(--s1);
+}
+
+ul {
+  margin-top: var(--s0);
+  margin-bottom: var(--s0);
+}
+
+a {
+  color: var(--link-color);
+}
+
+* {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  font-family: "Bitter", "Bookman Old Style", serif;
+}
+
+header {
+  min-width: 100%;
+}
+
+#header--container {
+  width: 90%;
+  max-width: var(--max-width);
+  padding: var(--s1) 0;
+  margin: 0 auto;
+  display: flex;
+  flex-direction: column;
+  flex-wrap: wrap;
+  align-items: left;
+  color: var(--text-primary);
+}
+
+#header--title a {
+  font-size: clamp(var(--s3), 3vw, var(--s4));
+  font-weight: 200;
+  background: linear-gradient(to right, var(--primary), var(--primary) 63%, var(--secondary) 63%);
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: rgba(0, 0, 0, 0);
+  text-decoration: none;
+}
+
+@media screen and (min-width: 48rem) {
+  #header--container {
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+  }
+}
+footer {
+  width: 100%;
+  max-width: 100vw;
+  background: var(--background-color-secondary);
+  color: var(--text-secondary);
+}
+
+footer a {
+  color: var(--text-secondary);
+  text-decoration: none;
+}
+
+footer a:hover {
+  text-decoration: underline;
+}
+
+#footer--container {
+  width: 90%;
+  max-width: var(--max-width);
+  margin: 0 auto;
+  padding: var(--s2) 0;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  align-items: center;
+}
+
+nav ul {
+  padding: 0;
+  display: block;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  list-style-type: none;
+  gap: var(--s0) var(--s2);
+  font-size: var(--s0);
+}
+
+nav ul li::before {
+  content: "​";
+}
+
+nav ul li a {
+  color: var(--text-primary);
+  text-decoration: none;
+}
+
+nav ul li a:hover {
+  text-decoration: underline;
+}
+
+.nav--active {
+  text-decoration: underline;
+}
+
+@media screen and (min-width: 48rem) {
+  nav ul {
+    font-size: var(--s1);
+  }
+}
+#posts--list article {
+  margin-bottom: var(--s2);
+}
+
+.post--time {
+  font-size: clamp(var(--s-1), 3vw, var(--s0));
+  font-weight: 200;
+}
+
+.tags--container {
+  padding: var(--s-1) 0;
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--s0);
+}
+
+.tag a {
+  padding: var(--s-2) var(--s-1);
+  color: var(--text-secondary);
+  text-decoration: none;
+  background: var(--background-color-secondary);
+}
+
+.icon {
+  fill: var(--text-secondary);
+  width: var(--s2);
+  height: var(--s2);
+}
+
+/*# sourceMappingURL=main.css.map */
diff --git a/src/assets/styles/main.css.map b/src/assets/styles/main.css.map
new file mode 100644
index 0000000..89e82c1
--- /dev/null
+++ b/src/assets/styles/main.css.map
@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["scss/main.css"],"names":[],"mappings":";AAAC;EAAM;EAAoB;EAA4B;EAAsC;EAAqC;EAAmB;EAAqB;EAAwB;EAA0B;EAAyB;EAAsB;EAAqB;EAAwB;EAAa;EAAuC;EAAuC;EAAuC;EAAuC;EAAsC;EAAW;EAAqC;EAAqC;EAAqC;EAAqC;EAAqC;;;AAAoB;EAAqB;;;AAAsB;EAA2C;;;AAAS;EAA4B;;;AAAgB;EAAK;;;AAAuB;EAAK;EAAiB;EAA6B;;;AAAgB;EAAe;;;AAA8B;EAAY;EAAe;;;AAAc;EAA6B;;;AAAa;EAAuC;IAAqB;IAAoC;IAAuC;IAAqC;;EAAiC;AAA4E;EAAK;EAAiB;;;AAA8B;EAAK;;;AAAS;EAAK;;;AAAc;EAAG;EAAc;;;AAAe;EAAG;EAAuB;EAAS;;;AAAiB;EAAI;EAAgC;;;AAAc;EAAE;;;AAA+B;EAAY;EAAmB;EAA0B;;;AAAiC;EAAS;;;AAAmB;EAAc;EAAgC;;;AAAc;EAAM;;;AAAc;EAAQ;EAAc;EAAc;EAAkB;;;AAAwB;EAAI;;;AAAe;EAAI;;;AAAW;EAAI;;;AAAkB;EAAsC;EAAoB;EAAe;EAAiB;;;AAAS;EAAa;;;AAAiB;EAAc;;;AAAoB;EAAgD;;;AAA0B;EAAwH;EAAkB;;;AAAU;EAA4G;;;AAA8B;EAAS;;;AAA2B;EAAO;EAAsB;EAAc;EAAc;EAAe;EAAU;;;AAAmB;EAAS;;;AAAwB;EAAS;;;AAAc;EAA6B;EAAsB;;;AAAU;EAAkF;;;AAAY;EAAc;EAA6B;;;AAAoB;EAAyC;;;AAAwB;EAA6B;EAA0B;;;AAAa;EAAQ;;;AAAc;EAAQ;;;AAAkB;EAAS;;;AAAa;EAAS;;;AAAa;EAAQ;EAAa;EAAsB;EAAiB;EAAgB;;;AAAwI;EAAgB;EAAU;EAA2B;EAAc;EAAyB;EAAc;;;AAAgB;EAAqB;;;AAAe;EAAG;EAAyC;;;AAAqB;EAAG;;;AAAyC;EAAG;EAAyC;EAAsB;;;AAAkB;EAAG;EAAoB;EAA0C;;;AAAyB;EAAE;;;AAAwB;EAAG;EAAqB;;;AAAwB;EAAE;;;AAAwB;EAAE;;;AAA+H;EAAkB;;;AAA+C;EAAO;;;AAAe;EAAmB;EAAU;EAA2B;EAAoB;EAAc;EAAa;EAAsB;EAAe;EAAiB;;;AAA0B;EAAiB;EAAyC;EAAgB;EAA+F;EAAqB;EAA6B;EAAsC;;;AAAqB;EAAqC;IAAmB;IAAmB;IAA8B;;;AAAoB;EAAO;EAAW;EAAgB;EAA6C;;;AAA4B;EAAS;EAA4B;;;AAAqB;EAAe;;;AAA0B;EAAmB;EAAU;EAA2B;EAAc;EAAoB;EAAa;EAAmB;EAAe;EAA8B;;;AAAmB;EAAO;EAAU;EAAc;EAAa;EAAmB;EAAe;EAAqB;EAAwB;;;AAAoB;EAAkB;;;AAAY;EAAY;EAA0B;;;AAAqB;EAAkB;;;AAA0B;EAAa;;;AAA0B;EAAqC;IAAO;;;AAAqB;EAAqB;;;AAAwB;EAAY;EAA0C;;;AAAgB;EAAiB;EAAqB;EAAa;EAAe;;;AAAc;EAAO;EAA8B;EAA4B;EAAqB;;;AAA6C;EAAM;EAA2B;EAAgB","file":"main.css"}
\ No newline at end of file
diff --git a/src/assets/styles/base/_fonts.scss b/src/assets/styles/scss/base/_fonts.scss
similarity index 100%
rename from src/assets/styles/base/_fonts.scss
rename to src/assets/styles/scss/base/_fonts.scss
diff --git a/src/assets/styles/base/_layout.scss b/src/assets/styles/scss/base/_layout.scss
similarity index 100%
rename from src/assets/styles/base/_layout.scss
rename to src/assets/styles/scss/base/_layout.scss
diff --git a/src/assets/styles/base/_links.scss b/src/assets/styles/scss/base/_links.scss
similarity index 100%
rename from src/assets/styles/base/_links.scss
rename to src/assets/styles/scss/base/_links.scss
diff --git a/src/assets/styles/base/_normalize.scss b/src/assets/styles/scss/base/_normalize.scss
similarity index 100%
rename from src/assets/styles/base/_normalize.scss
rename to src/assets/styles/scss/base/_normalize.scss
diff --git a/src/assets/styles/base/_reset.scss b/src/assets/styles/scss/base/_reset.scss
similarity index 100%
rename from src/assets/styles/base/_reset.scss
rename to src/assets/styles/scss/base/_reset.scss
diff --git a/src/assets/styles/base/_text.scss b/src/assets/styles/scss/base/_text.scss
similarity index 100%
rename from src/assets/styles/base/_text.scss
rename to src/assets/styles/scss/base/_text.scss
diff --git a/src/assets/styles/components/_footer.scss b/src/assets/styles/scss/components/_footer.scss
similarity index 100%
rename from src/assets/styles/components/_footer.scss
rename to src/assets/styles/scss/components/_footer.scss
diff --git a/src/assets/styles/components/_header.scss b/src/assets/styles/scss/components/_header.scss
similarity index 100%
rename from src/assets/styles/components/_header.scss
rename to src/assets/styles/scss/components/_header.scss
diff --git a/src/assets/styles/components/_icons.scss b/src/assets/styles/scss/components/_icons.scss
similarity index 100%
rename from src/assets/styles/components/_icons.scss
rename to src/assets/styles/scss/components/_icons.scss
diff --git a/src/assets/styles/components/_nav.scss b/src/assets/styles/scss/components/_nav.scss
similarity index 100%
rename from src/assets/styles/components/_nav.scss
rename to src/assets/styles/scss/components/_nav.scss
diff --git a/src/assets/styles/components/_post-list.scss b/src/assets/styles/scss/components/_post-list.scss
similarity index 100%
rename from src/assets/styles/components/_post-list.scss
rename to src/assets/styles/scss/components/_post-list.scss
diff --git a/src/assets/styles/components/_post.scss b/src/assets/styles/scss/components/_post.scss
similarity index 100%
rename from src/assets/styles/components/_post.scss
rename to src/assets/styles/scss/components/_post.scss
diff --git a/src/assets/styles/components/_tags.scss b/src/assets/styles/scss/components/_tags.scss
similarity index 100%
rename from src/assets/styles/components/_tags.scss
rename to src/assets/styles/scss/components/_tags.scss
diff --git a/src/assets/styles/scss/main.css b/src/assets/styles/scss/main.css
new file mode 100644
index 0000000..8ad387d
--- /dev/null
+++ b/src/assets/styles/scss/main.css
@@ -0,0 +1 @@
+:root{--test-var: #909090;--background-color: #ffffff;--background-color-secondary: #301e4e;--background-color-tertiary: #ff6e6c;--primary: #1f1135;--secondary: #ff6e6c;--text-primary: #1f1135;--text-secondary: #ffffff;--text-tertiary: #301e4e;--link-color: #301e4e;--tag-color: #301e4e;--button-color: #ff636c;--ratio: 1.2;--s-5: calc(var(--s-4) / var(--ratio));--s-4: calc(var(--s-3) / var(--ratio));--s-3: calc(var(--s-2) / var(--ratio));--s-2: calc(var(--s-1) / var(--ratio));--s-1: calc(var(--s0) / var(--ratio));--s0: 1rem;--s1: calc(var(--s0) * var(--ratio));--s2: calc(var(--s1) * var(--ratio));--s3: calc(var(--s2) * var(--ratio));--s4: calc(var(--s3) * var(--ratio));--s5: calc(var(--s4) * var(--ratio));--max-width: 1000px}*,*::before,*::after{box-sizing:border-box}body,h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin:0}ul[role=list],ol[role=list]{list-style:none}html{scroll-behavior:smooth}body{min-height:100vh;text-rendering:optimizeSpeed;line-height:1.5}a:not([class]){text-decoration-skip-ink:auto}img,picture{max-width:100%;display:block}input,button,textarea,select{font:inherit}@media(prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}}/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:rgba(0,0,0,0)}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}#layout{display:flex;flex-direction:column;min-height:100vh;overflow:hidden;background:linear-gradient(310deg, var(--background-color-tertiary), var(--background-color-tertiary) 20%, var(--background-color) 20%)}#main-container{width:90%;max-width:var(--max-width);margin:0 auto;padding-bottom:var(--s1);flex:1 0 auto;overflow:hidden}#main-container main{max-width:65ch}h1{font-size:clamp(var(--s3),3vw,var(--s4));margin:0 0 var(--s0)}h2{font-size:clamp(var(--s2),3vw,var(--s3))}h3{font-size:clamp(var(--s1),3vw,var(--s2));margin:0 0 var(--s-1);font-style:italic}h4{margin:var(--s-2) 0;font-size:clamp(var(--s-0),3vw,var(--s1));text-transform:uppercase}p{margin-bottom:var(--s1)}ul{margin-top:var(--s0);margin-bottom:var(--s0)}a{color:var(--link-color)}*{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif}h1,h2,h3,h4,h5,h6{font-family:"Bitter","Bookman Old Style",serif}header{min-width:100%}#header--container{width:90%;max-width:var(--max-width);padding:var(--s1) 0;margin:0 auto;display:flex;flex-direction:column;flex-wrap:wrap;align-items:left;color:var(--text-primary)}#header--title a{font-size:clamp(var(--s3),3vw,var(--s4));font-weight:200;background:linear-gradient(to right, var(--primary), var(--primary) 63%, var(--secondary) 63%);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:rgba(0,0,0,0);text-decoration:none}@media screen and (min-width: 48rem){#header--container{flex-direction:row;justify-content:space-between;align-items:center}}footer{width:100%;max-width:100vw;background:var(--background-color-secondary);color:var(--text-secondary)}footer a{color:var(--text-secondary);text-decoration:none}footer a:hover{text-decoration:underline}#footer--container{width:90%;max-width:var(--max-width);margin:0 auto;padding:var(--s2) 0;display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:center}nav ul{padding:0;display:block;display:flex;flex-direction:row;flex-wrap:wrap;list-style-type:none;gap:var(--s0) var(--s2);font-size:var(--s0)}nav ul li::before{content:"​"}nav ul li a{color:var(--text-primary);text-decoration:none}nav ul li a:hover{text-decoration:underline}.nav--active{text-decoration:underline}@media screen and (min-width: 48rem){nav ul{font-size:var(--s1)}}#posts--list article{margin-bottom:var(--s2)}.post--time{font-size:clamp(var(--s-1),3vw,var(--s0));font-weight:200}.tags--container{padding:var(--s-1) 0;display:flex;flex-wrap:wrap;gap:var(--s0)}.tag a{padding:var(--s-2) var(--s-1);color:var(--text-secondary);text-decoration:none;background:var(--background-color-secondary)}.icon{fill:var(--text-secondary);width:var(--s2);height:var(--s2)}
diff --git a/src/assets/styles/main.scss b/src/assets/styles/scss/main.scss
similarity index 93%
rename from src/assets/styles/main.scss
rename to src/assets/styles/scss/main.scss
index d636117..eeae1fa 100644
--- a/src/assets/styles/main.scss
+++ b/src/assets/styles/scss/main.scss
@@ -14,7 +14,7 @@ Main Style Sheet
 @import "base/fonts";
 
 // Component Styles
-@import "components/header";
+@import "components/header"; 
 @import "components/footer";
 @import "components/nav";
 @import "components/post-list";
diff --git a/src/assets/styles/utility/_variables.scss b/src/assets/styles/scss/utility/_variables.scss
similarity index 97%
rename from src/assets/styles/utility/_variables.scss
rename to src/assets/styles/scss/utility/_variables.scss
index 96fb4b2..bb0476f 100644
--- a/src/assets/styles/utility/_variables.scss
+++ b/src/assets/styles/scss/utility/_variables.scss
@@ -1,4 +1,5 @@
 :root {
+  --test-var: #909090; 
   // COLORS
   --background-color: #ffffff;
   --background-color-secondary: #301e4e;
diff --git a/src/includes/styles/main.css b/src/includes/styles/main.css
new file mode 100644
index 0000000..1bae9aa
--- /dev/null
+++ b/src/includes/styles/main.css
@@ -0,0 +1,418 @@
+@charset "UTF-8";
+:root {
+  --test-var: #909090;
+  --background-color: #ffffff;
+  --background-color-secondary: #301e4e;
+  --background-color-tertiary: #ff6e6c;
+  --primary: #1f1135;
+  --secondary: #ff6e6c;
+  --text-primary: #1f1135;
+  --text-secondary: #ffffff;
+  --text-tertiary: #301e4e;
+  --link-color: #301e4e;
+  --tag-color: #301e4e;
+  --button-color: #ff636c;
+  --ratio: 1.2;
+  --s-5: calc(var(--s-4) / var(--ratio));
+  --s-4: calc(var(--s-3) / var(--ratio));
+  --s-3: calc(var(--s-2) / var(--ratio));
+  --s-2: calc(var(--s-1) / var(--ratio));
+  --s-1: calc(var(--s0) / var(--ratio));
+  --s0: 1rem;
+  --s1: calc(var(--s0) * var(--ratio));
+  --s2: calc(var(--s1) * var(--ratio));
+  --s3: calc(var(--s2) * var(--ratio));
+  --s4: calc(var(--s3) * var(--ratio));
+  --s5: calc(var(--s4) * var(--ratio));
+  --max-width: 1000px;
+}
+
+*, *::before, *::after {
+  box-sizing: border-box;
+}
+
+body, h1, h2, h3, h4, p, figure, blockquote, dl, dd {
+  margin: 0;
+}
+
+ul[role=list], ol[role=list] {
+  list-style: none;
+}
+
+html {
+  scroll-behavior: smooth;
+}
+
+body {
+  min-height: 100vh;
+  text-rendering: optimizeSpeed;
+  line-height: 1.5;
+}
+
+a:not([class]) {
+  text-decoration-skip-ink: auto;
+}
+
+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-behavior: auto !important;
+  }
+} /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
+html {
+  line-height: 1.15;
+  -webkit-text-size-adjust: 100%;
+}
+
+body {
+  margin: 0;
+}
+
+main {
+  display: block;
+}
+
+h1 {
+  font-size: 2em;
+  margin: 0.67em 0;
+}
+
+hr {
+  box-sizing: content-box;
+  height: 0;
+  overflow: visible;
+}
+
+pre {
+  font-family: monospace, monospace;
+  font-size: 1em;
+}
+
+a {
+  background-color: rgba(0, 0, 0, 0);
+}
+
+abbr[title] {
+  border-bottom: none;
+  text-decoration: underline;
+  text-decoration: underline dotted;
+}
+
+b, strong {
+  font-weight: bolder;
+}
+
+code, kbd, samp {
+  font-family: monospace, monospace;
+  font-size: 1em;
+}
+
+small {
+  font-size: 80%;
+}
+
+sub, sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+img {
+  border-style: none;
+}
+
+button, input, optgroup, select, textarea {
+  font-family: inherit;
+  font-size: 100%;
+  line-height: 1.15;
+  margin: 0;
+}
+
+button, input {
+  overflow: visible;
+}
+
+button, select {
+  text-transform: none;
+}
+
+button, [type=button], [type=reset], [type=submit] {
+  -webkit-appearance: button;
+}
+
+button::-moz-focus-inner, [type=button]::-moz-focus-inner, [type=reset]::-moz-focus-inner, [type=submit]::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+button:-moz-focusring, [type=button]:-moz-focusring, [type=reset]:-moz-focusring, [type=submit]:-moz-focusring {
+  outline: 1px dotted ButtonText;
+}
+
+fieldset {
+  padding: 0.35em 0.75em 0.625em;
+}
+
+legend {
+  box-sizing: border-box;
+  color: inherit;
+  display: table;
+  max-width: 100%;
+  padding: 0;
+  white-space: normal;
+}
+
+progress {
+  vertical-align: baseline;
+}
+
+textarea {
+  overflow: auto;
+}
+
+[type=checkbox], [type=radio] {
+  box-sizing: border-box;
+  padding: 0;
+}
+
+[type=number]::-webkit-inner-spin-button, [type=number]::-webkit-outer-spin-button {
+  height: auto;
+}
+
+[type=search] {
+  -webkit-appearance: textfield;
+  outline-offset: -2px;
+}
+
+[type=search]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+::-webkit-file-upload-button {
+  -webkit-appearance: button;
+  font: inherit;
+}
+
+details {
+  display: block;
+}
+
+summary {
+  display: list-item;
+}
+
+template {
+  display: none;
+}
+
+[hidden] {
+  display: none;
+}
+
+#layout {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+  overflow: hidden;
+  background: linear-gradient(310deg, var(--background-color-tertiary), var(--background-color-tertiary) 20%, var(--background-color) 20%);
+}
+
+#main-container {
+  width: 90%;
+  max-width: var(--max-width);
+  margin: 0 auto;
+  padding-bottom: var(--s1);
+  flex: 1 0 auto;
+  overflow: hidden;
+}
+
+#main-container main {
+  max-width: 65ch;
+}
+
+h1 {
+  font-size: clamp(var(--s3), 3vw, var(--s4));
+  margin: 0 0 var(--s0);
+}
+
+h2 {
+  font-size: clamp(var(--s2), 3vw, var(--s3));
+}
+
+h3 {
+  font-size: clamp(var(--s1), 3vw, var(--s2));
+  margin: 0 0 var(--s-1);
+  font-style: italic;
+}
+
+h4 {
+  margin: var(--s-2) 0;
+  font-size: clamp(var(--s-0), 3vw, var(--s1));
+  text-transform: uppercase;
+}
+
+p {
+  margin-bottom: var(--s1);
+}
+
+ul {
+  margin-top: var(--s0);
+  margin-bottom: var(--s0);
+}
+
+a {
+  color: var(--link-color);
+}
+
+* {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  font-family: "Bitter", "Bookman Old Style", serif;
+}
+
+header {
+  min-width: 100%;
+}
+
+#header--container {
+  width: 90%;
+  max-width: var(--max-width);
+  padding: var(--s1) 0;
+  margin: 0 auto;
+  display: flex;
+  flex-direction: column;
+  flex-wrap: wrap;
+  align-items: left;
+  color: var(--text-primary);
+}
+
+#header--title a {
+  font-size: clamp(var(--s3), 3vw, var(--s4));
+  font-weight: 200;
+  background: linear-gradient(to right, var(--primary), var(--primary) 63%, var(--secondary) 63%);
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: rgba(0, 0, 0, 0);
+  text-decoration: none;
+}
+
+@media screen and (min-width: 48rem) {
+  #header--container {
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+  }
+}
+footer {
+  width: 100%;
+  max-width: 100vw;
+  background: var(--background-color-secondary);
+  color: var(--text-secondary);
+}
+
+footer a {
+  color: var(--text-secondary);
+  text-decoration: none;
+}
+
+footer a:hover {
+  text-decoration: underline;
+}
+
+#footer--container {
+  width: 90%;
+  max-width: var(--max-width);
+  margin: 0 auto;
+  padding: var(--s2) 0;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  align-items: center;
+}
+
+nav ul {
+  padding: 0;
+  display: block;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  list-style-type: none;
+  gap: var(--s0) var(--s2);
+  font-size: var(--s0);
+}
+
+nav ul li::before {
+  content: "​";
+}
+
+nav ul li a {
+  color: var(--text-primary);
+  text-decoration: none;
+}
+
+nav ul li a:hover {
+  text-decoration: underline;
+}
+
+.nav--active {
+  text-decoration: underline;
+}
+
+@media screen and (min-width: 48rem) {
+  nav ul {
+    font-size: var(--s1);
+  }
+}
+#posts--list article {
+  margin-bottom: var(--s2);
+}
+
+.post--time {
+  font-size: clamp(var(--s-1), 3vw, var(--s0));
+  font-weight: 200;
+}
+
+.tags--container {
+  padding: var(--s-1) 0;
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--s0);
+}
+
+.tag a {
+  padding: var(--s-2) var(--s-1);
+  color: var(--text-secondary);
+  text-decoration: none;
+  background: var(--background-color-secondary);
+}
+
+.icon {
+  fill: var(--text-secondary);
+  width: var(--s2);
+  height: var(--s2);
+}
+
+/*# sourceMappingURL=main.css.map */
diff --git a/src/includes/styles/main.css.map b/src/includes/styles/main.css.map
new file mode 100644
index 0000000..12c4748
--- /dev/null
+++ b/src/includes/styles/main.css.map
@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../../assets/styles/scss/main.css"],"names":[],"mappings":";AAAC;EAAM;EAAoB;EAA4B;EAAsC;EAAqC;EAAmB;EAAqB;EAAwB;EAA0B;EAAyB;EAAsB;EAAqB;EAAwB;EAAa;EAAuC;EAAuC;EAAuC;EAAuC;EAAsC;EAAW;EAAqC;EAAqC;EAAqC;EAAqC;EAAqC;;;AAAoB;EAAqB;;;AAAsB;EAA2C;;;AAAS;EAA4B;;;AAAgB;EAAK;;;AAAuB;EAAK;EAAiB;EAA6B;;;AAAgB;EAAe;;;AAA8B;EAAY;EAAe;;;AAAc;EAA6B;;;AAAa;EAAuC;IAAqB;IAAoC;IAAuC;IAAqC;;EAAiC;AAA4E;EAAK;EAAiB;;;AAA8B;EAAK;;;AAAS;EAAK;;;AAAc;EAAG;EAAc;;;AAAe;EAAG;EAAuB;EAAS;;;AAAiB;EAAI;EAAgC;;;AAAc;EAAE;;;AAA+B;EAAY;EAAmB;EAA0B;;;AAAiC;EAAS;;;AAAmB;EAAc;EAAgC;;;AAAc;EAAM;;;AAAc;EAAQ;EAAc;EAAc;EAAkB;;;AAAwB;EAAI;;;AAAe;EAAI;;;AAAW;EAAI;;;AAAkB;EAAsC;EAAoB;EAAe;EAAiB;;;AAAS;EAAa;;;AAAiB;EAAc;;;AAAoB;EAAgD;;;AAA0B;EAAwH;EAAkB;;;AAAU;EAA4G;;;AAA8B;EAAS;;;AAA2B;EAAO;EAAsB;EAAc;EAAc;EAAe;EAAU;;;AAAmB;EAAS;;;AAAwB;EAAS;;;AAAc;EAA6B;EAAsB;;;AAAU;EAAkF;;;AAAY;EAAc;EAA6B;;;AAAoB;EAAyC;;;AAAwB;EAA6B;EAA0B;;;AAAa;EAAQ;;;AAAc;EAAQ;;;AAAkB;EAAS;;;AAAa;EAAS;;;AAAa;EAAQ;EAAa;EAAsB;EAAiB;EAAgB;;;AAAwI;EAAgB;EAAU;EAA2B;EAAc;EAAyB;EAAc;;;AAAgB;EAAqB;;;AAAe;EAAG;EAAyC;;;AAAqB;EAAG;;;AAAyC;EAAG;EAAyC;EAAsB;;;AAAkB;EAAG;EAAoB;EAA0C;;;AAAyB;EAAE;;;AAAwB;EAAG;EAAqB;;;AAAwB;EAAE;;;AAAwB;EAAE;;;AAA+H;EAAkB;;;AAA+C;EAAO;;;AAAe;EAAmB;EAAU;EAA2B;EAAoB;EAAc;EAAa;EAAsB;EAAe;EAAiB;;;AAA0B;EAAiB;EAAyC;EAAgB;EAA+F;EAAqB;EAA6B;EAAsC;;;AAAqB;EAAqC;IAAmB;IAAmB;IAA8B;;;AAAoB;EAAO;EAAW;EAAgB;EAA6C;;;AAA4B;EAAS;EAA4B;;;AAAqB;EAAe;;;AAA0B;EAAmB;EAAU;EAA2B;EAAc;EAAoB;EAAa;EAAmB;EAAe;EAA8B;;;AAAmB;EAAO;EAAU;EAAc;EAAa;EAAmB;EAAe;EAAqB;EAAwB;;;AAAoB;EAAkB;;;AAAY;EAAY;EAA0B;;;AAAqB;EAAkB;;;AAA0B;EAAa;;;AAA0B;EAAqC;IAAO;;;AAAqB;EAAqB;;;AAAwB;EAAY;EAA0C;;;AAAgB;EAAiB;EAAqB;EAAa;EAAe;;;AAAc;EAAO;EAA8B;EAA4B;EAAqB;;;AAA6C;EAAM;EAA2B;EAAgB","file":"main.css"}
\ No newline at end of file