flesh out main stylesheet and add dummy images

assets/styles/main.css

@@ -26,9 +26,9 @@
 body {
 	color: var(--color-text);
 	background-color: var(--color-bg);
-	font-family: Courier, monospace;
+	font-family: Verdana, sans-serif;
 	width: 65%;
-	margin: 0 auto;
+	margin: 0 auto 4rem;
 }
 
 @media (max-width: 650px) {
@@ -43,6 +43,67 @@ h3,
 h4,
 h5,
 h6 {
-	font-family: Verdana, sans-serif;
 	line-height: 2.5;
+	color: var(--color-pink);
+	font-family: Courier, monospace;
+}
+
+h1 {
+	text-align: center;
+	margin-top: 4rem;
+	font-size: 2.5rem;
+}
+
+h2 {
+	margin-top: 2rem;
+	font-size: 2rem;
+}
+
+h3 {
+	margin-top: 1rem;
+	font-size: 1.6rem;
+}
+
+@media (max-width: 650px) {
+	h1 {
+		font-size: 2rem;
+	}
+
+	h2 {
+		font-size: 1.6rem;
+	}
+
+	h3 {
+		font-size: 1.3rem;
+	}
+}
+
+img {
+	width: 100%;
+}
+
+p {
+	line-height: 1.3;
+}
+
+@media (max-width: 650px) {
+	p {
+		font-size: .8rem;
+	}
+}
+
+a {
+	color: var(--color-purple);
+}
+
+.float-left {
+	float: left;
+	width: 45%;
+	padding: .65rem 1rem .65rem 0;
+}
+
+.float-right {
+	float: right;
+	width: 45%;
+	padding: .65rem 0 .65rem 1rem;
 }

index.html

@@ -27,6 +27,7 @@
 		</header>
 		<main id="main">
 			<h1>header level 1</h1>
+			<img class="float-left" src="/assets/img/filler0.jpg">
 			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
 				Fusce libero neque, sollicitudin id scelerisque in, congue ut leo.
 				Morbi vehicula sem quis mauris lobortis tempor quis ac eros.
@@ -39,6 +40,7 @@
 			</p>
 
 			<h2>header level 2</h2>
+			<img class="float-right" src="/assets/img/filler1.jpg">
 			<p>Vestibulum dignissim tortor et tellus rutrum, quis dignissim orci rhoncus.
 				Vestibulum eget justo in ante feugiat varius.
 				Donec efficitur nulla non mollis facilisis.