Removed logo border

src/static/css/main.css

@@ -1,9 +1,16 @@
 @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 {
-	color: #ffffff;
-	font-family: Inter var, sans-serif;
-	background: #161616; /* Gray 100 */
+	background: var(--gray-100);
 }
 
 *, *::before, *::after {
@@ -11,10 +18,13 @@ 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;
@@ -31,11 +41,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;
@@ -43,8 +53,9 @@ 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;
@@ -83,8 +94,8 @@ a {
 	padding: 12px 24px;
 	margin: 12px;
 
-	color: #f4f4f4;
-	background: #262626; /* Gray 90 */
+	color: white;
+	background: var(--gray-90);
 	text-decoration: none;
 
 	border: 2px solid transparent;
@@ -94,10 +105,10 @@ a {
 	transition-timing-function: cubic-bezier(0.2, 0, 0.38, 0.9);
 }
 a:hover {
-	background: #333333; /* Gray 90 Hover */
+	background: var(--gray-90-hover);
 }
 a:active {
-	background: #525252; /* Gray 70 */
+	background: var(--gray-70);
 }
 a:focus {
 	border: 2px solid white;
@@ -118,8 +129,9 @@ ul li {
 }
 
 sup {
-	vertical-align: top;
-	line-height: 1em;
+	vertical-align: baseline;
+	font: inherit;
+	font-feature-settings: 'ss01', 'ss03', 'sups';
 }
 
 footer {
@@ -130,7 +142,7 @@ footer {
 	font-size: .875rem;
 	line-height: 1.125rem;
 	font-weight: 400;
-	background: #262626;
+	background: var(--gray-90);
 }
 
 footer p {