src/static/css/main.css

@@ -1,16 +1,9 @@
 @import url('https://rsms.me/inter/inter.css');
 
-:root {
-	--gray-100: #161616;
-	--gray-90: #262626;
-	--gray-90-hover: #333333;
-	--gray-70: #525252;
-	--gray-10: #f4f4f4;
-	--green: #8ac159;
-}
-
 html {
-	background: var(--gray-100);
+	color: #ffffff;
+	font-family: Inter var, sans-serif;
+	background: #161616; /* Gray 100 */
 }
 
 *, *::before, *::after {
@@ -18,13 +11,10 @@ html {
 }
 
 body {
-	font-family: Inter var, sans-serif;
-	color: var(--gray-10);
 	font-size: 1rem;
 	line-height: 1.375rem;
 	font-weight: 400;
 	margin: 24px;
-	font-feature-settings: 'ss01', 'ss03';
 }
 body > div {
 	margin: 24px;
@@ -41,11 +31,11 @@ h1,h2,h3,h4,h5,h6 {
 	margin: 0;
 }
 h1 {
+	/* color: #8bc34a; */
 	font-size: 3.375rem;
 	line-height: 4rem;
 	font-weight: 300;
 	margin: 24px;
-	font-feature-settings: 'ss01', 'ss02', 'ss03', 'cv11';
 }
 h1 strong {
 	font-weight: 600;
@@ -53,9 +43,8 @@ h1 strong {
 h1 img {
 	height: 4rem;
 	vertical-align: middle;
-	/*border: 5px solid white;*/
+	border: 5px solid white;
 	border-radius: 50%;
-	vertical-align: top;
 }
 h2 {
 	font-size: 2.625rem;
@@ -94,8 +83,8 @@ a {
 	padding: 12px 24px;
 	margin: 12px;
 
-	color: white;
+	color: #f4f4f4;
-	background: var(--gray-90);
+	background: #262626; /* Gray 90 */
 	text-decoration: none;
 
 	border: 2px solid transparent;
@@ -105,10 +94,10 @@ a {
 	transition-timing-function: cubic-bezier(0.2, 0, 0.38, 0.9);
 }
 a:hover {
-	background: var(--gray-90-hover);
+	background: #333333; /* Gray 90 Hover */
 }
 a:active {
-	background: var(--gray-70);
+	background: #525252; /* Gray 70 */
 }
 a:focus {
 	border: 2px solid white;
@@ -129,9 +118,8 @@ ul li {
 }
 
 sup {
-	vertical-align: baseline;
+	vertical-align: top;
-	font: inherit;
+	line-height: 1em;
-	font-feature-settings: 'ss01', 'ss03', 'sups';
 }
 
 footer {
@@ -142,7 +130,7 @@ footer {
 	font-size: .875rem;
 	line-height: 1.125rem;
 	font-weight: 400;
-	background: var(--gray-90);
+	background: #262626;
 }
 
 footer p {