Font change & colors updated

components/iconlink.tsx

@@ -3,7 +3,7 @@ import {FontAwesomeIcon} from "@fortawesome/react-fontawesome"
 import styled from "styled-components"
 
 const ILink = styled.a`
-	font-size: 24px;		
+	font-size: 1.5rem;
 	margin: 0 .4rem;
 `
 

pages/index.tsx

@@ -27,7 +27,7 @@ export const Section = styled.section`
 	}
 
 	.topmargin {
-		margin-top: 2rem;
+		margin-top: 1rem;
 	}
 
 	ul li {
@@ -50,7 +50,9 @@ export const Section = styled.section`
 `
 
 export const Code = styled.code`
-	background-color: var(--bg-dark);
+	font-family: monospace;
+	font-size: .9rem;
+	background-color: var(--bg-emph);
 	color: var(--fg-code);
 	border-radius: .4rem;
 	padding: .1rem .4rem;

styles/globals.css

@@ -1,3 +1,5 @@
+@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap');
+
 :root {
 	font-size: 16px;
 	--border-type: solid;
@@ -5,14 +7,14 @@
 	--border-color: var(--fg-faded);
 	--border-radius: 1rem;
 
-	--content-max-width: 60rem;
+	--content-max-width: 850px;
 	--h-uni-padding: .8rem;
 	--v-uni-padding: .2rem;
 
-	--fg: #EFE8D7;
+	--fg: #E1DCCE;
 	color: var(--fg);
 	/* --fg-emph: #fbebe2; */
-	--fg-emph: var(--fg);
+	--fg-emph: #EFE8D7;
 	--fg-faded: #928373;
 	--fg-button: var(--fg-faded);
 	--fg-link: #8398AC;
@@ -21,12 +23,13 @@
 	--emph-shadow: 0 0 2px;
 
 	--bg: #181818;
+	--bg-emph: #242424;
 	--trans-time: 200ms;
 }
 
 * {
 	box-sizing: border-box;
-	font-family: "Open Sans";
+	font-family: "Open Sans", sans-serif;
 	padding: 0;
 	margin: 0;
 }
@@ -60,6 +63,7 @@ a:hover {
 }
 
 h1, h2, h3, h4, h5, em {
+	font-weight: normal;
 	color: var(--fg-emph);
 }