diff --git a/css/style-v2.css b/css/style-v2.css
index f1f00f3..0b5df9a 100644
--- a/css/style-v2.css
+++ b/css/style-v2.css
@@ -1,14 +1,20 @@
 @import url("https://fonts.googleapis.com/css?family=Open+Sans");
+@import url("https://fonts.googleapis.com/css?family=Anonymous+Pro");
 body {
   padding: 0;
   font-family: 'Open Sans', sans-serif;
   font-size: 16px;
   color: #999;
   background: #E2E5EA url("../img/evie-shaffer-505135-unsplash.jpg") no-repeat bottom left;
-  background-size: cover; }
+  background-size: 200%; }
+  @media (min-width: 768px) {
+    body {
+      background-size: contain; } }
 
 a {
   color: #96C7DB; }
+  a:hover, a:focus, a:active {
+    color: #fff; }
 
 section.top,
 section.bottom {
@@ -20,15 +26,15 @@ section.bottom {
       display: grid;
       grid-template-columns: 30% 30% 30%;
       grid-template-areas: "left middle right";
-      grid-column-gap: 15px; } }
+      grid-column-gap: 45px; } }
 
 section.top {
   background-color: #343434;
   padding: 30px; }
 
 section.bottom {
-  grid-template-columns: 60% 30%;
-  grid-template-areas: "output ."; }
+  grid-template-columns: 100%;
+  grid-template-areas: "output"; }
 
 .from-ps {
   grid-area: left;
@@ -45,19 +51,36 @@ section.bottom {
   order: 1;
   margin-bottom: 30px;
   font-size: 14px;
-  color: #CBDDE4; }
-  #about a {
-    color: #96C7DB; }
+  color: #CBDDE4;
+  border-top: 1px solid #343434;
+  border-bottom: 1px solid #666;
+  border-left: 0;
+  padding: 15px; }
+  @media (min-width: 768px) {
+    #about {
+      border-top: 0;
+      border-bottom: 0;
+      border-left: 1px solid #666;
+      padding-left: 45px; } }
   #about .social-links a {
     text-decoration: none; }
     #about .social-links a .svg {
       display: inline-block;
       max-width: 24px;
       margin: 0 5px 0 0; }
+  #about h4 {
+    text-transform: uppercase; }
 
 .generated-css {
   grid-area: output;
-  padding: 30px; }
+  padding: 30px;
+  background-color: #343434;
+  margin: 45px 30px; }
+  .generated-css .output {
+    font-family: 'Anonymous Pro', monospace;
+    font-size: 15px;
+    line-height: 1.4em;
+    color: #e1e1e1; }
 
 header {
   background-color: #343434;
@@ -66,6 +89,7 @@ header {
   header h1 {
     font-size: 20px;
     color: #96C7DB;
+    font-weight: normal;
     text-transform: uppercase;
     margin: 0; }
     @media (min-width: 768px) {
@@ -74,13 +98,62 @@ header {
   header h2 {
     color: #CBDDE4;
     font-size: 18px;
-    margin: 0; }
+    margin: 0;
+    font-weight: normal; }
     @media (min-width: 768px) {
       header h2 {
         font-size: 24px; } }
 
 footer {
   margin: 0;
-  padding: 30px; }
+  padding: 30px;
+  background: rgba(52, 52, 52, 0.85);
+  font-size: 12px;
+  color: #e1e1e1; }
+
+h3 {
+  color: #96C7DB;
+  margin: 0 0 30px 0;
+  font-weight: normal; }
+
+/* Form Styling */
+form {
+  padding: 15px; }
+  form div {
+    display: flex;
+    justify-content: flex-start;
+    margin: 7.5px 0; }
+    form div label {
+      width: 50%; }
+    form div span {
+      color: #666; }
+      form div span.radio {
+        width: 70px; }
+    form div.buttons {
+      margin-top: 30px; }
+  form input[type=text] {
+    width: 50px;
+    margin-right: 10px;
+    border: 0;
+    padding: 5px;
+    background-color: rgba(255, 255, 255, 0.1);
+    color: #e1e1e1; }
+  form input[type=submit],
+  form input[type=reset],
+  form input[type=button] {
+    border: 1px solid #96C7DB;
+    background-color: #343434;
+    color: #96C7DB;
+    padding: 10px;
+    font-size: 14px;
+    margin-right: 10px;
+    outline-style: none; }
+  form input[type=submit] {
+    background-color: #96C7DB;
+    color: #343434; }
+
+.output .generated,
+.updated {
+  display: none; }
 
 /*# sourceMappingURL=style-v2.css.map */
diff --git a/css/style-v2.css.map b/css/style-v2.css.map
index e3c5043..b065fe8 100644
--- a/css/style-v2.css.map
+++ b/css/style-v2.css.map
@@ -1,6 +1,6 @@
 {
 "version": 3,
-"mappings": "AAEQ,gEAAwD;AAGhE,IAAK;EACH,OAAO,EAAE,CAAC;EACV,WAAW,EAAE,uBAAuB;EACpC,SAAS,EAAE,IAAI;EACf,KAAK,ECPA,IAAI;EDQT,UAAU,EAAE,4EAAkF;EAC9F,eAAe,EAAE,KAAK;;AAGxB,CAAE;EACA,KAAK,ECVK,OAAO;;ADanB;cACe;EACb,OAAO,EAAE,IAAI;EACb,cAAc,EAAE,MAAM;EETtB,yBAAqC;IFMvC;kBACe;MAIX,OAAO,EAAE,IAAI;MACb,qBAAqB,EAAE,WAAW;MAClC,mBAAmB,EAAE,mBAAmB;MACxC,eAAe,EAAE,IAAI;;AAIzB,WAAY;EACV,gBAAgB,EC/BN,OAAO;EDgCjB,OAAO,EAAE,IAAI;;AAGf,cAAe;EACb,qBAAqB,EAAE,OAAO;EAC9B,mBAAmB,EAAE,UAAU;;AAGjC,QAAS;EACP,SAAS,EAAE,IAAI;EACf,KAAK,EAAE,CAAC;EACR,aAAa,EAAE,IAAI;;AAGrB,gBAAiB;EACf,SAAS,EAAE,MAAM;EACjB,KAAK,EAAE,CAAC;EACR,aAAa,EAAE,IAAI;;AAGrB,MAAO;EACL,SAAS,EAAE,KAAK;EAChB,KAAK,EAAE,CAAC;EACR,aAAa,EAAE,IAAI;EACnB,SAAS,EAAE,IAAI;EACf,KAAK,ECnDM,OAAO;EDoDlB,QAAE;IACA,KAAK,ECtDG,OAAO;EDyDf,sBAAE;IACA,eAAe,EAAE,IAAI;IACrB,2BAAK;MACH,OAAO,EAAC,YAAY;MACpB,SAAS,EAAE,IAAI;MACf,MAAM,EAAE,SAAS;;AAMzB,cAAe;EACb,SAAS,EAAE,MAAM;EACjB,OAAO,EAAE,IAAI;;AAGf,MAAO;EACL,gBAAgB,EC/EN,OAAO;EDgFjB,MAAM,EAAE,CAAC;EACT,OAAO,EAAE,IAAI;EACb,SAAG;IACD,SAAS,EAAE,IAAI;IACf,KAAK,EC/EG,OAAO;IDgFf,cAAc,EAAE,SAAS;IACzB,MAAM,EAAE,CAAC;IE1EX,yBAAqC;MFsErC,SAAG;QAMC,SAAS,EAAE,IAAI;EAGnB,SAAG;IACD,KAAK,ECtFI,OAAO;IDuFhB,SAAS,EAAE,IAAI;IACf,MAAM,EAAE,CAAC;IElFX,yBAAqC;MF+ErC,SAAG;QAKC,SAAS,EAAE,IAAI;;AAIrB,MAAO;EACL,MAAM,EAAE,CAAC;EACT,OAAO,EAAE,IAAI",
+"mappings": "AAEQ,gEAAwD;AACxD,oEAA4D;AAGpE,IAAK;EACH,OAAO,EAAE,CAAC;EACV,WAAW,EAAE,uBAAuB;EACpC,SAAS,EAAE,IAAI;EACf,KAAK,ECRA,IAAI;EDST,UAAU,EAAE,4EAAkF;EAC9F,eAAe,EAAE,IAAI;EEArB,yBAAqC;IFNvC,IAAK;MAQD,eAAe,EAAE,OAAO;;AAI5B,CAAE;EACA,KAAK,ECdK,OAAO;EDejB,0BAES;IACP,KAAK,ECnBD,IAAI;;ADsBZ;cACe;EACb,OAAO,EAAE,IAAI;EACb,cAAc,EAAE,MAAM;EEjBtB,yBAAqC;IFcvC;kBACe;MAIX,OAAO,EAAE,IAAI;MACb,qBAAqB,EAAE,WAAW;MAClC,mBAAmB,EAAE,mBAAmB;MACxC,eAAe,EAAE,IAAI;;AAGzB,WAAY;EACV,gBAAgB,ECtCN,OAAO;EDuCjB,OAAO,EAAE,IAAI;;AAEf,cAAe;EACb,qBAAqB,EAAE,IAAI;EAC3B,mBAAmB,EAAE,QAAQ;;AAG/B,QAAS;EACP,SAAS,EAAE,IAAI;EACf,KAAK,EAAE,CAAC;EACR,aAAa,EAAE,IAAI;;AAGrB,gBAAiB;EACf,SAAS,EAAE,MAAM;EACjB,KAAK,EAAE,CAAC;EACR,aAAa,EAAE,IAAI;;AAGrB,MAAO;EACL,SAAS,EAAE,KAAK;EAChB,KAAK,EAAE,CAAC;EACR,aAAa,EAAE,IAAI;EACnB,SAAS,EAAE,IAAI;EACf,KAAK,ECzDM,OAAO;ED0DlB,UAAU,EAAE,iBAAoB;EAChC,aAAa,EAAE,cAAsB;EACrC,WAAW,EAAE,CAAC;EACd,OAAO,EAAE,IAAI;EEvDb,yBAAqC;IF8CvC,MAAO;MAWH,UAAU,EAAE,CAAC;MACb,aAAa,EAAE,CAAC;MAChB,WAAW,EAAE,cAAsB;MACnC,YAAY,EAAE,IAAI;EAGlB,sBAAE;IACA,eAAe,EAAE,IAAI;IACrB,2BAAK;MACH,OAAO,EAAC,YAAY;MACpB,SAAS,EAAE,IAAI;MACf,MAAM,EAAE,SAAS;EAIvB,SAAG;IACD,cAAc,EAAE,SAAS;;AAI7B,cAAe;EACb,SAAS,EAAE,MAAM;EACjB,OAAO,EAAE,IAAI;EACb,gBAAgB,EC5FN,OAAO;ED6FjB,MAAM,EAAE,SAAS;EACjB,sBAAQ;IACN,WAAW,EAAE,0BAA0B;IACvC,SAAS,EAAC,IAAI;IACd,WAAW,EAAE,KAAK;IAClB,KAAK,EC/FI,OAAO;;ADmGpB,MAAO;EACL,gBAAgB,ECvGN,OAAO;EDwGjB,MAAM,EAAE,CAAC;EACT,OAAO,EAAE,IAAI;EACb,SAAG;IACD,SAAS,EAAE,IAAI;IACf,KAAK,ECvGG,OAAO;IDwGf,WAAW,EAAE,MAAM;IACnB,cAAc,EAAE,SAAS;IACzB,MAAM,EAAE,CAAC;IEnGX,yBAAqC;MF8FrC,SAAG;QAOC,SAAS,EAAE,IAAI;EAGnB,SAAG;IACD,KAAK,EC/GI,OAAO;IDgHhB,SAAS,EAAE,IAAI;IACf,MAAM,EAAE,CAAC;IACT,WAAW,EAAE,MAAM;IE5GrB,yBAAqC;MFwGrC,SAAG;QAMC,SAAS,EAAE,IAAI;;AAIrB,MAAO;EACL,MAAM,EAAE,CAAC;EACT,OAAO,EAAE,IAAI;EACb,UAAU,EAAE,sBAAmB;EAC/B,SAAS,EAAE,IAAI;EACf,KAAK,EChIM,OAAO;;ADmIpB,EAAG;EACD,KAAK,EClIK,OAAO;EDmIjB,MAAM,EAAE,UAAU;EAClB,WAAW,EAAE,MAAM;;AAGrB,kBAAkB;AAElB,IAAK;EACH,OAAO,EAAE,IAAI;EACb,QAAI;IACH,OAAO,EAAE,IAAI;IACb,eAAe,EAAE,UAAU;IAC3B,MAAM,EAAE,OAAO;IACf,cAAM;MACJ,KAAK,EAAE,GAAG;IAEZ,aAAK;MACH,KAAK,ECvJI,IAAI;MDwJb,mBAAQ;QACN,KAAK,EAAE,IAAI;IAGf,gBAAU;MACR,UAAU,EAAE,IAAI;EAGnB,qBAAiB;IAChB,KAAK,EAAE,IAAI;IACX,YAAY,EAAE,IAAI;IAClB,MAAM,EAAE,CAAC;IACT,OAAO,EAAE,GAAG;IACZ,gBAAgB,EAAE,wBAAoB;IACtC,KAAK,ECpKK,OAAO;EDsKlB;;yBAEmB;IACjB,MAAM,EAAE,iBAAoB;IAC5B,gBAAgB,EC7KR,OAAO;ID8Kf,KAAK,ECzKG,OAAO;ID0Kf,OAAO,EAAE,IAAI;IACb,SAAS,EAAE,IAAI;IACf,YAAY,EAAE,IAAI;IAClB,aAAa,EAAE,IAAI;EAErB,uBAAmB;IACjB,gBAAgB,EChLR,OAAO;IDiLf,KAAK,ECtLG,OAAO;;AD0LnB;QACS;EACP,OAAO,EAAE,IAAI",
 "sources": ["../scss/style-v2.scss","../scss/variables.scss","../scss/mixins.scss"],
 "names": [],
 "file": "style-v2.css"
diff --git a/img/css3.svg b/img/css3.svg
deleted file mode 100644
index c8d7781..0000000
--- a/img/css3.svg
+++ /dev/null
@@ -1,5 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M480 32l-64 368-223.3 80L0 400l19.6-94.8h82l-8 40.6L210 390.2l134.1-44.4 18.8-97.1H29.5l16-82h333.7l10.5-52.7H56.3l16.3-82H480z"/></svg>
-<!--
-Font Awesome Pro 5.4.1 by @fontawesome - https://fontawesome.com
-License - https://fontawesome.com/license (Commercial License)
--->
\ No newline at end of file
diff --git a/index.html b/index.html
index 9364b3d..4d38ef2 100644
--- a/index.html
+++ b/index.html
@@ -11,12 +11,8 @@
 	<meta name="description" content="Convert your Photoshop drop shadows into CSS3 box and text shadows.">
 	<meta name="keywords" content="Adobe, Photoshop, Cascading Style Sheets, CSS, CSS3, HTML, HTML5, drop shadow, box shadow, text shadow, web standards, photo shop">
 	<script src="js/jquery-1.7.1.min.js"></script>
-	<script src="js/convert-psd-to-css3.js"></script>
 	<script src="js/replace-svg.js"></script>
 
-	<script type="text/javascript">var switchTo5x=true;</script>
-	<script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script>
-	<script type="text/javascript">stLight.options({publisher: "3e460cd8-2ba2-42c2-a074-631c62e986cc"}); </script>
 	<script>
 	jQuery(document).ready(function($) {	
 		//detect for IE10
@@ -107,7 +103,7 @@
 
 			$('.maths-txt').fadeIn(300, function() {
 	        	$('.maths-txt').fadeOut(1000);
-	      	});	 
+	      	});
 		  	return false;
 		});
 
@@ -160,6 +156,7 @@
 	});
 	</script>
 	<link rel="stylesheet" href="css/normalize.css">
+	<link rel="stylesheet" href="css/prettify.css">
 	<link rel="stylesheet" href="css/style-v2.css">
 </head>
 
@@ -170,88 +167,81 @@ <h2>Convert Photoshop Drop Shadows to CSS3 Box &amp; Text Shadows</h2>
 	</header>
 	<section class="top">
 		<form class="from-ps" method="post">
-			<fieldset>
-				<legend>Photoshop Drop Shadow Structure</legend>
-				<div>
-					<label>Color</label>
-					<input type="text" name="red" value="0"> <span>R</span>
-				</div>
-				<div>
-					<label>&nbsp;</label>
-					<input type="text" name="green" value="0"> <span>G</span>
-				</div>
-				<div>
-					<label>&nbsp;</label>
-					<input type="text" name="blue" value="0"> <span>B</span>
-				</div>
-				<div>
-					<label>Opacity</label>
-					<input type="text" name="opacity" value="75"> <span>%</span>
-				</div>
-				<div>
-					<label>Angle</label>
-					<input type="text" name="angle" value="120"> <span>&deg;</span>
-				</div>
-				<div>
-					<label>Distance</label>
-					<input type="text" name="distance" value="5"> <span>px</span>
-				</div>
-				<div>
-					<label>Spread</label>
-					<input type="text" name="spread" value="0"> <span>%</span>
-				</div>
-				<div>
-					<label>Size</label>
-					<input type="text" name="size" value="5"> <span>px</span>
-				</div>
-				<div class="hubbinz">
-					<span class="maths-txt">Do all the Maths!</span>
-				</div>
-				<div class="buttons">
-					<input type="button" class="clear" value="Clear">
-					<input type="reset" value="PS Default">
-					<input type="submit" value="Convert to CSS3" class="maths">
-				</div>
-			</fieldset>
+			<h3>Photoshop Drop Shadow Structure</h3>
+			<div>
+				<label>Color</label>
+				<input type="text" name="red" value="0"> <span>R</span>
+			</div>
+			<div>
+				<label>&nbsp;</label>
+				<input type="text" name="green" value="0"> <span>G</span>
+			</div>
+			<div>
+				<label>&nbsp;</label>
+				<input type="text" name="blue" value="0"> <span>B</span>
+			</div>
+			<div>
+				<label>Opacity</label>
+				<input type="text" name="opacity" value="75"> <span>%</span>
+			</div>
+			<div>
+				<label>Angle</label>
+				<input type="text" name="angle" value="120"> <span>&deg;</span>
+			</div>
+			<div>
+				<label>Distance</label>
+				<input type="text" name="distance" value="5"> <span>px</span>
+			</div>
+			<div>
+				<label>Spread</label>
+				<input type="text" name="spread" value="0"> <span>%</span>
+			</div>
+			<div>
+				<label>Size</label>
+				<input type="text" name="size" value="5"> <span>px</span>
+			</div>
+			<div class="buttons">
+				<input type="button" class="clear" value="Clear">
+				<input type="reset" value="PS Default">
+				<input type="submit" value="Convert to CSS3" class="maths">
+			</div>
 		</form>
 
 		<form class="css3-box-shadow" method="post">
-			<fieldset>
-				<legend>CSS3 Syntax</legend>
-				<div>
-					<label>Inset?</label>
-					<span class="radio"><input class="watch" type="radio" name="inset" value="No" checked> No</span>
-					<span class="radio"><input class="watch" type="radio" name="inset" value="Yes"> Yes</span>
-				</div>
-				<div>
-					<label>Horizontal Length</label>
-					<input type="text" name="offset-x" class="watch"> <span>px</span>
-				</div>
-				<div>
-					<label>Vertical Length</label>
-					<input type="text" name="offset-y" class="watch"> <span>px</span>
-				</div>
-				<div>
-					<label>Blur Radius</label>
-					<input type="text" name="blur-radius" class="watch"> <span>px</span>
-				</div>
-				<div>
-					<label>Spread</label>
-					<input type="text" name="spread" class="watch"> <span>px</span>
-				</div>
-				<div>
-					<label>Opacity</label>
-					<input type="text" name="css-opacity" class="watch">
-				</div>
-				<div class="updated">
-					<input type="reset" value="Reset">
-					<input type="submit" value="Update CSS3 Code">
-				</div>
-			</fieldset>
+			<h3>CSS3 Syntax</h3>
+			<div>
+				<label>Inset?</label>
+				<span class="radio"><input class="watch" type="radio" name="inset" value="No" checked> No</span>
+				<span class="radio"><input class="watch" type="radio" name="inset" value="Yes"> Yes</span>
+			</div>
+			<div>
+				<label>Horizontal Length</label>
+				<input type="text" name="offset-x" class="watch"> <span>px</span>
+			</div>
+			<div>
+				<label>Vertical Length</label>
+				<input type="text" name="offset-y" class="watch"> <span>px</span>
+			</div>
+			<div>
+				<label>Blur Radius</label>
+				<input type="text" name="blur-radius" class="watch"> <span>px</span>
+			</div>
+			<div>
+				<label>Spread</label>
+				<input type="text" name="spread" class="watch"> <span>px</span>
+			</div>
+			<div>
+				<label>Opacity</label>
+				<input type="text" name="css-opacity" class="watch">
+			</div>
+			<div class="updated">
+				<input type="reset" value="Reset">
+				<input type="submit" value="Update CSS3 Code">
+			</div>
 		</form>
 		<div id="about">
 			<h4>About</h4>
-			<p>Adopted from the article, <a href="https://2012.heygrady.com/blog/2011/08/06/recreating-photoshop-drop-shadows-in-css3-and-compass/" target="_blank" title="Recreating Photoshop Drop Shadows in CSS3 and Compass">Recreating Photoshop Drop Shadows in CSS3 and Compass</a> by Grady Kuhnlinem, this online tool uses javascript to convert the CSS3 box and text shadows from Photoshop shadow values.</p>
+			<p>Adopted from the article, <a href="https://20d12.heygrady.com/blog/2011/08/06/recreating-photoshop-drop-shadows-in-css3-and-compass/" target="_blank" title="Recreating Photoshop Drop Shadows in CSS3 and Compass">Recreating Photoshop Drop Shadows in CSS3 and Compass</a> by Grady Kuhnlinem, this online tool uses javascript to convert the CSS3 box and text shadows from Photoshop shadow values.</p>
 
 			<p><a href="http://melanieseifert.com" target="_blank">Melanie Seifert</a><br /><small>Senior Web Designer/Front-end Developer<br />Minneapolis, Minnesota</small></p>
 			<p class="social-links">
@@ -265,6 +255,7 @@ <h4>About</h4>
 					<img class="svg" src="img/linkedin-in.svg" />
 				</a>
 			</p>
+			<p><small>Version 2.0, October 2018</small></p>
 		</div>
 	</section>
 	<section class="bottom">
@@ -299,7 +290,7 @@ <h3>CSS3 Code</h3>
 
 	<footer id="footer">
 		<p>
-			<a rel="license" href="http://creativecommons.org/licenses/by-nd/3.0/"><img alt="Creative Commons License" style="border-width:0" src="http://i.creativecommons.org/l/by-nd/3.0/88x31.png" /></a> <span xmlns:dct="http://purl.org/dc/terms/" href="http://purl.org/dc/dcmitype/InteractiveResource" property="dct:title" rel="dct:type">Convert Photoshop to CSS3 Shadows</span> (v1) by <a xmlns:cc="http://creativecommons.org/ns#" href="http://www.melanieceraso.com/psd-to-css3" property="cc:attributionName" rel="cc:attributionURL">Melanie Seifert</a> is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by-nd/3.0/">Creative Commons Attribution-NoDerivs 3.0 Unported License</a>.<br />Permissions beyond the scope of this license may be available at <a xmlns:cc="http://creativecommons.org/ns#" href="http://melaniededon.com/contact/" rel="cc:morePermissions">http://melanieseifert.com</a>.
+			<span xmlns:dct="http://purl.org/dc/terms/" href="http://purl.org/dc/dcmitype/InteractiveResource" property="dct:title" rel="dct:type">Convert Photoshop to CSS3 Shadows</span> (v2) by <a xmlns:cc="http://creativecommons.org/ns#" href="http://www.melanieceraso.com/psd-to-css3" property="cc:attributionName" rel="cc:attributionURL">Melanie Seifert</a> is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by-nd/3.0/">Creative Commons Attribution-NoDerivs 3.0 Unported License</a>.<br />Permissions beyond the scope of this license may be available at <a xmlns:cc="http://creativecommons.org/ns#" href="http://melaniededon.com/contact/" rel="cc:morePermissions">http://melanieseifert.com</a>.
 		</p>
 		<p>
 			<a style="background-color:black;color:white;text-decoration:none;padding:4px 6px;font-family:-apple-system, BlinkMacSystemFont, &quot;San Francisco&quot;, &quot;Helvetica Neue&quot;, Helvetica, Ubuntu, Roboto, Noto, &quot;Segoe UI&quot;, Arial, sans-serif;font-size:12px;font-weight:bold;line-height:1.2;display:inline-block;border-radius:3px" href="https://unsplash.com/@evieshaffer?utm_medium=referral&amp;utm_campaign=photographer-credit&amp;utm_content=creditBadge" target="_blank" rel="noopener noreferrer" title="Download free do whatever you want high-resolution photos from Evie Shaffer"><span style="display:inline-block;padding:2px 3px"><svg xmlns="http://www.w3.org/2000/svg" style="height:12px;width:auto;position:relative;vertical-align:middle;top:-1px;fill:white" viewBox="0 0 32 32"><title>unsplash-logo</title><path d="M20.8 18.1c0 2.7-2.2 4.8-4.8 4.8s-4.8-2.1-4.8-4.8c0-2.7 2.2-4.8 4.8-4.8 2.7.1 4.8 2.2 4.8 4.8zm11.2-7.4v14.9c0 2.3-1.9 4.3-4.3 4.3h-23.4c-2.4 0-4.3-1.9-4.3-4.3v-15c0-2.3 1.9-4.3 4.3-4.3h3.7l.8-2.3c.4-1.1 1.7-2 2.9-2h8.6c1.2 0 2.5.9 2.9 2l.8 2.4h3.7c2.4 0 4.3 1.9 4.3 4.3zm-8.6 7.5c0-4.1-3.3-7.5-7.5-7.5-4.1 0-7.5 3.4-7.5 7.5s3.3 7.5 7.5 7.5c4.2-.1 7.5-3.4 7.5-7.5z"></path></svg></span><span style="display:inline-block;padding:2px 3px">Evie Shaffer</span></a>
diff --git a/scss/style-v2.scss b/scss/style-v2.scss
index 76b60cc..eb5c852 100644
--- a/scss/style-v2.scss
+++ b/scss/style-v2.scss
@@ -1,6 +1,7 @@
 @import "variables";
 @import "mixins";
 @import url('https://fonts.googleapis.com/css?family=Open+Sans');
+@import url('https://fonts.googleapis.com/css?family=Anonymous+Pro');
 
 
 body {
@@ -9,13 +10,20 @@ body {
   font-size: 16px;
   color: $gray;
   background: $feather-gray url("../img/evie-shaffer-505135-unsplash.jpg") no-repeat bottom left;
-  background-size: cover;
+  background-size: 200%;
+  @include tablet {
+    background-size: contain;
+  }
 }
 
 a {
   color: $soft-blue;
+  &:hover,
+  &:focus,
+  &:active {
+    color: $white;
+  }
 }
-
 section.top,
 section.bottom {
   display: flex;
@@ -24,18 +32,16 @@ section.bottom {
     display: grid;
     grid-template-columns: 30% 30% 30%;
     grid-template-areas: "left middle right";
-    grid-column-gap: 15px;
+    grid-column-gap: 45px;
   }
 }
-
 section.top {
   background-color: $dark-gray;
   padding: 30px;
 }
-
 section.bottom {
-  grid-template-columns: 60% 30%;
-  grid-template-areas: "output .";
+  grid-template-columns: 100%;
+  grid-template-areas: "output";
 }
 
 .from-ps {
@@ -56,8 +62,15 @@ section.bottom {
   margin-bottom: 30px;
   font-size: 14px;
   color: $light-blue;
-  a {
-    color: $soft-blue;
+  border-top: 1px solid $dark-gray;
+  border-bottom: 1px solid $medium-gray;
+  border-left: 0;
+  padding: 15px;
+  @include tablet {
+    border-top: 0;
+    border-bottom: 0;
+    border-left: 1px solid $medium-gray;
+    padding-left: 45px;
   }
   .social-links {
     a {
@@ -69,11 +82,22 @@ section.bottom {
       }
     }
   }
+  h4 {
+    text-transform: uppercase;
+  }
 }
 
 .generated-css {
   grid-area: output;
   padding: 30px;
+  background-color: $dark-gray;
+  margin: 45px 30px;
+  .output {
+    font-family: 'Anonymous Pro', monospace;
+    font-size:15px;
+    line-height: 1.4em;
+    color: $light-gray;
+  }
 }
 
 header {
@@ -83,6 +107,7 @@ header {
   h1 {
     font-size: 20px;
     color: $soft-blue;
+    font-weight: normal;
     text-transform: uppercase;
     margin: 0;
     @include tablet {
@@ -93,6 +118,7 @@ header {
     color: $light-blue;
     font-size: 18px;
     margin: 0;
+    font-weight: normal;
     @include tablet {
       font-size: 24px;
     }
@@ -101,4 +127,64 @@ header {
 footer {
   margin: 0;
   padding: 30px;
+  background: rgba(52,52,52,0.85);
+  font-size: 12px;
+  color: $light-gray;
+}
+
+h3 {
+  color: $soft-blue;
+  margin: 0 0 30px 0;
+  font-weight: normal;
+}
+
+/* Form Styling */
+
+form {
+  padding: 15px;
+  div {
+   display: flex;
+   justify-content: flex-start;
+   margin: 7.5px 0;
+   label {
+     width: 50%;
+   }
+   span {
+     color: $medium-gray;
+     &.radio {
+       width: 70px;
+     }
+   }
+   &.buttons {
+     margin-top: 30px;
+   }
+  }
+  input[type=text] {
+   width: 50px;
+   margin-right: 10px;
+   border: 0;
+   padding: 5px;
+   background-color: rgba(255,255,255,.1);
+   color: $light-gray;
+  }
+  input[type=submit],
+  input[type=reset],
+  input[type=button] {
+    border: 1px solid $soft-blue;
+    background-color: $dark-gray;
+    color: $soft-blue;
+    padding: 10px;
+    font-size: 14px;
+    margin-right: 10px;
+    outline-style: none;
+  }
+  input[type=submit] {
+    background-color: $soft-blue;
+    color: $dark-gray;
+  }
+}
+
+.output .generated,
+.updated {
+  display: none;
 }
\ No newline at end of file