generalize coloring, use normal html to get radius working

static/lugo.css

@@ -1,4 +1,4 @@
-
+/* Shortcode css*/
 /* For NEXTPREV.HTML */
 #nextprev {
 	/* The container for both the previous and next articles. */
@@ -44,3 +44,20 @@
 	float: right;
 }
 
+figure {
+	display: flex;
+	flex-direction: column;
+	flex-wrap: wrap;
+	align-content: center;
+	align-items: center;
+}
+
+figcaption {
+	color: var(--bg-text);
+}
+
+img {
+	max-width: 100%;
+	max-height: 50vh;
+	border-radius: var(--radius);
+}

static/style.css

@@ -1,5 +1,17 @@
+:root {
+    --bg: #222222;
+    --bg-text: #606060;
+    --text: #ffffff;
+    --header: #454545;
+    --header-text: #707070;
+    --content-bg: #303030;
+    --accent: #344a70;
+    --link: #3e765d;
+    --radius: 0.75rem;
+}
+
 .copy:hover {
-    color: #344a70;
+    color: var(--accent);
 }
 
 ::-webkit-scrollbar {
@@ -7,15 +19,15 @@
 }
 
 body {
-    background-color: #222222;
+    background-color: var(--bg);
-    color: #ffffff;
+    color: var(--text);
     font-family: Arial, Helvetica, sans-serif;
     margin: 0;
     font-size: x-large;
 }
 
 header {
-    background-color: #344a70;
+    background-color: var(--accent);
     margin-top: 0;
     margin-left: 0;
     text-align: center;
@@ -24,12 +36,14 @@ header {
 }
 
 .article-header {
-    background-color: #454545;
+    background-color: var(--header);
-    color: #707070;
+    color: var(--header-text);
+}
+
+section {
+    border-radius: var(--radius);
     margin: 2rem;
-    margin-bottom: 0;
+    overflow: hidden;
-    border-top-right-radius: 0.5rem;
-    border-top-left-radius: 0.5rem;
 }
 
 .spaced {
@@ -38,49 +52,48 @@ header {
 }
 
 article {
-    background-color: #303030;
+    background-color: var(--content-bg);
     padding: 1.5rem;
-    margin-left: 2rem;
-    margin-right: 2rem;
     text-align: left;
-    border-bottom-left-radius: 0.5rem;
-    border-bottom-right-radius: 0.5em;
 }
 
 hr {
     margin: 2rem;
     height: 1px;
     border: 0;
-    border-top: 1px solid #454545;
+    border-top: 1px solid var(--header);
     height: 1px;
 }
 
 footer {
-    color: #606060;
+    color: var(--bg-text);
     text-align: center;
 }
 
 p {
-    margin-left: 1rem;
+    margin: 1rem;
-    margin-right: 1rem;
-    margin-top: 0;
 }
 
 h1,h2,h3,h4,h5,h6 {
-    margin: 0;
+    margin: 1rem;
     text-align: center;
 }
 
+header h1 {
+    margin: 0;
+    font-size: 3rem;
+}
+
 article h1 {
     margin-bottom: 1rem;
 }
 
 a {
-    color: #3e765d;
+    color: var(--link);
 }
 
 a:hover {
-    color: #344a70;
+    color: var(--accent);
     text-decoration-line: none;
 }
 
@@ -97,10 +110,9 @@ header a:hover {
 
 main {
     max-width: 80%;
-    margin: auto;
 }
 
-@media screen and (max-width: 900px) {
+@media screen and (max-width: 1500px) {
 main {
     max-width: 100%;
     margin: auto;