style figcaptions

styles.css

@@ -1,10 +1,15 @@
 @font-face {
-	font-family: GoMono;
-	src: url(fonts/GoMonoNerdFont-Regular.ttf);
-	font-weight: 400;
+	font-family: Jura;
+	src: url(fonts/Jura-VariableFont_wght.ttf) format(tr);
 	font-style: normal;
 }
 
+@font-face {
+	font-family: League;
+	src: url(fonts/LeagueGothic-Regular-VariableFont_wdth.ttf);
+	font-style: bold;
+}
+
 :root {
 	--text: #e0def4;
 	--love: #eb6f92;
@@ -18,56 +23,106 @@
 	--surface: #1f1d2e;
 	--overlay: #26233a;
 
+	--hl-low: #21202e;
 	--hl-med: #403d52;
 	--hl-high: #524f67;
 }
 
 body {
-	background-color: var(--base);
+	background-image: linear-gradient(to bottom right, var(--overlay), var(--base));
 }
 
 h1,
 h2,
 h3,
 h4 {
-	font-family: Verdana, Geneva, Tahoma, sans-serif;
+	font-family: League, Verdana, Geneva, Tahoma, sans-serif;
+	color: var(--gold);
+	text-shadow: 0.8rem 0.8rem var(--base);
+}
+
+h1 {
+	font-size: 8rem;
+}
+
+h2 {
+	font-size: 6rem;
+}
+
+h3 {
+	font-size: 4rem;
 	color: var(--love);
 }
 
 main {
-	font-family: GoMono, serif;
+	font-family: Jura, serif;
 	font-size: 2rem;
 	width: 60%;
 	margin: auto;
 	color: var(--text);
 }
 
-p {
+p,
+ul {
+
 	background-color: var(--surface);
 	border-radius: 10rem;
-	padding: 2rem;
+	padding: 5rem;
+	box-shadow: 1rem 1rem var(--base);
+}
+
+figcaption {
+	margin-bottom: 0;
+	font-size: 2em;
+	font-weight: 1000;
+	color: var(--iris);
+	text-shadow: 0.08em 0.08em var(--base);
 }
 
 b {
-	color: var(--gold);
+	/* color: var(--foam); */
+	font-weight: 1000;
+	font-size: 1.1em
 }
 
 
 a {
-	text-decoration: none;
+	text-decoration-line: underline;
+	text-decoration-style: dotted;
+	text-decoration-color: var(--pine);
 	color: var(--foam);
+	font-weight: bold;
 }
 
 a:visited {
+	text-decoration: none;
 	color: var(--pine);
 }
 
 a:hover {
-	background-color: pink;
+	background-color: var(--hl-med);
 }
 
+ul {
+	list-style-position: inside;
+
+}
+
+
 li {
-	list-style-type: ' ';
+	list-style-type: '✓ ';
 	margin-bottom: 2rem;
-
+	padding: 1rem;
+}
+
+li::marker {
+	color: var(--pine);
+}
+
+.link-list>li {
+	list-style-type: '> ';
+}
+
+.link-list>li:hover::marker {
+	color: var(--foam);
 }