Update styles and add embedded albums to music page

styles/index.css

@@ -1,62 +1,86 @@
-
+@import url(https://fonts.googleapis.com/css2?family=Heebo:wght@400;700;900&display=swap);
-@font-face {
-	font-family: 'IM Fell English';
-	src: url('../fonts/im_fell_english/imfellenglish-italic-webfont.woff2') format('woff2'),
-		 url('../fonts/im_fell_english/imfellenglish-italic-webfont.woff') format('woff');
-	font-weight: normal;
-	font-style: italic;
-
-}
-
-@font-face {
-	font-family: 'IM Fell English';
-	src: url('../fonts/im_fell_english/imfellenglish-regular-webfont.woff2') format('woff2'),
-		 url('../fonts/im_fell_english/imfellenglish-regular-webfont.woff') format('woff');
-	font-weight: normal;
-	font-style: normal;
-
-}
 
 html {
-	font-size: 26px;
+	font-size: 1.5em;
 }
 
 body {
-	background-color: white;
+    max-width: 1024px;
-	font-family: 'IM Fell English', sans-serif;
+    margin: 3em auto;
+    padding: 0 3em;
+    background-color: #c1c2c0;
+    color: #323834;
+    font-family: 'Heebo', sans-serif;
     font-weight: 400;
-	line-height: 1.45;
+    line-height: 1.65;
-	color: #333;
-
-	max-width: 64ch;
-	margin: 0 auto;
-	padding-left: 1em;
-	padding-right: 1em;
 }
 
+header {
+    display: flex;
+    align-items: baseline;
+    justify-content: space-between;
+}
+
+/* Text Elements */
+
 p {
-	margin-bottom: 1.25em;
+    margin-bottom: 1.15rem;
+}
+h1, h2, h3, h4, h5 {
+    /*margin: 2.75rem 0 1.05rem;*/
+    margin: 0 0 1.05rem;
+    font-weight: 800;
+    line-height: 1.15;
+}
+h1 {
+    margin-top: 0;
+    font-size: 2.488em;
+}
+h2 {
+    font-size: 2.074em;
+}
+h3 {
+    font-size: 1.728em;
+}
+h4 {
+    font-size: 1.44em;
+}
+h5 {
+    font-size: 1.2em;
+}
+small {
+    font-size: 0.833em;
 }
 
 a {
-	color: #333;
+    color: #843733;
+    cursor: pointer;
+    white-space: nowrap;
 }
 
-h1, h2, h3, h4, h5 {
+section {
-	font-size: 1.75em;
+    padding: 1em;
-	margin: 2.75rem 0 1rem;
+    background-color: #ebebea;
-	font-family: 'IM Fell English', sans-serif;
+    border: 1px solid #bdc3c7;
-	font-weight: 700;
+    box-shadow: 0 0 4px #bdc3c7;
-	line-height: 1.15;
+    margin-bottom: 1.3em;
+ 
+    -webkit-box-sizing: border-box;
+       -moz-box-sizing: border-box;
+            box-sizing: border-box;
 }
 
-h1 {
+.albums-list {
-	margin-top: 0;
+	display: flex;
-	/*font-size: 3.052em;*/
+	flex-flow: row wrap;
+	justify-content: space-around;
 }
 
-small {
+iframe {
-	font-size: 0.8em;
+	margin-top: 1em;
+	border: 0;
+	height: 350px;
+	width: 350px;
 }
 
 
@@ -64,13 +88,3 @@ header,
 footer {
 	text-align: center;
 }
-
-
-@media all and (max-width: 500px) {
-	html {
-		font-size: 20px;
-	}
-	body {
-		line-height: 1.7;
-	}
-}

websites/index.html

@@ -26,15 +26,15 @@
 </header>
 
 <main>
-	<article>
+	<h1>Websites</h1>
 	<section>
-			<h1>Simple websites. No fluff.</h1>
+		<h3>Simple websites. No fluff.</h3>
 		<p>Actively avoiding parallax-scrolling, bootstrap, WordPress, Squarespace, and any other main-stream, bloated, monster-of-a-website "framework" designed to accommodate every possible solution known to the wet blanket of clientele.</p>
 		<p>Designing around good writing, typography, and a few visual elements (colors and shapes) to give some polish.</p>
 		<p>Contact me at <a href="mailto:contact@nathanjchapman.com">contact@nathanjchapman.com</a> and let's get you a working website.</p>
 	</section>
 	<section>
-			<h1>My Work</h1>
+		<h3>My Work</h3>
 		<ul>
 			<li><a href="https://jhcillustration.com/">JHC Illustration</a></li>
 			<li><a href="https://jjayberthumemusic.com/">JJay Berthume Music</a></li>
@@ -43,11 +43,10 @@
 			<li><a href="http://ptdefense.com/">PT Defense</a></li>
 		</ul>
 	</section>
-	</article>
 </main>
 
 <footer>
-	<p><small><em>Copyright ©2020 Nathan Chapman. All rights reserved.</em></small></p>
+	<p><small>Copyright ©2020 Nathan Chapman. All rights reserved.</small></p>
 </footer>
 </body>
 </html>