diff --git a/tree/.DS_Store b/tree/.DS_Store
index bb0f0bd..ae392cb 100644
Binary files a/tree/.DS_Store and b/tree/.DS_Store differ
diff --git a/tree/fonts/JolyDisplay-BoldDisplay.otf b/tree/fonts/JolyDisplay-BoldDisplay.otf
new file mode 100644
index 0000000..3058c35
Binary files /dev/null and b/tree/fonts/JolyDisplay-BoldDisplay.otf differ
diff --git a/tree/fonts/JolyDisplay-BoldDisplay.woff b/tree/fonts/JolyDisplay-BoldDisplay.woff
new file mode 100644
index 0000000..9c4efc3
Binary files /dev/null and b/tree/fonts/JolyDisplay-BoldDisplay.woff differ
diff --git a/tree/fonts/JolyDisplay-BoldDisplay.woff2 b/tree/fonts/JolyDisplay-BoldDisplay.woff2
new file mode 100644
index 0000000..2f62b10
Binary files /dev/null and b/tree/fonts/JolyDisplay-BoldDisplay.woff2 differ
diff --git a/tree/fonts/JolyDisplay-BoldDisplayItalic.otf b/tree/fonts/JolyDisplay-BoldDisplayItalic.otf
new file mode 100644
index 0000000..7955985
Binary files /dev/null and b/tree/fonts/JolyDisplay-BoldDisplayItalic.otf differ
diff --git a/tree/fonts/JolyDisplay-BoldDisplayItalic.woff b/tree/fonts/JolyDisplay-BoldDisplayItalic.woff
new file mode 100644
index 0000000..66f00ba
Binary files /dev/null and b/tree/fonts/JolyDisplay-BoldDisplayItalic.woff differ
diff --git a/tree/fonts/JolyDisplay-BoldDisplayItalic.woff2 b/tree/fonts/JolyDisplay-BoldDisplayItalic.woff2
new file mode 100644
index 0000000..441cc3d
Binary files /dev/null and b/tree/fonts/JolyDisplay-BoldDisplayItalic.woff2 differ
diff --git a/tree/fonts/JolyDisplay-BoldDisplayItalic.woff2 2 b/tree/fonts/JolyDisplay-BoldDisplayItalic.woff2 2
new file mode 100644
index 0000000..441cc3d
Binary files /dev/null and b/tree/fonts/JolyDisplay-BoldDisplayItalic.woff2 2 differ
diff --git a/tree/fonts/JolyDisplay-HeavyDisplay.otf b/tree/fonts/JolyDisplay-HeavyDisplay.otf
new file mode 100644
index 0000000..0eac974
Binary files /dev/null and b/tree/fonts/JolyDisplay-HeavyDisplay.otf differ
diff --git a/tree/fonts/JolyDisplay-HeavyDisplay.woff b/tree/fonts/JolyDisplay-HeavyDisplay.woff
new file mode 100644
index 0000000..3d54822
Binary files /dev/null and b/tree/fonts/JolyDisplay-HeavyDisplay.woff differ
diff --git a/tree/fonts/JolyDisplay-HeavyDisplay.woff2 b/tree/fonts/JolyDisplay-HeavyDisplay.woff2
new file mode 100644
index 0000000..26f3e8c
Binary files /dev/null and b/tree/fonts/JolyDisplay-HeavyDisplay.woff2 differ
diff --git a/tree/fonts/JolyDisplay-HeavyDisplayItalic.otf b/tree/fonts/JolyDisplay-HeavyDisplayItalic.otf
new file mode 100644
index 0000000..57566a3
Binary files /dev/null and b/tree/fonts/JolyDisplay-HeavyDisplayItalic.otf differ
diff --git a/tree/fonts/JolyDisplay-HeavyDisplayItalic.woff b/tree/fonts/JolyDisplay-HeavyDisplayItalic.woff
new file mode 100644
index 0000000..92a404c
Binary files /dev/null and b/tree/fonts/JolyDisplay-HeavyDisplayItalic.woff differ
diff --git a/tree/fonts/JolyDisplay-HeavyDisplayItalic.woff2 b/tree/fonts/JolyDisplay-HeavyDisplayItalic.woff2
new file mode 100644
index 0000000..91bd48f
Binary files /dev/null and b/tree/fonts/JolyDisplay-HeavyDisplayItalic.woff2 differ
diff --git a/tree/fonts/JolyDisplay-RegularDisplay.otf b/tree/fonts/JolyDisplay-RegularDisplay.otf
new file mode 100644
index 0000000..c6bc041
Binary files /dev/null and b/tree/fonts/JolyDisplay-RegularDisplay.otf differ
diff --git a/tree/fonts/JolyDisplay-RegularDisplay.woff b/tree/fonts/JolyDisplay-RegularDisplay.woff
new file mode 100644
index 0000000..fe7f116
Binary files /dev/null and b/tree/fonts/JolyDisplay-RegularDisplay.woff differ
diff --git a/tree/fonts/JolyDisplay-RegularDisplay.woff2 b/tree/fonts/JolyDisplay-RegularDisplay.woff2
new file mode 100644
index 0000000..848fe85
Binary files /dev/null and b/tree/fonts/JolyDisplay-RegularDisplay.woff2 differ
diff --git a/tree/fonts/JolyDisplay-RegularDisplayItalic.otf b/tree/fonts/JolyDisplay-RegularDisplayItalic.otf
new file mode 100644
index 0000000..d44e698
Binary files /dev/null and b/tree/fonts/JolyDisplay-RegularDisplayItalic.otf differ
diff --git a/tree/fonts/JolyDisplay-RegularDisplayItalic.woff b/tree/fonts/JolyDisplay-RegularDisplayItalic.woff
new file mode 100644
index 0000000..e98955b
Binary files /dev/null and b/tree/fonts/JolyDisplay-RegularDisplayItalic.woff differ
diff --git a/tree/fonts/JolyDisplay-RegularDisplayItalic.woff2 b/tree/fonts/JolyDisplay-RegularDisplayItalic.woff2
new file mode 100644
index 0000000..dd1209d
Binary files /dev/null and b/tree/fonts/JolyDisplay-RegularDisplayItalic.woff2 differ
diff --git a/tree/fonts/Sinistre-StCaroline.woff b/tree/fonts/Sinistre-StCaroline.woff
new file mode 100644
index 0000000..d2e95f7
Binary files /dev/null and b/tree/fonts/Sinistre-StCaroline.woff differ
diff --git a/tree/fonts/Sinistre-StCaroline.woff2 b/tree/fonts/Sinistre-StCaroline.woff2
new file mode 100644
index 0000000..e37e3b7
Binary files /dev/null and b/tree/fonts/Sinistre-StCaroline.woff2 differ
diff --git a/tree/fonts/Sinistre-S†Caroline.otf b/tree/fonts/Sinistre-S†Caroline.otf
new file mode 100644
index 0000000..5e7b188
Binary files /dev/null and b/tree/fonts/Sinistre-S†Caroline.otf differ
diff --git a/tree/index.css b/tree/index.css
index 26fd10d..2ce67d5 100644
--- a/tree/index.css
+++ b/tree/index.css
@@ -1,5 +1,41 @@
-div.introtext {
-    font-size: 5vw;   
+@font-face {
+    font-family: sinistre;
+    src: url(fonts/Sinistre-S†Caroline.woff),
+    url(fonts/Sinistre-S†Caroline.otf);
+}
+@font-face {
+    font-family: jolybolditalic;
+    src: url(fonts/JolyDisplay-BoldDisplayItalic.woff),
+    url(fonts/JolyDisplay-BoldDisplayItalic.otf);
+}
+
+@font-face {
+    font-family: jolyregularitalic;
+    src: url(fonts/JolyDisplay-RegularDisplayItalic.woff),
+    url(fonts/JolyDisplay-RegularDisplayItalic.otf);
+}
+@font-face {
+    font-family: jolyregular;
+    src: url(fonts/JolyDisplay-RegularDisplay.woff),
+    url(fonts/JolyDisplay-RegularDisplay.otf);
+}
+
+@font-face {
+    font-family: jolyheavyitalic;
+    src: url(fonts/JolyDisplay-HeavyDisplayItalic.woff),
+    url(fonts/JolyDisplay-HeavyDisplayItalic.otf);
+}
+
+body{
+    font-size: 4.2vw; 
+    padding:2.5%;
+    font-family: sinistre;
+    line-height: 5.3vw;
+    
+}
+
+span.special1{
+    font-family: sinistre;
 }
 
 form {
@@ -10,19 +46,109 @@ label {
 }
 
 input#player_name {
-    /*
--webkit-appearance: none;*/
-border: 4px black solid;
-border-radius: 15px;
+-webkit-appearance: none;
+border: 0px transparent solid;
+border-radius: 25vw;
 font-size: 4vw; 
 color: black;
+font-family: jolybolditalic;
+text-align: center;
+background-color: #ccb3ff;
+-webkit-box-shadow: 0px 0px 8px 6px  #ccb3ff;
+-moz-box-shadow: 0px 0px 8px 6px  #ccb3ff;
+box-shadow: 0px 0px 8px 6px  #ccb3ff;
+
 }
 
+
 button {
     -webkit-appearance: none;
-    font-size: 4vw;
+    font-size: 4.5vw;
     background-color: white;
-    border: 4px black solid;
-    border-radius: 15px;
+    border: 0.25vw black solid;
+    border-radius: 25vw;
+    font-family: sinistre;
     color:black;
-}
\ No newline at end of file
+    cursor:pointer;
+}
+button:hover {
+    border: 0.25vw  #ccb3ff solid;
+    color:#ccb3ff;
+}
+
+
+div.line {
+    display: inline-block;
+    border-top: 0.3vw solid black;
+    padding-bottom: 20px;
+    width: 20vw;
+    transform: rotate(4deg);
+}
+  div.line2 {
+    display: inline-block;
+    border-top: 0.3vw solid black;
+    padding-bottom: 20px;
+    width: 20vw;
+    transform: rotate(-4deg);
+  }
+  div.line3 {
+    display: inline-block;
+    border-top: 0.3vw solid black;
+    padding-bottom: 20px;
+    width: 40vw;
+    transform: rotate(4deg);
+  }
+  div.line4 {
+    display: inline-block;
+    border-top: 0.3vw solid black;
+    padding-bottom: 20px;
+    width: 10vw;
+    transform: rotate(-4deg);
+  }
+
+
+
+    *,
+    *:before,
+    *:after {
+    box-sizing: border-box;
+    }
+
+    .radio {
+        font-size: 2.25rem;
+        color: black;
+        display: inline;
+        grid-template-columns: min-content auto;
+        grid-gap: 0.5em;
+    }
+
+
+input.avatar {
+    opacity: 0;
+    width: 0;
+    height: 0;
+}
+input:checked + .radio__control {
+    background-color: #ccb3ff;
+    border: #ccb3ff;
+    -webkit-box-shadow: 0px 0px 8px 6px  #ccb3ff;
+-moz-box-shadow: 0px 0px 8px 6px  #ccb3ff;
+box-shadow: 0px 0px 8px 6px  #ccb3ff;
+  }
+
+ .radio__control {
+    display: inline-block;
+    width: 1.5vw;
+    height: 1.5vw;
+    border-radius: 50%;
+    border: 0.2vw solid currentColor;
+    margin-right: 2vw;
+}
+
+
+
+
+
+    
+
+
diff --git a/tree/index.html b/tree/index.html
index 9e4192f..ea32370 100644
--- a/tree/index.html
+++ b/tree/index.html
@@ -10,54 +10,104 @@
 </head>
 <body>
     <div class="introtext">
-        It looks like you have been summoned by the oracle (<img src="imgs/avatars/ball1.png" height="70px">,<img src="imgs/avatars/ball2.gif" height="70px">,<img src="imgs/avatars/ball4.gif" height="70px">). 
-        You will be asked to start a journey: throughout it you will be called 
+        <span class="special1" style="-webkit-padding-start: 15vw;">It</span> looks like you have been summoned by the  <span class="special1">ORACLE (<img src="imgs/avatars/ball1.png" height="60vw">,<img src="imgs/avatars/ball2.gif" height="60vw">,<img src="imgs/avatars/ball4.gif" height="60vw">)</span> 
+        <div class="line"></div> <span class="special1">you</span> will be asked to start a journey: throughout it you will be called 
     <form name="nameForm">
-        <input id="player_name" type="text" placeholder="enter you name" >
-    </form>.
+        <input id="player_name" type="text" >
+    </form>
   
-   You can decide whether you are going to look like   
-   <form id="avatar_form" >
-  <input type="radio" id="player1" name="player_avatar" value="imgs/avatars/avatar1.gif">
-  <label for="player1"><img id="player_img_1" src="imgs/avatars/avatar1.gif" height="70px"></label>
+     <span class="special1">you</span> can decide whether you are going to look like   
+   <form id="avatar_form">
+    
+    <label class="radio" for="player1" >
+        <span class="radio__input">  
+            <input class="avatar"type="radio" id="player1" name="player_avatar" value="imgs/avatars/avatar1.gif" checked="checked" >
+        <span class="radio__control"></span><img id="player_img_1" src="imgs/avatars/avatar1.gif" height="60vw">
+        </span> 
+    </label>
        ,
-  <input type="radio" id="player2" name="player_avatar" value="imgs/avatars/avatar2.gif">
-  <label for="player2"> <img id="player_img_2" src="imgs/avatars/avatar2.gif" height="70px"></label>
+  <label class="radio" for="player2" >
+    <span class="radio__input">
+        <input class="avatar"type="radio" id="player2" name="player_avatar" value="imgs/avatars/avatar2.gif">
+        <span class="radio__control"></span><img id="player_img_2" src="imgs/avatars/avatar2.gif" height="60vw">
+    </span>
+</label>
         ,
- <input type="radio" id="player3" name="player_avatar" value="imgs/avatars/avatar3.gif">
- <label for="player3"> <img id="player_img_3" src="imgs/avatars/avatar3.gif" height="70px"></label>
+ <label class="radio" for="player3">
+    <span class="radio__input">
+     <input class="avatar"type="radio" id="player3" name="player_avatar" value="imgs/avatars/avatar3.gif">
+     <span class="radio__control"></span><img id="player_img_3" src="imgs/avatars/avatar3.gif" height="60vw">
+    </span> 
+</label>
     ,
- <input type="radio" id="player4" name="player_avatar" value="imgs/avatars/avatar4.gif">
- <label for="player4"> <img id="player_img_4" src="imgs/avatars/avatar4.gif" height="70px"></label>
+ <label class="radio" for="player4">
+    <span class="radio__input">
+     <input class="avatar"type="radio" id="player4" name="player_avatar" value="imgs/avatars/avatar4.gif">
+     <span class="radio__control"></span><img id="player_img_4" src="imgs/avatars/avatar4.gif" height="60vw">
+     </span>
+</label>
  ,
- <input type="radio" id="player5" name="player_avatar" value="imgs/avatars/avatar5.gif">
- <label for="player5"> <img id="player_img_5" src="imgs/avatars/avatar5.gif" height="70px"></label>
+ <label class="radio" for="player5">
+    <span class="radio__input">
+     <input class="avatar"type="radio" id="player5" name="player_avatar" value="imgs/avatars/avatar5.gif">
+     <span class="radio__control"></span><img id="player_img_5" src="imgs/avatars/avatar5.gif" height="60vw">
+        </span>
+    </label>
  ,
- <input type="radio" id="player6" name="player_avatar" value="imgs/avatars/avatar6.gif">
- <label for="player6"> <img id="player_img_6" src="imgs/avatars/avatar6.gif" height="70px"></label>
+ <label class="radio" for="player6">
+    <span class="radio__input"> 
+     <input class="avatar"type="radio" id="player6" name="player_avatar" value="imgs/avatars/avatar6.gif">
+     <span class="radio__control"></span><img id="player_img_6" src="imgs/avatars/avatar6.gif" height="60vw">
+        </span>
+    </label>
  ,
- <input type="radio" id="player7" name="player_avatar" value="imgs/avatars/avatar7.gif">
- <label for="player7"> <img id="player_img_7" src="imgs/avatars/avatar7.gif" height="70px"></label>
+ <label class="radio" for="player7"> 
+    <span class="radio__input">
+     <input class="avatar"type="radio" id="player7" name="player_avatar" value="imgs/avatars/avatar7.gif">
+     <span class="radio__control"></span><img id="player_img_7" src="imgs/avatars/avatar7.gif" height="60vw">
+        </span>
+    </label>
  ,
- <input type="radio" id="player8" name="player_avatar" value="imgs/avatars/avatar8.gif">
- <label for="player8"> <img id="player_img_8" src="imgs/avatars/avatar8.gif" height="70px"></label>
+ <label class="radio" for="player8"> 
+    <span class="radio__input">
+     <input class="avatar"type="radio" id="player8" name="player_avatar" value="imgs/avatars/avatar8.gif">
+     <span class="radio__control"></span><img id="player_img_8" src="imgs/avatars/avatar8.gif" height="60vw">
+        </span>
+    </label>
  ,
- <input type="radio" id="player9" name="player_avatar" value="imgs/avatars/avatar9.gif">
- <label for="player9"> <img id="player_img_9" src="imgs/avatars/avatar9.gif" height="70px"></label>
+ <label class="radio" for="player9"> 
+    <span class="radio__input">
+     <input class="avatar"type="radio" id="player9" name="player_avatar" value="imgs/avatars/avatar9.gif">
+     <span class="radio__control"></span><img id="player_img_9" src="imgs/avatars/avatar9.gif" height="60vw">
+    </span>
+    </label>
  ,
- <input type="radio" id="player10" name="player_avatar" value="imgs/avatars/avatar10.gif">
- <label for="player10"> <img id="player_img_10" src="imgs/avatars/avatar10.gif" height="70px"></label>
+ <label class="radio" for="player10"> 
+    <span class="radio__input">
+     <input class="avatar"type="radio" id="player10" name="player_avatar" value="imgs/avatars/avatar10.gif">
+     <span class="radio__control"></span><img id="player_img_10" src="imgs/avatars/avatar10.gif" height="60vw">
+        </span>
+    </label>
  ,
- <input type="radio" id="player11" name="player_avatar" value="imgs/avatars/avatar11.gif">
- <label for="player11"> <img id="player_img_11" src="imgs/avatars/avatar11.gif" height="70px"></label>
+ <label class="radio" for="player11"> 
+    <span class="radio__input">
+     <input class="avatar"type="radio" id="player11" name="player_avatar" value="imgs/avatars/avatar11.gif">
+     <span class="radio__control"></span><img id="player_img_11" src="imgs/avatars/avatar11.gif" height="60vw">
+        </span>
+    </label>
  or like 
- <input type="radio" id="player12" name="player_avatar" value="imgs/avatars/avatar12.gif">
- <label for="player12"> <img id="player_img_12" src="imgs/avatars/avatar12.gif" height="70px"></label>
-.
-</form>    
-You can press 
-            <button id="gotostart" onclick="storeName()">start</button>
-            when you are ready. 
+ <label class="radio"for="player12"> 
+    <span class="radio__input">
+     <input class="avatar"type="radio" id="player12" name="player_avatar" value="imgs/avatars/avatar12.gif">
+     <span class="radio__control"></span><img id="player_img_12" src="imgs/avatars/avatar12.gif" height="60vw">
+     </span>
+    </label>
+
+</form>   <div class="line3"></div> 
+
+<span class="special1">you</span> can press 
+            <button id="gotostart" onclick="storeName()">START</button>
+            when you are ready <div class="line4"></div> 
     </div>
 
     
diff --git a/tree/park.css b/tree/park.css
index 283e5da..e502d76 100644
--- a/tree/park.css
+++ b/tree/park.css
@@ -1,3 +1,39 @@
+@font-face {
+    font-family: sinistre;
+    src: url(fonts/Sinistre-S†Caroline.otf);
+}
+@font-face {
+    font-family: sinistre;
+    src: url(fonts/Sinistre-S†Caroline.woff),
+    url(fonts/Sinistre-S†Caroline.otf);
+}
+@font-face {
+    font-family: jolybolditalic;
+    src: url(fonts/JolyDisplay-BoldDisplayItalic.woff),
+    url(fonts/JolyDisplay-BoldDisplayItalic.otf);
+}
+
+@font-face {
+    font-family: jolyregularitalic;
+    src: url(fonts/JolyDisplay-RegularDisplayItalic.woff),
+    url(fonts/JolyDisplay-RegularDisplayItalic.otf);
+}
+@font-face {
+    font-family: jolyregular;
+    src: url(fonts/JolyDisplay-RegularDisplay.woff),
+    url(fonts/JolyDisplay-RegularDisplay.otf);
+}
+
+@font-face {
+    font-family: jolyheavyitalic;
+    src: url(fonts/JolyDisplay-HeavyDisplayItalic.woff),
+    url(fonts/JolyDisplay-HeavyDisplayItalic.otf);
+}
+
+ body {
+     font-family: jolyregular;
+     font-size: 2vw;
+ }
 
 #groundline {
     position: fixed;
@@ -8,37 +44,127 @@
 }
 
 
-p.text_container {
+.text_container {
     bottom: 3%;
     left:3%;
     right:3%;
     position:fixed;
     /*border: 1px solid;*/
-    font-size: 1.5vw;
     margin-block-start: 1em;
     margin-block-end: 1em;
     margin-inline-start: 1em;
     margin-inline-end: 1em;
     
 }
+#player_name{
+    font-family: jolybolditalic;
+}
 
-#newspaper_index{
+#newspaper{
     position:fixed;
    /* border: solid black 2px;*/
-    left:15%;
+    left:20%;
     top:10%;
-    background-color: white;
+    bottom:25%;
+    right:20%;
+    font-family: sinistre;
     z-index:30;
-    box-shadow: 10px 10px 15px black;
-    max-width: 30%;
-    font-size: 1vw;
+    font-size: 1.25vw;
+    max-height:80vw;  
+    border: 1px solid black;
+    -webkit-box-shadow: 10px 10px 0px 0px rgba(0,0,0,1);
+    -moz-box-shadow: 10px 10px 0px 0px rgba(0,0,0,1);
+    box-shadow: 10px 10px 0px 0px rgba(0,0,0,1);
 }
-.index_content{
-    margin: 5% 5% 5% 5% ;
 
 
+.left_page{
+    float:left;
+    max-width: 50%;
+    height: 100%;
+    background: linear-gradient(90deg, white  95%, black 100%);
 }
 
+.index, .school1 , .school2, .school3,.school4, .school5  {
+    padding: 5%;
+}
+
+.right_page{
+    float:right;
+    max-width: 50%;
+    height: 100%;
+    background: linear-gradient(270deg, white 90%,black 100%);
+
+}
+
+#arrow_go1, #arrow_go2 {
+    bottom:2%;
+    right:2%;
+    position:absolute;
+}
+#arrow_back1, #arrow_back2 {
+    bottom:2%;
+    left:2%;
+    position:absolute;
+}
+
+
+/*baloons */
+#baloon1 {
+    width: 20vw;
+    height: 4vw;
+    border:1px solid black;
+    background:white;
+    border-radius: 100vw;
+    font-size: 1vw;
+    text-align: center;
+    left: 8%;
+    top:62%;
+    position:absolute;
+    z-index: 50;
+  }
+  #baloon2 {
+    width: 20vw;
+    height: 4vw;
+    border:1px solid black;
+    background:white;
+    border-radius: 100vw;
+    font-size: 1vw;
+    text-align: center;
+    right: 8%;
+    top:55%;
+    position:absolute;
+    z-index: 50;
+  }
+  #baloon3 {
+    width: 20vw;
+    height: 4vw;
+    border:1px solid black;
+    background:white;
+    border-radius: 100vw;
+    font-size: 1vw;
+    text-align: center;
+    left: 15%;
+    top:5%;
+    position:absolute;
+    z-index: 50;
+  }
+  #baloon4 {
+    width: 20vw;
+    height: 4vw;
+    border:1px solid black;
+    background:white;
+    border-radius: 100vw;
+    font-size: 1vw;
+    text-align: center;
+    right: 8%;
+    top:45%;
+    position:absolute;
+    z-index: 50;
+  }
+
+
+
 /*images*/ 
 
 #player_img {
@@ -92,7 +218,7 @@ p.text_container {
     left: 25%;
     position: fixed;
 }
-#newspaper {
+#newspaperimg {
     bottom: 38%;
     left: 25%;
     position: fixed;
diff --git a/tree/park.html b/tree/park.html
index 65c3f4c..c25b0a3 100644
--- a/tree/park.html
+++ b/tree/park.html
@@ -9,23 +9,86 @@
     
 </head>
 <body>
-    <!--<div id="groundline"></div>-->
-    <div id="newspaper_index" style="display: none;">
-      <div class="index_content">
-        Juicy Local News<br><br>
-        News from the school:<br>
-        -----Our annual trip to the Spring River National Park <br><br>
-        suspected food poisoning at primary school 
-        *<br>
-        *<br>
-        *<br>
-        *<br>
-        *<br>
-        *<br>
-
-
-
-      </div>
+<!--baloons  -->
+<div class="comment1stpage"id="baloon1" style="display: none;">
+  <p class="text_baloon1">
+  It looks like the previous owner of the newspaper made some annotations
+  </p>
+</div>
+<div class="comment1stpage"id="baloon2" style="display: none;">
+  <p class="text_baloon1"></p>
+  Who can it be?
+</p>
+</div>
+
+<div class="comment2stpage"id="baloon3" style="display: none;">
+  <p class="text_baloon3">
+    Amanda often volunteers for the cat shelter.<br>
+    Can this be the reason why she is late?
+  </p>
+</div>
+<div class="comment2stpage"id="baloon4" style="display: none;">
+  <p class="text_baloon4"></p>
+  I hope Amanda will arrive soon, <br>
+  you still have to purchase the tickets!
+</p>
+</div>
+
+ <!--newspaper pages -->
+    <div id="newspaper" style="display: none;">
+        <div class="left_page">
+            <div class="index">
+              Juicy Local Stories <br>
+              /from the pleasant valley 
+              <br>
+              1. From the Pleasant Valley Elementary School: An educational trip surrounded by nature 
+              by the School Administration <br>
+              2. Sick and tired at the canteen: Suspected food poisoning at Pleasant Valley Elementary School by N. <br>
+              3. Pleasant Valley Elementary School's trip: where are the children? by N. <br>
+              4. Breaking news: Mysterious disappearance at the city-run Cat Shelter by Juicy Local Stories editor <br>
+              5. Pleasant valley is showing excitement for the opening of the concert season by Pleasant Valley's major
+            </div>
+            <div class="school2" style="display:none;">
+              Sick and tired at the canteen: Suspected food poisoning at Pleasant Valley Elementary School<br>
+              by N. <br>
+              The situation of the local elementary school's canteen is starting to raise some serious concerns after some suspected food poisoning episodes occurred. Although the school's administration and its food provider --the Montebianco Food Enterprise-- already denied all charges some parents are not convinced by the declarations, asking for more clarity and controls over the food served at the canteen. One of them is Angela G., mother of a 9 years old child who experienced nausea and sickness since the beginning of the school year. Other parents are concerned about their children who often look distant and tired. 
+              <div id="arrow_back1">←</div>
+            </div>
+          <div class="school4" style="display:none;">
+            Breaking news: Mysterious disappearance at the city-run cat shelter<br>
+            The notice has been sent this early morning by a group of volunteers who were visiting the shelter to feed the cats.  At their arrival at the place, they only found empty kennels: all the guests of the shelter seem to have disappeared mysteriously.
+            Our editorial staff is kindly asking whoever has information regarding this occurrence to contact the local police department or to get in reach with the cat shelter's direction. 
+            <div id="arrow_back2">←</div>
+          </div>
+
+        </div>
+        
+        <div class="right_page">
+         
+            <div class="school1">
+              From the Pleasant Valley Elementary School: An educational trip surrounded by nature<br>
+              by <br>
+              Pleasant Valley Elementary School Administration <br>
+              On behalf of all the staff, I am happy to announce that our annual educational trip is finally taking place. Teachers and students are participating in a three days camping experience surrounded by the beauties of the Spring River National Park, a beautiful and uncontaminated oasis off the beaten tourist track. The location has been appointed by our team after evaluating its suitability for the didactic activities planned for the weekend. Yesterday morning the participants left Pleasant Valley with a private water bus leaving from the river bank. The staff is kindly asking the parents of the participants to welcome back their children at the same location on Sunday at 18 pm.
+              <div id="arrow_go1">→</div>
+            </div>
+            <div class="school3" style="display:none;">
+              Pleasant Valley Elementary School's trip: where are the children?<br>
+              by N. <br>
+            This year, the Pleasant Valley Elementary School announced, after 14 years, the change of the location of their annual educational trip. Yesterday, the students and the school's staff left for the first time for the Spring River National Park. The site, described by the school's administration as an unspoiled natural oasis on the river bank, is not appearing on any map, and no official information regarding the place or how to reach it is available. I am hoping that the school will soon shed light on this mysterious lack of information. 
+            <div id="arrow_go2">→</div>
+            </div>
+          <div class="school5" style="display:none;">
+            Pleasant valley is showing excitement for the opening of the concert season<br> 
+            by Pleasant valley's major <br>
+            Tonight the Pleasant Valley's arena will be happy to welcome the singer and performer Avril Lavigne who will open the new season of concerts. Tickets are still available at the town hall. 
+            You were supposed to go to the concert with Amanda tonight. Probably she went to take the tickets before the meeting and she got stuck in the queue. Maybe is good to wait for her a bit longer. 
+          </div>
+
+        
+        </div>
+
+
     </div>
 
     <div id="player_img"></div>
@@ -38,13 +101,23 @@
     <img id="fountain" src="imgs/park/pond.gif" height="80px">
     <img id="sun" src="imgs/park/sun1.gif" height="10%">
 
-    <img id="newspaper" src="imgs/park/newspaper2.gif" height="7%">
+    <img id="newspaperimg" src="imgs/park/newspaper2.gif" height="7%">
     <img id="flower1" src="imgs/park/flower1.gif" height="5%">
     <img id="flower2" src="imgs/park/flower2.gif" height="7%">
     <!--<img id="grass" src="imgs/park/grass.gif">-->
 
-    <p class="text_container"> Hello <span id="player_name"> </span>. It's Saturday morning. You are at the park waiting for your friend Amanda. She seems to be really late. 
-    You spot a copy of today's newspaper on the bench close to you. Maybe you want to <button id="open_newspaper_index">give it a read</button>. You can <a href="1_walk.html">go for a little walk</a> or just <a href="1_amanda.html">wait for Amanda</a> if you feel like it. </p>
+    <div class="text_container"> 
+    <div class="message1">
+    Hello <span id="player_name"> </span> . It's Saturday morning. You are at the park waiting for your friend Amanda. She seems to be really late. 
+    You spot a copy of today's newspaper on the bench close to you. Maybe you want to <button id="open_newspaper_index">give it a read</button>. You can also <a href="1_walk.html">go for a little walk</a> or just <a href="1_amanda.html">wait for Amanda</a>. 
+    </div>
+    <div class="message2" style="display:none;">
+      The situation at the school seems to be getting quite dramatic. The person who left the annotated newspaper cannot be too far. Look for them in the park. 
+    </div>
+    <div class="message3" style="display:none;">
+      You can try to look for Amanda at the cat shelter. It can also be that she already went to purchase the tickets but she got stuck in the queue. It might be good to wait for her a bit longer. 
+    </div>
+  </div>
 
 
 <script src="jquery.min.js"></script>
@@ -59,10 +132,64 @@
     //get player name from local storage
     document.querySelector('#player_name').innerHTML =localStorage.playerName;
 
+    //newspaper pages
+
     $("#open_newspaper_index").click (function(){
-      $("#newspaper_index").toggle();
+      $("#newspaper").toggle();
     });
 
+    $("#arrow_go1").click (function(){
+      $(".index").hide();
+      $(".school1").hide();
+      $(".message1").hide();
+      $(".school2").show();
+      $(".school3").show();
+      $("#baloon1").show();
+      $("#baloon2").show();
+      $(".message2").show();
+    });
+
+    $("#arrow_back1").click (function(){
+      $("#baloon1").hide();
+      $("#baloon2").hide();
+      $(".school2").hide();
+      $(".message2").hide();
+      $(".school3").hide();
+      $("#baloon3").hide();
+      $("#baloon4").hide();
+      $(".index").show();
+      $(".school1").show();
+      $(".message1").show();
+    });
+
+    $("#arrow_go2").click (function(){
+      $(".school2").hide();
+      $(".school3").hide();
+      $("#baloon1").hide();
+      $("#baloon2").hide();
+      $(".message2").hide();
+      $(".school4").show();
+      $(".school5").show();
+      $("#baloon3").show();
+      $("#baloon4").show();
+      $(".message3").show();
+    });
+
+    $("#arrow_back2").click (function(){
+      $(".school4").hide();
+      $(".school5").hide();
+      $("#baloon3").hide();
+      $("#baloon4").hide();
+      $(".message3").hide();
+      $(".school2").show();
+      $(".school3").show();
+      $("#baloon1").show();
+      $("#baloon2").show();
+      $(".message2").show();
+    });
+    
+
+
  </script>
     
 <script type="text/javascript" src="index.js" ></script>