1 files changed, 43 insertions, 8 deletions
diff --git a/style/style.css b/style/style.css
index 76e3ed2..942ecb1 100644
--- a/style/style.css
+++ b/style/style.css
@@ -51,6 +51,11 @@ nav a:hover {
 	border-radius: 20px;
 }
 
+.footnotes {
+	font-weight: normal;
+
+}
+
 
 footer {
 	padding-top: 20px;
@@ -247,15 +252,12 @@ ol li::before {
 }
 
 #recipe {
-	display: flex;
 	text-align: center;
 	justify-content: space-around;
 	padding-bottom: 20px;
 }
 
 #recipe-search {
-	display: flex;
-	justify-content: space-between;
 	padding: 20px;
 }
 
@@ -269,15 +271,17 @@ ol li::before {
 }
 
 .boxes {
+	display: inline-block;
 	padding: 4px;
 	text-align: center;
-	width: 33%;
+	width: 85%;
 	background-color: #F1F1F1;
 	color: #758B7A;
 	border-radius: 20px;
 	transition-duration: 0.5s;
-	font-size: 24px;
+	font-size: 18px;
 	font-weight: bold;
+	margin: 10px;
 }
 
 .boxes:hover {
@@ -287,11 +291,11 @@ ol li::before {
 #searchInput {
 	border-radius: 20px;
 	border: none;
-	height: 40px;
-	width: 200px;
+	height: 25px;
+	width: 150px;
 	font-weight: bold;
 	color: #758B7A;
-	font-size: 1.25rem;
+	font-size: 1rem;
 }
 
 ::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
@@ -337,6 +341,11 @@ ol li::before {
 		height: 15px;
 		width: 15px;
 	}
+
+	#recipe-search {
+		display: flex;
+		justify-content: space-between;
+	}
 }
 
 @media only screen and (min-width: 500px) {
@@ -388,6 +397,12 @@ ol li::before {
 		font-size: 18px;
 	}
 
+	#searchInput {
+		height: 30px;
+		width: 175px;
+		font-size: 1.1rem;
+	}
+
 }
 
 @media only screen and (min-width: 800px) {
@@ -426,6 +441,16 @@ ol li::before {
 		padding: 20px;
 	}
 
+	.boxes {
+		width: 30%;
+		font-size: 20px;
+	}
+
+	#searchInput {
+		height: 40px;
+		width: 200px;
+		font-size: 1.25rem;
+	}
 }
 
 
@@ -515,6 +540,16 @@ ol li::before {
 		height: 48%;
 		padding-bottom: 10px;
 	}
+
+	.boxes {
+		font-size: 24px;
+	}
+
+	#searchInput {
+		height: 40px;
+		width: 250px;
+		font-size: 1.25rem;
+	}
 }
 
 @media only screen and (min-width: 1500px) {