Make bottom columns wrap on narrow screen, reduce height of splash image, prefer solid Remix icons, add faint border on menu when vertical.

public_html/css/styles.css

@@ -141,7 +141,11 @@ nav a:hover {
 		float: none;
 		display: block;
 		text-align: left;
+		border: solid 2px #505050;
 	}
+}
+
+@media screen and (max-width: 700px) {
 
 }
 
@@ -152,7 +156,7 @@ header {
 
 header img {
 	margin: 0 auto;
-	height: 40vh;
+	height: 30vh;
 	width: auto;
 	display: block;
 	object-fit: cover;
@@ -168,8 +172,8 @@ section  {
 }
 
 section.podcast {
-	width: 80%;
-	margin: 0 auto;
+	width: 90%;
+	margin: 0 5%;
 	display: flex;
 	flex-wrap: wrap;
 }
@@ -194,8 +198,8 @@ a.podcast {
 }
 
 section.project {
-	width: 80%;
-	margin: 0 auto;
+	width: 90%;
+	margin: 0 5%;
 	display: flex;
 	flex-wrap: wrap;
 }
@@ -207,7 +211,7 @@ a.project {
 	border: solid 4px #7eb4be;
 	border-radius: 10px;
 	margin: 2.5%;
-	padding: 1em 1em 0em 1em;
+	padding: 1em 1em 0em 1em;	
 }
 
 .project p {
@@ -221,8 +225,23 @@ a.project {
 
 .column-container {
 	display: flex;
+	justify-content: space-between;	
 }
 
 section.episodes, section.comments {
-	flex: 0 0 50%;
+	paddng: 10px;	
+	flex-basis: 50%;
+}
+
+@media (min-width: 600px) {
+  section.episodes, section.comments {
+    flex-basis: 50%;
+  }
+}
+
+@media (max-width: 600px) {
+  .column-container {
+    flex-direction: column;
+    justify-content: stretch; 
+  }
 }