diff --git a/css/styles.css b/css/styles.css
index 1f0f6c9..ca6a36f 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -4,13 +4,18 @@ body {
   color: white;
   font-family: 'Amatic SC', cursive;
   background-color: rgb(95,207,128);
+  min-height: 100vh;
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
 }
 #quote-box {
-  position: absolute;
+  /* position: absolute;
   top: 14%;
   left: 10%;
-  right: 10%;
+  right: 10%; */
   width: 80%;
+  margin: 0 auto;
   line-height: .5;
 }
 .quote {
@@ -62,12 +67,15 @@ body {
 
 #loadQuote {
   font-size: 2.5rem;;
-  position: fixed;
+  /* position: fixed; */
   width: 7em;
-  display: inline-block;
-  left: 50%;
-  margin-left: -6em;
-  bottom: 150px;
+  /* display: inline-block; */
+  /* left: 50%; */
+  /* margin-left: -6em; */
+  /* bottom: 150px; */
+  display: grid;
+  place-content: center;
+  margin: 0 auto;
   border-radius: 4px;
   border: 2px solid #fff;
   color: #fff;
diff --git a/index.html b/index.html
index 034b6be..836a831 100644
--- a/index.html
+++ b/index.html
@@ -1,19 +1,26 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <title>Random Quotes</title>
-  <link href="https://fonts.googleapis.com/css?family=Amatic+SC" rel="stylesheet" type="text/css">
-  <link rel="stylesheet" href="css/normalize.css">
-  <link rel="stylesheet" href="css/styles.css">
-</head>
-<body>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Random Quotes</title>
+    <link
+      href="https://fonts.googleapis.com/css?family=Amatic+SC"
+      rel="stylesheet"
+      type="text/css"
+    />
+    <link rel="stylesheet" href="css/normalize.css" />
+    <link rel="stylesheet" href="css/styles.css" />
+  </head>
+  <body>
     <div id="quote-box">
       <p class="quote">You can do anything but not everything</p>
-      <p class="source">David Allen<span class="citation">Making It All Work</span><span class="year">2009</span></p>
+      <p class="source">
+        David Allen<span class="citation">Making It All Work</span
+        ><span class="year">2009</span>
+      </p>
     </div>
     <button id="loadQuote">Show another quote</button>
-  </div>
-  <script src="js/script.js"></script>
-</body>
-</html>
\ No newline at end of file
+
+    <script src="js/script.js"></script>
+  </body>
+</html>
diff --git a/js/script.js b/js/script.js
index 7e270c0..628198c 100644
--- a/js/script.js
+++ b/js/script.js
@@ -171,13 +171,23 @@ function getRandomQuote () {
 }	
 
 //Function to select random rgb color value
-function getRandomColor () {
-	var red = Math.floor(Math.random() * 256 );
-	var green = Math.floor(Math.random() * 256 );
-	var blue = Math.floor(Math.random() * 256 );
-	 var randomColor = 'rgb(' + red + ',' + green + ',' + blue + ')';
-	return randomColor;
-}
+// function getRandomColor () {
+// 	var red = Math.floor(Math.random() * 256 );
+// 	var green = Math.floor(Math.random() * 256 );
+// 	var blue = Math.floor(Math.random() * 256 );
+// 	 var randomColor = 'rgb(' + red + ',' + green + ',' + blue + ')';
+// 	return randomColor;
+// }
+const getRandomNumber = (limit) => {
+  return Math.floor(Math.random() * limit);
+};
+
+function setBackgroundColor () {
+  const h = getRandomNumber(360);
+  const randomColor = `hsl(${h}deg, 50%, 10%)`;
+  
+  document.body.style.backgroundColor = randomColor;
+};
 
 //Function to call the getRandomQuote function and stores the returned quote object in a variable
 //Constructs a string containing the different properties of the quote object 
@@ -191,7 +201,7 @@ function printQuote () {
 					quoteContainer.innerHTML = quoteString;
 
 					//assigns random color value to document background color 
-					document.body.style.backgroundColor = getRandomColor ();
+					document.body.style.backgroundColor = setBackgroundColor();
 }
 
 //Quote automatically refreshes every 15 seconds
