--- /dev/null
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>home | arthurtaft.EXT</title>
+ <meta charset="UTF-8">
+ <link rel="stylesheet" href="styles.css">
+ </head>
+ <body>
+ <div id="main-cont">
+ <div id="top-nav">
+ <ul>
+ <li><a href="/">home</a></li>
+ <li><a href="/blog">blog</a></li>
+ <li><a href="/resume">resume</a></li>
+ <li><a href="/contact">contact</a></li>
+ <li><a href="/about">about me</a></li>
+ </ul>
+ </div>
+ <div id="container">
+ <h1>Bazinga</h1>
+ </div>
+ </div>
+ </body>
+</html>
--- /dev/null
+:root {
+ /* COLORS */
+ --rosewater: #f5e0dc;
+ --flamingo: #f2cdcd;
+ --pink: #f5c2e7;
+ --mauve: #cba6f7;
+ --red: #f38ba8;
+ --maroon: #eba0ac;
+ --peach: #fab387;
+ --yellow: #f9e2af;
+ --green: #a6e3a1;
+ --teal: #94e2d5;
+ --sky: #89dceb;
+ --sapphire: #74c7ec;
+ --blue: #89b4fa;
+ --lavender: #b4befe;
+ --text: #cdd6f4;
+ --subtext-1: #bac2de;
+ --subtext-0: #a6adc8;
+ --overlay-2: #9399b2;
+ --overlay-1: #7f849c;
+ --overlay-0: #6c7086;
+ --surface-2: #585b70;
+ --surface-1: #45475a;
+ --surface-0: #313244;
+ --base: #1e1e2e;
+ --mantle: #181825;
+ --crust: #11111b;
+}
+
+/* Style Reset */
+html, main, body, ul, h1, h2, p {
+ padding: 0;
+ margin: 0;
+}
+
+html {
+ background-color: var(--base);
+ display: flex;
+ height: 100%;
+}
+
+body {
+ margin: 2%;
+ width: 100%;
+}
+
+#main-cont {
+ display: flex;
+ flex-direction: column;
+ align-items: start;
+}
+
+#top-nav {
+ margin-bottom: 1%;
+ align-self: center;
+ width: 30%;
+}
+
+#top-nav ul {
+ list-style-type: none;
+ display: flex;
+ flex-flow: row wrap;
+ justify-content: space-between;
+}
+
+h1 {
+ color: var(--green);
+}
+
+a {
+ font-size: 1.25rem;
+}
+
+a:link {
+ color: var(--blue);
+}
+
+a:visited {
+ color: var(--blue);
+}
+
+a:hover {
+ color: var(--peach);
+ text-decoration: none;
+}