diff --git a/readme/readme_1.html b/readme/readme_1.html
index 046956c..f5c780f 100644
--- a/readme/readme_1.html
+++ b/readme/readme_1.html
@@ -7,7 +7,9 @@
     
 </head>
 <body class="readme">
-<div>message 1</div>
+<div class="readme">
+Hello Hello Hello Hello Hello <span class="salmonRoll1">Salmon rolls</span> Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello <span class="salmonRoll1">Salmon rolls</span> Hello Hello Hello <span class="salmonRoll1">Salmon rolls</span> Hello Hello Hello Hello Hello Hello Hello Hello <span class="salmonRoll1">Salmon rolls</span> Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello <span class="salmonRoll1">Salmon rolls</span> Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello <span class="salmonRoll1">Salmon rolls</span> Hello Hello
+</div>
 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
 <script type="text/javascript" src="../script.js" ></script>
diff --git a/script.js b/script.js
index dba351c..cd44ae3 100644
--- a/script.js
+++ b/script.js
@@ -1,10 +1,9 @@
 
-///////////////////////////////
-// all jQuery stuff here
 
+// all jQuery stuff here
 
 $(document).ready(function() {
-  
+  //newspaper passage iframes
   $(document).on('click', '#paper_1', function(){ 
     $("#readme_1").show();
   });
@@ -20,7 +19,9 @@ $(document).ready(function() {
 
 });;
 
+
 $(document).ready(function() {
+//switch story divs 
 $("#switchTo2_newspaper").click (function(){ 
   $("#2_park_newspaper").show();
   $("#1_park").hide(); 
@@ -35,13 +36,52 @@ $("#switchTo1_news").click (function(){
 $("#switchTo2_walk").click (function(){ 
   $("#2_park_walk").show();
   $("#1_park").hide();
+  $("#gardenSpace").show();
+ 
 });
 
   $("#switchTo1_walk").click (function(){ 
     $("#2_park_walk").hide();
     $("#1_park").show();
+    $("#gardenSpace").hide();
+});
+
+//readme 1 salmonRoll
+$('.readme').hover(
+  function(){ $('.salmonRoll1').addClass('pink')}, 
+  function(){ $('.salmonRoll1').removeClass('pink')
 });
 
 
+
+// garden moving box 
+var pane = $('#pane'),
+    box = $('#square'),
+    w = pane.width() - box.width(),
+    d = {},
+    x = 3;
+
+function newv(v,a,b) {
+    var n = parseInt(v, 10) - (d[a] ? x : 0) + (d[b] ? x : 0);
+    return n < 0 ? 0 : n > w ? w : n;
+}
+
+$(window).keydown(function(e) { d[e.which] = true; });
+$(window).keyup(function(e) { d[e.which] = false; });
+
+setInterval(function() {
+    box.css({
+        left: function(i,v) { return newv(v, 37, 39); },
+        top: function(i,v) { return newv(v, 38, 40); }
+    });
+}, 20);
+
+
+
+
+
+
+
+
 });;
 
diff --git a/start.html b/start.html
index 4c5e761..63293b3 100644
--- a/start.html
+++ b/start.html
@@ -17,7 +17,7 @@
 <div id="container">
 <div id="1_park" style="display: block;">
     It's Sunday. You are sit on a bench in the park. Your friend seems to be really late. You need a way to kill time until she arrives.
-    You can either <button id="switchTo2_newspaper">read a copy of today's newspaper</button> that someone left on the bench or <button id="switchTo2_walk">go for a walk</button>. 
+    You can either <button id="switchTo2_newspaper">read a copy of today's newspaper</button> that someone left on the bench or <button id="switchTo2_walk">go for a little walk</button>. 
     <button>Just relax</button> there if you feel like it .
 </div>
 
@@ -40,6 +40,12 @@ Maybe you want to <button id="paper_1">read</button>,<button id="paper_2">read</
 
 </div>
 
+<div id="gardenSpace" style="display:none">
+    <div id="pane">
+        <div id ="square"></div>
+    </div>
+</div>
+
 <div id="papers"> 
 
     <div id="readme_1" style="display: none;">
@@ -58,6 +64,7 @@ Maybe you want to <button id="paper_1">read</button>,<button id="paper_2">read</
 
 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 <script type="text/javascript" src="script.js" ></script>
     
 </body>
\ No newline at end of file
diff --git a/style_1.css b/style_1.css
index ed22111..f0001a6 100644
--- a/style_1.css
+++ b/style_1.css
@@ -13,6 +13,7 @@ body {
     position:fixed;
     padding: 2% 2% 2% 2%;
     margin-bottom: 2%;
+    z-index: 0;
 
 }
 
@@ -25,30 +26,79 @@ body {
     top:5%;
 
 }
+#readme_1:hover {
+    z-index: 3;
+}
+
 #readme_2 {
     position:absolute;
     z-index: 1;
     left: 25%;
     top:15%;
-
 }
+#readme_2:hover {
+    z-index: 3;
+}
+
 #readme_3 {
     position:absolute;
     z-index: 2;
     left: 40%;
     top:25%;
 }
+#readme_3:hover {
+    z-index: 4;
+}
+
 #readme_4 {
     position:absolute;
     z-index: 3;
     right:13%;
     top:35%;
 }
+#readme_4:hover {
+    z-index: 3;
+}
 
 body.readme{
     background-color: white;
     color:red;
+}
 
+.pink{    
+    background-color: yellow;
+}
+
+div.readme::selection{ 
+    background-color: fuchsia;
 
 }
 
+/* garden/walk*/
+
+#gardenSpace {
+width: 100%;
+height: 100%;
+background-color:violet;
+position:absolute;
+z-index: -1;
+
+}
+
+#pane {
+    position:relative;
+    width:800px;
+    height:800px;
+    border:2px solid red;
+}
+
+#square {
+    position: absolute;
+    width: 50px;
+    height: 50px;
+    border: 2px solid black;
+
+
+}
+
+
