diff --git a/tree/canteen.css b/tree/canteen.css
index 60cf676..c6f0902 100644
--- a/tree/canteen.css
+++ b/tree/canteen.css
@@ -110,7 +110,6 @@ div.message1{
     border: 0.11vw black solid;
     border-radius: 25vw;
     color:black;
-    cursor:pointer;
     font-size: 1.4vw;
 
 }
diff --git a/tree/imgs/square_s/child.png b/tree/imgs/square_s/child.png
new file mode 100644
index 0000000..391be28
Binary files /dev/null and b/tree/imgs/square_s/child.png differ
diff --git a/tree/imgs/square_s/pill.png b/tree/imgs/square_s/pill.png
new file mode 100644
index 0000000..fda9ca8
Binary files /dev/null and b/tree/imgs/square_s/pill.png differ
diff --git a/tree/imgs/square_s/woman.png b/tree/imgs/square_s/woman.png
new file mode 100644
index 0000000..6498160
Binary files /dev/null and b/tree/imgs/square_s/woman.png differ
diff --git a/tree/major_house.css b/tree/major_house.css
index 23f0935..463741e 100644
--- a/tree/major_house.css
+++ b/tree/major_house.css
@@ -56,7 +56,8 @@ span.instructions_arrow{
   }
 
 #ground_color {
-    width: 3600px;
+    /*width: 3600px;*/
+    width: 560vh;
     height: 120%;
     position:fixed;
     margin:-100px;
@@ -67,7 +68,8 @@ span.instructions_arrow{
 #ground{
     position:absolute;
     height:100%;
-    width:3500px;  
+    /*width:3500px;*/
+    width: 560vh;
 }
 
 #groundline {
@@ -305,7 +307,7 @@ span.button_text{
     z-index:-2;
 }
 .bubble1 {
-    right: 24%;
+    right: 23.5%;
     bottom:54%;
     position: absolute;
     background: #ffffff;
@@ -349,7 +351,7 @@ span.button_text{
 }
 
 .bubble2 {
-    right: 24%;
+    right: 23.5%;
     bottom:54%;
     position: absolute;
     background: #ffffff;
diff --git a/tree/major_house.html b/tree/major_house.html
index c12a924..c1aa4c9 100644
--- a/tree/major_house.html
+++ b/tree/major_house.html
@@ -116,7 +116,7 @@
 //adjust camera scroll
 var $div = $('.duo');
     var screenLeftMin = 50;
-    var screenLeftMax = 170;
+    var screenLeftMax = 500;
       
   function adjustScroll() {
       var playerLeft = parseInt($div.css("left"));
@@ -138,7 +138,13 @@ var $div = $('.duo');
 $(document).keydown(function(e) {
      var offset = $div.position();
     console.log("offset:", offset);   
+    var parent_width = $("#ground").width(); 
+      var left_val_px   = $div.css('left');
+      var left_val_only = parseInt(left_val_px); 
+      var left_Percentage = (left_val_only/parent_width) * 100; 
+      console.log ("left %", left_Percentage);
 
+    if (left_Percentage < 72) {
      switch (e.which) {
         case 37:
             offset.left -= 20;
@@ -151,13 +157,29 @@ $(document).keydown(function(e) {
              console.log("right");
              $div.removeClass("flipped");
               break;
+        }
+    }
+
+    else {
+        console.log("70 ora")
+        $(document).scrollLeft(8000);
+        $(".message1").hide();
+        $(".message2").show();
+        setTimeout( function() {
+                $('.bubble1').show();
+                setTimeout( function() {
+                    $('.glasses_bar').show();
+                    $('.glasses_bar').addClass("glass_appear");
+                }, 3000);
+            }, 2000);
+    }
 
-       } 
+     
 //check the offset and prevent the character from exceeding screen dimension 
     if (offset.left < 80) {
         offset.left = 80;
     }
-
+/*
     if (offset.left >  $("#ground").width() - 1000) {
         offset.left = $("#ground").width() - 1000;
         $(document).scrollLeft(3500);
@@ -170,7 +192,7 @@ $(document).keydown(function(e) {
                     $('.glasses_bar').addClass("glass_appear");
                 }, 3000);
             }, 2000);
-    }
+    }*/
 
 
     $div.css("left", offset.left);
@@ -200,8 +222,5 @@ $(document).keydown(function(e) {
 
   
  </script>
-
-<script type="text/javascript" src="index.js" ></script>
-
     
 </body>
\ No newline at end of file
diff --git a/tree/monteferro.css b/tree/monteferro.css
index 7c85988..11e6337 100644
--- a/tree/monteferro.css
+++ b/tree/monteferro.css
@@ -78,15 +78,19 @@ div.text_container {
     padding-left: 10px;
     padding-right: 10px;
     font-family: sinistre;
-    /*-webkit-box-shadow: 0px 0px 8px 8px  #ccb3ff;
-    -moz-box-shadow: 0px 0px 8px 8px  #ccb3ff;
-    box-shadow: 0px 0px 8px 8px  #ccb3ff;
-    font-size: 1.6vw;*/
     background-color: white;
     border: 0.11vw black solid;
-    border-radius: 25vw;
     color:black;
     font-size: 1.4vw;
+    line-height: normal ;
+}
+
+.game_bar_glow{
+    border: 0.11vw transparent solid;
+    background-color: transparent;
+    -webkit-box-shadow: 0px 0px 8px 1px  black ;
+    -moz-box-shadow: 0px 0px 8px 1px  black ;
+    box-shadow: 0px 0px 8px 1px  black ;   
 }
 
 button{
diff --git a/tree/monteferro.html b/tree/monteferro.html
index b78b493..aa525e9 100644
--- a/tree/monteferro.html
+++ b/tree/monteferro.html
@@ -270,6 +270,7 @@ var loose_counter = 0;
 
   function check_counters() {
     if (fluoride_counter == 5) {
+        $(".game_bar").addClass("game_bar_glow");
         $(".field_cover").css("z-index",10);
         console.log ("you won!");
         fluoride_counter = 0;
diff --git a/tree/park.css b/tree/park.css
index 1be515a..0ff0f81 100644
--- a/tree/park.css
+++ b/tree/park.css
@@ -509,7 +509,56 @@ text-decoration: underline solid 3px;
     display: block;
 }
         
-
+#info_button{
+    font-size: 3vw;
+    position:absolute;
+    left: 30px;
+    top:30px;
+    color: #c94dff ;
+    cursor: pointer;
+}
+.info_text{
+    position: fixed;
+    color:#c94dff ;
+    font-family: jolyregular;
+    background-color: white;
+    top:7%;
+    right:4%;
+    border:1px #c94dff solid;
+    font-size: 22px;
+    /*line-height: 30px;*/
+    width: 600px;
+    height: 160px;
+    border-radius: 10px;
+    padding: 20px;
+    z-index: 100;
+}
+.info_text:after {
+    content: '';
+    position: absolute;
+    display: block;
+    width: 0;
+    z-index: 1;
+    border-style: solid;
+    border-color: #ffffff transparent;
+    border-width: 0 20px 20px;
+    top: -20px;
+    left: 80%;
+    margin-left: -20px;
+}
+.info_text:before {
+    content: '';
+    position: absolute;
+    width: 0;
+    z-index: 0;
+    border-style: solid;
+    border-color: #c94dff transparent;
+    border-width: 0 21px 21px;
+    top: -21.5px;
+    left: 80%;
+    margin-left: -21px;
+    display: block;
+}
 
 
 
diff --git a/tree/park.html b/tree/park.html
index 15e088e..bc5bc4b 100644
--- a/tree/park.html
+++ b/tree/park.html
@@ -9,6 +9,13 @@
     
 </head>
 <body class="park_body">
+  <span id="info_button" class="blur_button" >ⓘ</span>
+  <div class="info_text" style="display: none;">
+    → Click on the objects to interact with them; <br>
+    → Click on the characters to talk to them;<br>
+    → If the baloon ends with ✜ you can click on it to hear more from the characters;<br>
+    → In some places it will be possible to move your avatar using the arrow keys. 
+  </div>
 <!--memory pop up -->
 <div class="memory" style="display: none;">
   hello <span id="player_name"> </span>, it seems you have already been here. You can come back how many times you want but you should be aware that the oracle tends to remember everything you did in the past. <br> You can <button id="no_delete" class="button_memory">carry on anyways</button> or you can <button id="delete" class="button_memory">clean your history</button> in case you are looking for a fresh start. 
@@ -174,11 +181,11 @@
       if (localStorage.final === "opened" ) {
         $(".memory").show();
         $(".text_container").hide();
-        $(".blur"). addClass("blur_background");
+        $(".blur, .blur_button ").addClass("blur_background");
         $("#no_delete").click (function(){
           $(".memory").hide();
           $(".text_container").show();
-          $(".blur"). removeClass("blur_background");
+          $(".blur, .blur_button").removeClass("blur_background");
         });
         $("#delete").click (function(){
           var avatar_image = localStorage.getItem('myavatar');
@@ -190,7 +197,7 @@
           localStorage.setItem('playerName',avatar_name);
           $(".memory").hide();
           $(".text_container").show();
-          $(".blur"). removeClass("blur_background");
+          $(".blur, .blur_button").removeClass("blur_background");
           window.localStorage.setItem("park","opened")
           console.log ("park:",localStorage.park)
           document.querySelector('#player_name').innerHTML = localStorage.playerName;
@@ -282,9 +289,16 @@
           $(".message5").show();
           },2000);
     });
+
     $(".bubble2").click (function (){
       $(".bubble2").toggle();
     });
+
+    $("#info_button").click (function (){
+      $(".info_text").toggle();
+      $(".blur"). toggleClass("blur_background");
+      $(".text_container").toggle();
+    });
    
  </script>
     
diff --git a/tree/pleiadians_satanism.html b/tree/pleiadians_satanism.html
index 3bb51d5..2c10a47 100644
--- a/tree/pleiadians_satanism.html
+++ b/tree/pleiadians_satanism.html
@@ -158,13 +158,13 @@ $(document).keydown(function(e) {
         offset.left = 80;
     }
 
-    if (offset.left >  $("#ground").width()  - 700) {
+    if (offset.left >  $("#ground").width()  - 900) {
         $(".message1").hide();
         $(".message2").show();
     }
 
-    if (offset.left >  $("#ground").width()  - 80) {
-        offset.left = $("#ground").width() - 80;
+    if (offset.left >  $("#ground").width()  - 100) {
+        offset.left = $("#ground").width() - 100;
     }
 
     $div.css("left", offset.left);
diff --git a/tree/spring_river.html b/tree/spring_river.html
index 1b08b62..3cdddc3 100644
--- a/tree/spring_river.html
+++ b/tree/spring_river.html
@@ -10,9 +10,9 @@
 </head>
 <body >
 
-    <div id="ground_color" class="invert scroll-pane stop_invert blur"></div>
+    <div id="ground_color" class="invert scroll-pane stop_invert"></div>
 
-    <div id="groundline" class="invert scroll-pane stop_invert blur "></div>
+    <div id="groundline" class="invert scroll-pane stop_invert blur"></div>
 
     <div class="army blur">
       <div  id="player_img"></div>
@@ -120,7 +120,6 @@ You need to put an end to this evil depravation now!
   window.onload = function() {
   window.localStorage.setItem("spring_river","opened");
   console.log ("spring river:",localStorage.spring_river);
-	$('.scroll-pane').jScrollPane();
     }
 
   //get player avatar from local storage
@@ -276,28 +275,24 @@ $(document).keydown(function(e) {
     $(".bubble1").hide();
     $(".bad").hide();
     $(".good").show();
-    /*$(".stop_invert").removeClass("invert");*/
-    /*$('html').css({overflow: 'hidden'});*/
+    $(".stop_invert").removeClass("invert");
+    //$('html').css({overflow: 'hidden'});
     setTimeout( function () {
       $(".bubble2").show();
       $(".message3").hide();
       $(".message4").show();
       setTimeout( function () {
         $(".blur").removeClass("blur_background");
-      }, 500);
+      }, 1500);
     }, 500);
   });
 
   $(".bubble2").click(function() {
     $(".bubble2").hide();
+    $("#cloud, #cloud2, #thunders,#amanda").hide();
   });
 
-
-
     
  </script>
-
-<script type="text/javascript" src="index.js" ></script>
-
     
 </body>
\ No newline at end of file
diff --git a/tree/square_satanism.css b/tree/square_satanism.css
index f207bf7..1f743a6 100644
--- a/tree/square_satanism.css
+++ b/tree/square_satanism.css
@@ -249,8 +249,8 @@ div.figure9 {
     font-family: sinistre;
     font-size: 16px;
     text-align: center;
-    width: 40px;
-    height: 18px;
+    width: 120px;
+    height: 30px;
     border-radius: 10px;
     padding: 18px;
     border: #000000 solid 1px;
diff --git a/tree/square_satanism.html b/tree/square_satanism.html
index ea03e17..36d0181 100644
--- a/tree/square_satanism.html
+++ b/tree/square_satanism.html
@@ -26,8 +26,12 @@
 <!--characters-->
 
         <div id="player_img" class="moving_duo"></div>
-        <div class="bubble moving_duo" style="display: none;">!!!</div>
-  
+        <!--<div class="bubble moving_duo" style="display: none;">!!!</div>-->
+        <div class="bubble moving_duo" style="display: none;">
+            <img  src="imgs/square_s/woman.png" height="30px"> 
+             <img  src="imgs/square_s/pill.png" height="30px"> 
+             <img  src="imgs/square_s/child.png" height="30px">
+        </div>
 
     <div class="figure1 figures">
         <img  id="person1" class="people" src="imgs/square_s/person1.gif" height="110px">