4 files changed, 163 insertions, 0 deletions
diff --git a/src/css/base.css b/src/css/base.css
new file mode 100644
index 0000000..f457ea9
--- /dev/null
+++ b/src/css/base.css
@@ -0,0 +1,108 @@
+* {
+    box-sizing: border-box;
+}
+
+body {
+	color: #999;
+	background-color: #000;
+
+	width: 90%;
+	max-width: 1000px;
+	margin: 20px auto;
+	font-size: 16px;
+}
+
+header {
+	margin: auto;
+}
+
+header h1 {
+	display: inline;
+	margin: 1px;
+}
+
+header h2 {
+	margin: 1px;
+}
+
+main {
+	display: flex;
+	flex-direction: column;
+	line-height: 1.6;
+}
+
+main > div {
+	margin: 5px;
+}
+
+footer {
+    font-size: 0.8rem;
+    text-align: center;
+    opacity: 0.7;
+}
+
+a, a:visited {
+	color: #0077aa;
+}
+
+a:hover {
+	color: #00aaee;
+}
+
+pre {
+	max-width: 100%;
+	overflow: auto;
+	background: #050505; 
+	padding: 10px;
+	border: 1px dashed #999;
+}
+
+nav {
+	display: block;
+	margin: 5px;
+}
+
+.header-container {
+	display: flex;
+	flex-direction: column;
+}
+
+.esquizo {
+	width: 100px;
+	display: inline;
+}
+
+.content {
+	padding: 5px;
+	flex-grow: 1;
+	overflow: auto;
+	border: dashed 1px #999;
+	background: #050505;
+}
+
+.bottom-align { 
+	display: flex; 
+	flex-direction: column; 
+	justify-content: flex-end; 
+}
+
+.image-container {
+	text-align: center;
+}
+
+.image-container > img {
+	display: inline;
+	max-width: 100%;
+}
+
+@media (min-width: 1000px) {
+    .header-container {
+		justify-content: center;
+        flex-direction: row;
+    }
+
+	main {
+		flex-direction: row;
+	}
+}
+
diff --git a/src/css/navbar.css b/src/css/navbar.css
new file mode 100644
index 0000000..2b70356
--- /dev/null
+++ b/src/css/navbar.css
@@ -0,0 +1,32 @@
+.navbar ul {
+	list-style-type: none;
+	margin: 0px;
+	padding: 0px;
+	display: flex;
+	flex-wrap: wrap;
+	gap: 10px;
+}
+
+.navbar li a {
+	display: block;
+	color: #999;
+	text-decoration: none;
+	border: dashed 1px;
+	text-align: center;
+	padding: 5px 10px;
+}
+
+.navbar li a:hover {
+	display: block;
+	color: #000;
+	background-color: #999;
+}
+
+@media (min-width: 1000px) {
+	.navbar ul {
+		display: flex;
+		flex-direction: column;
+		gap: 0px;
+		width: 125px;
+	}
+}
diff --git a/src/css/scanlines.css b/src/css/scanlines.css
new file mode 100644
index 0000000..e48074b
--- /dev/null
+++ b/src/css/scanlines.css
@@ -0,0 +1,20 @@
+
+.scanlines::before {
+	content: " ";
+	display: block;
+	position: fixed;
+	top: 0;
+	left: 0;
+	bottom: 0;
+	right: 0;
+	background: repeating-linear-gradient(
+		rgba(18, 16, 16, 0) 0px,
+		rgba(18, 16, 16, 0) 1px,
+		rgba(0, 0, 0, 0.25) 1px,
+		rgba(0, 0, 0, 0.25) 2px
+	);
+	background-size: 100% 100%;
+	z-index: 10;
+	pointer-events: none; /* Allows users to click elements underneath */
+}
+
diff --git a/src/css/style.css b/src/css/style.css
new file mode 100644
index 0000000..f083657
--- /dev/null
+++ b/src/css/style.css
@@ -0,0 +1,3 @@
+@import 'base.css';
+@import 'navbar.css';
+@import 'scanlines.css';