refactor: Format site files for 11ty

- Convert HTML pages into NJK templates
- Add front matter to NJK templates
- Modularize monolithic stylesheet

_site/styles/base.css

@@ -0,0 +1,87 @@
+* Global Styles */
+html {
+  font-size: 17px; /* Base font size for scaling */
+  scroll-behavior: smooth; 
+}
+
+body {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  font-family: 'Calibri', sans-serif;
+  font-size: 1rem; /* Default font size based on 16px */
+  line-height: 1.5;
+  margin: 0;
+  padding: 0;
+  background-color: #bdd4da; /* Sky Bloom */
+}
+
+body h1 {
+  text-shadow: 0.5px 0.5px .5px #f7f7f7, /* Bottom-right top shadow */
+  -0.5px -0.5px .5px #f7f7f7, /* Top-left top shadow */
+  -0.5px 0.5px .5px #f7f7f7, /* Bottom-left top shadow */
+  0.5px -0.5px .5px #f7f7f7; /* Top-right top shadow */
+}
+
+
+
+/* Title Large (Arial Bold 30px) */
+h1 {
+  font-family: 'Arial', sans-serif;
+  font-weight: bold;
+  font-size: 1.875rem; /* 30px for title */
+}
+
+/* Title (Arial Bold 25px) */
+h2 {
+  font-family: 'Arial', sans-serif;
+  font-weight: bold;
+  font-size: 1.5625rem;
+}
+
+/* Subtitle (Comfortaa Normal 15px) */
+h3 {
+  font-family: 'Comfortaa', sans-serif;
+  font-size: .9375rem ; /* 15px for subtitle */
+}
+
+/* Body Large (Calibri Normal 20px) */
+p.body-large {
+  font-family: 'Calibri', sans-serif;
+  font-size: 1.25rem; /* 20px for body large */
+}
+
+/* Body Strong (Calibri Bold 16px) */
+strong {
+  font-family: 'Calibri', sans-serif;
+  font-weight: bold;
+  font-size: 1rem; /* 16px for body strong */
+}
+
+/* Body (Calibri Normal 16px) */
+p.body {
+  font-family: 'Calibri', sans-serif;
+  font-size: 1rem; /* 16px for regular body text */
+}
+
+/* Captions (Arial Bold 11px) */
+figcaption {
+  font-family: 'Arial', sans-serif;
+  font-weight: bold;
+  font-size: .6875rem; /* 11px for captions */
+}
+
+@media (max-width: 780px) {
+  html{
+    font-size: 14px;
+  }
+}
+
+
+main {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  justify-content: space-between;
+  padding: 20px;
+}