1 files changed, 96 insertions, 17 deletions

diff --git a/public/css/style.css b/public/css/style.css
index e650c7d..494dc57 100644
--- a/public/css/style.css
+++ b/public/css/style.css
@@ -1,8 +1,27 @@
+@font-face {
+	font-family: "headingsFont";
+	src: url(/fonts/alice-v20-latin-regular.woff);
+}
+
+@font-face {
+	font-family: "bannerFont";
+	src: url(/fonts/AgilScript.ttf);
+}
+
+@font-face {
+	font-family: "quoteFont";
+	src: url(/fonts/lacquer-v15-latin-regular.woff);
+}
+
+/* ------------------------------------------------ */
+
 body{
 	max-width: 900px;
 	margin: auto;
 	background-color: #E1D9D1;
 	font-size: 1.1rem;
+	text-align: center;
+	font-family: sans-serif;
 }
 nav {
 	margin-top: 10px;
@@ -22,7 +41,7 @@ footer{
 }
 
 /* Header */
-.main-image {
+.headerImage {
 	margin-top: 25px;
     position: relative;
     background: url(/img/bg.jpg) no-repeat center;
@@ -30,7 +49,7 @@ footer{
     height: 250px;
 }
 
-.img-container {
+.imgContainer {
     position: absolute;
     top: 50%;
     left: 50%;
@@ -41,12 +60,13 @@ footer{
     text-transform: uppercase;
 }
 
-.img-container h1 {
+.imgContainer h1 {
     margin: 0;
     font-size: 66px;
+	font-family: "bannerFont";
 }
 
-.img-container h1 span {
+.imgContainer h1 span {
     border: 6px solid white;
     padding: 6px 14px;
     display: inline-block;
@@ -54,33 +74,92 @@ footer{
 
 /* container styles*/
 
+.main h1,h2,h3,h4{
+	font-family: "headingsFont";
+}
+
 .container{
 	text-align: center;
 }
 
-.index-content{
-	height: 500px;
+.afterIntro{
+	height: auto;
 	display: flex;
-	border: 2px solid white;
 }
 
-/* Right */
-.right{
-	height: 500px;
+/* Left */
+.left{
+	height: auto;
 	width: 60%;
-	border-right: 2px solid white;
+	border-right: 2px solid grey;
+	maring: 30px;
 }
 
-.right h3{
-	text-algin: center;
+.left section{
+	display: flex;
+	height: auto
 }
 
-/* Left */
-.left{
-	height: 500px;
+.left .quote{
+	font-size: .95rem;
+	font-family: "quoteFont";
+}
+
+
+.left section .people, .writers{
+	width: 50%;
+}
+
+.left h4,ul > li{
+	padding-left: 10px;
+	text-align: left !important;
+}
+
+
+/* Right */
+.right{
+	height: auto;
 	width: 40%;
 }
 
-.left figure img{
+.right figure img{
 	width: 100%;
 }
+
+
+/* Media Queries*/
+
+@media screen and (max-width: 666px) {
+	.afterIntro{
+		display: inline;
+		border: none;
+	}
+
+	.left section{
+		display: inline;
+	}
+	
+	.left .quote{
+		display: none;
+	}
+
+	.left{
+		border-right: none;
+	}
+
+	.left, .right{
+		width: auto;
+		height: auto;
+		margin-bottom: 10px;
+	}
+
+	nav a {
+		padding: 5px;
+		font-size: 20px;
+		font-weight: bold;
+		text-decoration: none;
+		color: #71BC68;
+	}
+
+}
+