diff --git a/index.html b/index.html
index f57b49a..64a9996 100644
--- a/index.html
+++ b/index.html
@@ -10,18 +10,20 @@
 
 </head>
 <body>
-	<div class="topHalf">
-		<h1>ARCANA</h1>
-		<h2>Click on the deck</h2>
+	<div class="backdrop">
+		<div class="frame1">
+			<h1>ARCANA</h1>
+			<h2>Click on the deck</h2>
 
-		<div class="buttons">
-			<img src="images/deckback.jpg" alt="deck of cards" id="deal" />
-			<br>
-			<input type="button" value="SHUFFLE" id="shuffle" />
-		</div>
-		<div id="hand">
-		</div>
-		<div id="reading">
+			<div class="buttons">
+				<img src="images/deckback.jpg" alt="deck of cards" id="deal" />
+				<br>
+				<input type="button" value="SHUFFLE" id="shuffle" />
+			</div>
+			<div id="hand">
+			</div>
+			<div id="reading">
+			</div>
 		</div>
 	</div>
 	
diff --git a/main.js b/main.js
index bf285c1..5293899 100644
--- a/main.js
+++ b/main.js
@@ -97,6 +97,11 @@ var random = function() {
   	return Math.round(Math.random() * (77-cardsDealt));
 };
 
+// create a function to randomly determine if the card will be oriented up or down, if randomOrient returns 0, do nothing. if randomOrient returns 1, rotate the card at a 180 degree angle.
+var randomOrient = function() {
+	return Math.round(Math.random());
+};
+
 //create a function to remove a card once it has been used. This is a basic way to avoid duplicates. Implies that to deal we must refresh the page. 
 var removeCard = function(k) {
 	for (var j=k; j<cards.length; j++) {
@@ -104,21 +109,31 @@ var removeCard = function(k) {
 	}
 	cardsLeftToDeal--;
 	cardsDealt++;
-}
+};
 
-//create function to deal your random number as a card
+// create function to deal your random number as a card 
+// also orient the card up if randomOrient is 0 & down if randomOrient is 1
 var dealCard = function(i) {
 	if (cardsLeftToDeal == 0) {
 		return false;
 	} else {
 		//display card chosen in HTML by creating an image element
 		var img = document.createElement("img");
+		var cardJustDealt = cards[i];
+		var orient = randomOrient();
+		$(img).attr('id', cardJustDealt);
 		img.src = ("images/deck/" + cards[i] + ".jpg");
 		img.alt = cards[i];
-
-		document.getElementById("hand").appendChild(img);
-		removeCard(i);
-	};
+		
+		if (orient === 1) {
+			$(img).addClass("orientation");
+			document.getElementById("hand").appendChild(img);
+			removeCard(i);
+		} else {
+			document.getElementById("hand").appendChild(img);
+			removeCard(i);
+		}
+	}
 };
 
 //MODULE 3A: Execution (JQuery)
@@ -133,7 +148,6 @@ $(document).ready(function() {
 	});
 });
 
-
 // MODULE 2A: Declarations
 
 //create a 3 layer object: 
diff --git a/stylesheet.css b/stylesheet.css
index 18bd453..b3315df 100644
--- a/stylesheet.css
+++ b/stylesheet.css
@@ -1,3 +1,8 @@
+/*
+Colors 
+
+
+*/
 html, body, h1, h2, h3, h4, p, div, ul, li, a {
 	padding: 0;
 	border: 0;
@@ -8,19 +13,21 @@ html, body, h1, h2, h3, h4, p, div, ul, li, a {
 	list-style: none;
 	text-decoration: none;
 }
+/**/
 @font-face {
 
 }
+/* Responsive */
 @media screen and (min-width:600px)  {
 
 }
-.topHalf {
+.backdrop {
 	width: 100vw;
 	height: 100vh;
 	background: url(images/background/starrynightsky.jpeg), black;
 	background-size: 100%;
 	background-repeat: no-repeat;
-	background-position: center;
+	background-position: fixed;
 }
 h1, h2 {
 	text-align: center;
@@ -53,7 +60,14 @@ h1, h2 {
 	padding-left: 20px;
 	padding-right: 20px;
 }
+
+#hand {
+
+}
 #hand img {
 	padding: 7px;
 	height: 225px;
+}
+.orientation {
+	transform: rotate(180deg);
 }
\ No newline at end of file
