diff --git a/app/styles/main.css b/app/styles/main.css
index fc8d3c3..fd91f61 100644
--- a/app/styles/main.css
+++ b/app/styles/main.css
@@ -13,7 +13,7 @@ body {
       margin-bottom: 2rem; }
     body .character-container .character {
       display: inline-block;
-      width: 24%; }
+      width: 22%; }
       body .character-container .character img {
         width: 100%; }
       body .character-container .character li {
@@ -103,6 +103,25 @@ body {
   width: 90%;
   height: 300px;
   margin: 36px auto;
-  background: #ccc; }
+  position: relative; }
+
+.protagonist-hit {
+  font-family: 'Fontdiner Swanky', cursive;
+  font-weight: bold;
+  font-size: 36px;
+  color: -webkit-gradient(linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2), color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22)); }
+
+.protagonist-miss {
+  font-family: 'Fontdiner Swanky', cursive;
+  font-weight: bold;
+  font-size: 36px;
+  color: -webkit-gradient(linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2), color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22)); }
+
+.button_container h5 {
+  font-family: 'Fontdiner Swanky', sans-serif;
+  font-size: 2rem;
+  display: inline-block;
+  position: absolute;
+  top: 3rem; }
 
 /*# sourceMappingURL=main.css.map */
diff --git a/app/styles/main.scss b/app/styles/main.scss
index 52ea8f9..1844c51 100644
--- a/app/styles/main.scss
+++ b/app/styles/main.scss
@@ -2,11 +2,10 @@
 
 body {
     text-align: center;
-    font-family: helvetica;
     background: url("images/cbbackground.jpeg") top center repeat;
 
     h2 {
-      font-family: 'Fontdiner Swanky', cursive;
+      font-family: 'Atma', cursive;
       font-size: 3rem;
     }
     .character-container {
@@ -16,68 +15,22 @@ body {
           text-align: justify;
           margin-top: 1rem;
           margin-bottom: 2rem;
-          padding-top: 0.5rem;
-          padding-bottom: 0.5rem;
-          font-size: 1.2rem;
-          font-style: italic;
-          border-top: 2px solid black;
-          border-bottom: 2px solid black;
         }
 
         .character {
             display: inline-block;
-            width: 24%;
-            ul {
-              // padding-left:0;
+            width: 22%;
+
+            &:hover {
+              // transform: scale(1.2);
             }
             img {
                 width: 100%;
+                // border-bottom: 2px solid black;
             }
             li {
                 list-style-type: none;
                 text-align: left;
-
-                span {
-                  font-weight: bold;
-                  font-family: 'Fontdiner Swanky', cursive;
-                }
-            }
-            .choose {
-              border-radius: 5px;
-              font-family: 'Fontdiner Swanky', cursive;
-              font-size: 1.2rem;
-              padding: 0.7rem;
-              border: 2px solid black;
-              background-color: white;
-              margin-bottom: 1rem;
-
-              &:hover {
-                color: white;
-                transform: scale(1.1);
-                background: linear-gradient(270deg, #38e182, #f7077a, #ffe933, #ff8f33, #ff2f00, #c500ff);
-                background-size: 1200% 1200%;
-
-                -webkit-animation: Rainbow 5s ease infinite;
-                -moz-animation: Rainbow 5s ease infinite;
-                animation: Rainbow 5s ease infinite;
-
-                @-webkit-keyframes Rainbow {
-                  0%{background-position:0% 50%}
-                  50%{background-position:100% 50%}
-                  100%{background-position:0% 50%}
-                }
-                @-moz-keyframes Rainbow {
-                  0%{background-position:0% 50%}
-                  50%{background-position:100% 50%}
-                  100%{background-position:0% 50%}
-                }
-                @keyframes Rainbow {
-                  0%{background-position:0% 50%}
-                  50%{background-position:100% 50%}
-                  100%{background-position:0% 50%}
-                  }
-                  // rainbow gradient code from https://www.gradient-animator.com/
-              }
             }
         }
     }
@@ -98,7 +51,7 @@ body {
         div::before {
             content: '';
             position: absolute;
-            top: 95px;
+            top: 96px;
             right: 5px;
             border-width: 15px 10px 0;
             border-style: solid;
@@ -109,7 +62,7 @@ body {
         div::after {
             content: '';
             position: absolute;
-            top: 95px;
+            top: 96px;
             right: 8.2px;
             border-width: 10px 7px 0;
             border-style: solid;
@@ -123,22 +76,12 @@ body {
         border-radius: 5px;
         border: 1px solid black;
     }
-
-    .new-game {
-      padding: 0.7rem;
-      margin-bottom: 1rem;
-      border-radius: 10px;
-      background: url('images/rainbowbg.jpg');
-      // color: white;
-      font-family: 'Fontdiner Swanky', cursive;
-      border: 2px solid black;
-
-    }
 }
 .icon {
   display: inline-block;
   width: 280px;
   height: 280px;
+  border: 1px solid black;
   font-size: 256px;
   text-align:center;
   color: #2DAEBF;
@@ -151,22 +94,13 @@ body {
   font-size: 236px;
   margin-left: 15%;
   margin-right: 2%;
-  text-shadow:
-    0px 2px 0px #0092B3,
-    0px 5px 2px #555;
-    transition: all 0.25s;
   &:active{
     font-size: 256px;
-
   }
 }
 .special {
   font-size: 236px;
   margin-right: 15%;
-  text-shadow:
-    0px 2px 0px #0092B3,
-    0px 5px 2px #555;
-    transition: all 0.25s;
     &:active{
     font-size: 256px;
   }
@@ -200,34 +134,43 @@ body {
   width: 90%;
   height: 300px;
   margin: 36px auto;
-  // background: #ccc;
   position: relative;
 }
-
-.enemy div{
-  display: inline-block;
-  width: 15%;
-
-}
-.enemy h3{
-  color: #00D5FF;
-  font-family: 'Frijole', sans-serif;
-  font-size: 3rem;
+.protagonist-hit {
+  font-family: 'Fontdiner Swanky', cursive;
+  font-weight: bold;
+  font-size: 36px;
+  color: -webkit-gradient(
+    linear, left top, right top,
+    color-stop(0, #f22),
+    color-stop(0.15, #f2f),
+    color-stop(0.3, #22f),
+    color-stop(0.45, #2ff),
+    color-stop(0.6, #2f2),
+    color-stop(0.75, #2f2),
+    color-stop(0.9, #ff2),
+    color-stop(1, #f22));
+  }
+.protagonist-miss {
+  font-family: 'Fontdiner Swanky', cursive;
+  font-weight: bold;
+  font-size: 36px;
+  color: -webkit-gradient(
+    linear, left top, right top,
+    color-stop(0, #f22),
+    color-stop(0.15, #f2f),
+    color-stop(0.3, #22f),
+    color-stop(0.45, #2ff),
+    color-stop(0.6, #2f2),
+    color-stop(0.75, #2f2),
+    color-stop(0.9, #ff2),
+    color-stop(1, #f22));
 }
+.enemy-hit {
 
-.protagonist div{
-  width: 15%;
-  display: inline-block;
 }
-.protagonist h3{
-  font-size: 3rem;
-  font-family: 'Fontdiner Swanky', sans-serif;
-  background-image: -webkit-gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) );
-  background-image: gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) );
-  color:transparent;
-  -webkit-background-clip: text;
-  background-clip: text;
-  //^stolen from https://rainbowcoding.com/how-to-create-rainbow-text-in-html-css-javascript/
+.enemy-miss {
+
 }
 
 .button_container h5{
@@ -238,5 +181,4 @@ body {
   top: 3rem;
   // left: -5rem;
 
-
 }
diff --git a/dist/index.html b/dist/index.html
index 80815d4..5db0984 100644
--- a/dist/index.html
+++ b/dist/index.html
@@ -2,20 +2,24 @@
 <html>
   <head>
     <meta charset="utf-8">
-    <title>Feelings Fight</title>
+    <title>Project Title</title>
 
     <!-- Normalise -->
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/4.2.0/normalize.min.css" media="screen" title="no title" charset="utf-8">
+
     <link href="https://fonts.googleapis.com/css?family=Fontdiner+Swanky" rel="stylesheet">
     <!-- Font Awesome -->
-    <script src="https://use.fontawesome.com/95cea4501d.js"></script>
+    <!-- <script src="https://use.fontawesome.com/95cea4501d.js"></script> -->
     <!-- main CSS -->
-    <link rel="stylesheet" href="main.css" media="screen">
+    <link rel="stylesheet" href="../app/styles/main.css" media="screen">
     <!-- zurb foundation fonts -->
-    <link type="text/css" rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.css" />
+    <link type="text/css" rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.css"/>
+  <!--  fontdiner swanky -->
+    <link href="https://fonts.googleapis.com/css?family=Fontdiner+Swanky" rel="stylesheet">
     <link href="https://fonts.googleapis.com/css?family=Frijole" rel="stylesheet"/>
   </head>
   <body>
+
     <header>
       <h2>Feelings Fight!</h2>
     </header>
@@ -134,12 +138,30 @@ <h2>Defeat!</h2>
 
     <div class="button_container bedtime hidden">
         <img src="images/bedtime.gif"/>
-        <div>
-          <i class="fi-cloud bedtime attack"></i>
+        <div><i class="fi-cloud bedtime attack"></i>
         <i class="fi-heart bedtime special"></i>
       </div>
     </div>
 
+<!-- hit and miss  -->
+    <div class="protagonist-hit hidden">
+      <p> HIT! You just gave Professor Coldheart</p>
+      <p>a face full of FEELINGS!</p>
+    </div>
+    <div class="protagonist-miss hidden">
+      <p> MISS!</p>
+      <p></p>
+    </div>
+    <div class="enemy-hit ">
+      <p>HIT! Professor Coldheart is chipping away</p>
+      <p>at your cheer!</p>
+    </div>
+    <div class="enemy-miss ">
+      <p> MISS</p>
+      <p></p>
+    </div>
+<!-- buttons and graphics END -->
+
     <!-- JQuery -->
     <script src="https://code.jquery.com/jquery-3.0.0.min.js"
     integrity="sha256-JmvOoLtYsmqlsWxa7mDSLMwa6dZ9rrIdtrrVYRnDRH0="