From 15d694bbb41289d9681893c7f8376c7936ef4ad8 Mon Sep 17 00:00:00 2001
From: Rory Healy <roryihealy@outlook.com>
Date: Wed, 19 Apr 2023 19:28:20 +1000
Subject: [PATCH] Add page navigation

---
 credits                 |   1 +
 index.html              |   8 ++
 main.js                 |  17 ++++
 public/images/arrow.svg | 182 ++++++++++++++++++++++++++++++++++++++++
 styles.css              |  47 ++++++++++-
 5 files changed, 251 insertions(+), 4 deletions(-)
 create mode 100644 public/images/arrow.svg

diff --git a/credits b/credits
index 993729f..c414a03 100644
--- a/credits
+++ b/credits
@@ -6,3 +6,4 @@ Icons:
  - square by Nawicon from <a href="https://thenounproject.com/browse/icons/term/square/" target="_blank" title="square Icons">Noun Project</a>
  - triangle by Nawicon from <a href="https://thenounproject.com/browse/icons/term/triangle/" target="_blank" title="triangle Icons">Noun Project</a
  - headphones by Maxim Kulikov from <a href="https://thenounproject.com/browse/icons/term/headphones/" target="_blank" title="Headphones Icons">Noun Project</a>
+ - arrow by iconcheese from <a href="https://thenounproject.com/browse/icons/term/arrow/" target="_blank" title="Arrow Icons">Noun Project</a>
\ No newline at end of file
diff --git a/index.html b/index.html
index 840114f..f080821 100644
--- a/index.html
+++ b/index.html
@@ -16,6 +16,14 @@
                 <br />
                 <p class="headphonesOff">Headphones recommended</p>
             </section>
+            <section class="navigationOff">
+                <button class="arrowButton" id="arrowLeft" onclick="previousPage()">
+                    <img class="arrowImage" src="public/images/arrow.svg" style="transform: rotate(180deg);">
+                </button>
+                <button class="arrowButton" if="arrowRight" onclick="nextPage()">
+                    <img class="arrowImage" src="public/images/arrow.svg">
+                </button>
+            </section>
         </section>
     </main>
     <footer>
diff --git a/main.js b/main.js
index 4d6392e..04e8e11 100644
--- a/main.js
+++ b/main.js
@@ -1,6 +1,8 @@
 const backgroundAudio = document.getElementById("backgroundAudio");
 const playPauseButton = document.getElementById("playPause");
 let audioPlaying = false;
+let currentPage = 0;
+document.getElementById('arrowLeft').style.opacity = 0;
 
 const playPauseAudio = () => {
   if (audioPlaying === true) {
@@ -47,6 +49,21 @@ const begin = () => {
       element.style.display = 'none';
     }
     document.querySelector('#beginOff').style.display = 'none';
+    document.querySelector('.navigationOff').className = 'navigationOn';
     playPauseAudio()
   }, 6500);
 };
+
+const previousPage = () => {
+  currentPage -= 1;
+  if (currentPage === 0) {
+    document.getElementById('arrowLeft').style.opacity = 0;
+  }
+}
+
+const nextPage = () => {
+  currentPage += 1;
+  if (currentPage === 1) {
+    document.getElementById('arrowLeft').style.opacity = 1;
+  }
+}
diff --git a/public/images/arrow.svg b/public/images/arrow.svg
new file mode 100644
index 0000000..8877940
--- /dev/null
+++ b/public/images/arrow.svg
@@ -0,0 +1,182 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   width="526pt"
+   height="239pt"
+   version="1.1"
+   viewBox="0 0 526 239"
+   id="svg142"
+   sodipodi:docname="arrow.svg"
+   inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview144"
+     pagecolor="#505050"
+     bordercolor="#eeeeee"
+     borderopacity="1"
+     inkscape:showpageshadow="0"
+     inkscape:pageopacity="0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#505050"
+     inkscape:document-units="pt"
+     showgrid="false"
+     showguides="false"
+     inkscape:zoom="1.1003571"
+     inkscape:cx="276.72835"
+     inkscape:cy="428.04286"
+     inkscape:window-width="2560"
+     inkscape:window-height="1414"
+     inkscape:window-x="1920"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg142" />
+  <defs
+     id="defs62">
+    <symbol
+       id="t"
+       overflow="visible">
+      <path
+         d="m 20.844,-1.25 c -1.0742,0.5625 -2.1953,0.98438 -3.3594,1.2656 -1.168,0.28125 -2.3828,0.42188 -3.6406,0.42188 -3.7812,0 -6.7773,-1.0508 -8.9844,-3.1562 -2.2109,-2.1133 -3.3125,-4.9766 -3.3125,-8.5938 0,-3.625 1.1016,-6.4922 3.3125,-8.6094 2.207,-2.1133 5.2031,-3.1719 8.9844,-3.1719 1.2578,0 2.4727,0.14844 3.6406,0.4375 1.1641,0.28125 2.2852,0.69922 3.3594,1.25 v 4.7031 c -1.0859,-0.73828 -2.1523,-1.2812 -3.2031,-1.625 -1.0547,-0.34375 -2.1641,-0.51562 -3.3281,-0.51562 -2.0859,0 -3.7266,0.66797 -4.9219,2 -1.1992,1.3359 -1.7969,3.1797 -1.7969,5.5312 0,2.3359 0.59766,4.1719 1.7969,5.5156 1.1953,1.3359 2.8359,2 4.9219,2 1.1641,0 2.2734,-0.17188 3.3281,-0.51562 1.0508,-0.34375 2.1172,-0.88281 3.2031,-1.625 z"
+         id="path2" />
+    </symbol>
+    <symbol
+       id="d"
+       overflow="visible">
+      <path
+         d="m 15.25,-12.375 c -0.48047,-0.22656 -0.95312,-0.39453 -1.4219,-0.5 -0.46875,-0.10156 -0.94531,-0.15625 -1.4219,-0.15625 -1.3984,0 -2.4766,0.44922 -3.2344,1.3438 -0.75,0.89844 -1.125,2.1797 -1.125,3.8438 V 1.5e-4 H 2.6093 v -17.016 h 5.4375 v 2.7969 c 0.69531,-1.1133 1.5,-1.9258 2.4062,-2.4375 0.90625,-0.50781 1.9922,-0.76562 3.2656,-0.76562 0.17578,0 0.36719,0.01172 0.57812,0.03125 0.21875,0.01172 0.53125,0.04297 0.9375,0.09375 z"
+         id="path5" />
+    </symbol>
+    <symbol
+       id="a"
+       overflow="visible">
+      <path
+         d="M 19.594,-8.5469 V -7 H 6.875 c 0.13281,1.2734 0.59766,2.2305 1.3906,2.875 0.78906,0.63672 1.8945,0.95312 3.3125,0.95312 1.1445,0 2.3164,-0.16406 3.5156,-0.5 1.1953,-0.34375 2.4297,-0.85938 3.7031,-1.5469 v 4.1875 c -1.293,0.49219 -2.5859,0.85547 -3.875,1.0938 -1.2812,0.25 -2.5625,0.375 -3.8438,0.375 -3.0859,0 -5.4805,-0.78125 -7.1875,-2.3438 -1.6992,-1.5625 -2.5469,-3.7539 -2.5469,-6.5781 0,-2.7812 0.83203,-4.9609 2.5,-6.5469 1.6758,-1.5938 3.9844,-2.3906 6.9219,-2.3906 2.6758,0 4.8164,0.80859 6.4219,2.4219 1.6016,1.6055 2.4062,3.7578 2.4062,6.4531 z m -5.5938,-1.8125 c 0,-1.0312 -0.30469,-1.8633 -0.90625,-2.5 -0.59375,-0.63281 -1.3828,-0.95312 -2.3594,-0.95312 -1.0547,0 -1.9062,0.29688 -2.5625,0.89062 -0.6563,0.59374 -1.0703,1.4492 -1.2344,2.5625 z"
+         id="path8" />
+    </symbol>
+    <symbol
+       id="l"
+       overflow="visible">
+      <path
+         d="m 10.234,-7.6562 c -1.1367,0 -1.9922,0.19531 -2.5625,0.57812 -0.5625,0.38672 -0.84375,0.95312 -0.84375,1.7031 0,0.6875 0.22656,1.2305 0.6875,1.625 0.45703,0.38672 1.0977,0.57812 1.9219,0.57812 1.0195,0 1.8789,-0.36328 2.5781,-1.0938 0.69531,-0.73828 1.0469,-1.6602 1.0469,-2.7656 v -0.625 z m 8.3125,-2.0469 V 0 h -5.4844 v -2.5156 c -0.73047,1.0312 -1.5547,1.7812 -2.4688,2.25 -0.90625,0.46875 -2.0117,0.70312 -3.3125,0.70312 -1.7617,0 -3.1953,-0.50781 -4.2969,-1.5312 -1.0938,-1.0312 -1.6406,-2.3672 -1.6406,-4.0156 0,-1.9883 0.67969,-3.4453 2.0469,-4.375 1.375,-0.9375 3.5312,-1.4062 6.4688,-1.4062 h 3.2031 v -0.42188 c 0,-0.86328 -0.33984,-1.4922 -1.0156,-1.8906 -0.67969,-0.40625 -1.7344,-0.60938 -3.1719,-0.60938 -1.168,0 -2.2578,0.12109 -3.2656,0.35938 -1,0.23047 -1.9297,0.57812 -2.7812,1.0469 v -4.1562 c 1.1641,-0.28125 2.332,-0.49219 3.5,-0.64062 1.1758,-0.14453 2.3516,-0.21875 3.5312,-0.21875 3.0703,0 5.2852,0.60547 6.6406,1.8125 1.3633,1.2109 2.0469,3.1797 2.0469,5.9062 z"
+         id="path11" />
+    </symbol>
+    <symbol
+       id="c"
+       overflow="visible">
+      <path
+         d="m 8.5469,-21.844 v 4.8281 h 5.6094 v 3.8906 H 8.5469 v 7.2188 c 0,0.79297 0.15625,1.3281 0.46875,1.6094 0.32031,0.27344 0.94531,0.40625 1.875,0.40625 h 2.7969 v 3.8906 h -4.6719 c -2.1484,0 -3.668,-0.44531 -4.5625,-1.3438 -0.89844,-0.89453 -1.3438,-2.4141 -1.3438,-4.5625 v -7.2188 h -2.7031 v -3.8906 h 2.7031 v -4.8281 z"
+         id="path14" />
+    </symbol>
+    <symbol
+       id="k"
+       overflow="visible">
+      <path
+         d="m 14.188,-14.516 v -9.125 h 5.4688 V 0 H 14.188 v -2.4531 c -0.75,1 -1.5781,1.7344 -2.4844,2.2031 -0.89844,0.45703 -1.9375,0.6875 -3.125,0.6875 -2.0938,0 -3.8203,-0.83203 -5.1719,-2.5 -1.3438,-1.6641 -2.0156,-3.8047 -2.0156,-6.4219 0,-2.625 0.67188,-4.7695 2.0156,-6.4375 1.3516,-1.6641 3.0781,-2.5 5.1719,-2.5 1.1758,0 2.2188,0.23438 3.125,0.70312 0.9062,0.46874 1.7344,1.2031 2.4844,2.2031 z m -3.5781,11 c 1.1562,0 2.0391,-0.42188 2.6562,-1.2656 0.61328,-0.85156 0.92188,-2.0859 0.92188,-3.7031 0,-1.625 -0.30859,-2.8594 -0.92188,-3.7031 -0.61719,-0.85156 -1.5,-1.2812 -2.6562,-1.2812 -1.1562,0 -2.043,0.42969 -2.6562,1.2812 -0.61719,0.84375 -0.92188,2.0781 -0.92188,3.7031 0,1.6172 0.30469,2.8516 0.92188,3.7031 0.61328,0.84375 1.5,1.2656 2.6562,1.2656 z"
+         id="path17" />
+    </symbol>
+    <symbol
+       id="j"
+       overflow="visible">
+      <path
+         d="m 11.672,-3.5156 c 1.1562,0 2.0391,-0.42188 2.6562,-1.2656 0.61328,-0.85156 0.92188,-2.0859 0.92188,-3.7031 0,-1.625 -0.30859,-2.8594 -0.92188,-3.7031 -0.61719,-0.85156 -1.5,-1.2812 -2.6562,-1.2812 -1.168,0 -2.0625,0.42969 -2.6875,1.2812 -0.625,0.85547 -0.9375,2.0898 -0.9375,3.7031 0,1.6055 0.3125,2.8359 0.9375,3.6875 0.625,0.85547 1.5195,1.2812 2.6875,1.2812 z m -3.625,-11 c 0.75,-1 1.5781,-1.7344 2.4844,-2.2031 0.91406,-0.46875 1.9688,-0.70312 3.1562,-0.70312 2.0938,0 3.8125,0.83594 5.1562,2.5 1.3516,1.668 2.0312,3.8125 2.0312,6.4375 0,2.6172 -0.67969,4.7578 -2.0312,6.4219 -1.3438,1.668 -3.0625,2.5 -5.1562,2.5 -1.1875,0 -2.2422,-0.23438 -3.1562,-0.70312 C 9.62515,-0.73429 8.797,-1.46084 8.047,-2.45304 V 6e-5 H 2.6095 v -23.641 H 8.047 Z"
+         id="path20" />
+    </symbol>
+    <symbol
+       id="i"
+       overflow="visible">
+      <path
+         d="m 0.375,-17.016 h 5.4375 l 4.5781,11.547 3.8906,-11.547 h 5.4375 L 12.5625,1.609 C 11.84375,3.5035 11.0039,4.8278 10.0469,5.5778 9.08596,6.33561 7.8281,6.7184 6.2657,6.7184 H 3.1095 V 3.1403 h 1.7031 c 0.92578,0 1.5977,-0.14844 2.0156,-0.4375 C 7.24226,2.40983 7.57039,1.88249 7.81258,1.1247 L 7.9532,0.65595 Z"
+         id="path23" />
+    </symbol>
+    <symbol
+       id="h"
+       overflow="visible">
+      <path
+         d="M 2.6094,-17.016 H 8.0469 V 0 H 2.6094 Z m 0,-6.625 h 5.4375 v 4.4375 H 2.6094 Z"
+         id="path26" />
+    </symbol>
+    <symbol
+       id="e"
+       overflow="visible">
+      <path
+         d="m 16.359,-16.484 v 4.4375 c -0.74219,-0.50781 -1.4844,-0.88281 -2.2344,-1.125 -0.74219,-0.23828 -1.5117,-0.35938 -2.3125,-0.35938 -1.5117,0 -2.6953,0.44531 -3.5469,1.3281 -0.84375,0.88672 -1.2656,2.125 -1.2656,3.7188 0,1.5859 0.42188,2.8203 1.2656,3.7031 0.85156,0.88672 2.0352,1.3281 3.5469,1.3281 0.85156,0 1.6602,-0.125 2.4219,-0.375 0.76953,-0.25 1.4766,-0.625 2.125,-1.125 v 4.4531 c -0.85547,0.3125 -1.7188,0.54688 -2.5938,0.70312 -0.875,0.15624 -1.75,0.23438 -2.625,0.23438 -3.0742,0 -5.4766,-0.78516 -7.2031,-2.3594 -1.7305,-1.5703 -2.5938,-3.7578 -2.5938,-6.5625 0,-2.8125 0.86328,-5.0039 2.5938,-6.5781 1.7266,-1.5703 4.1289,-2.3594 7.2031,-2.3594 0.88281,0 1.7578,0.07813 2.625,0.23438 0.86328,0.15625 1.7266,0.39062 2.5938,0.70312 z"
+         id="path29" />
+    </symbol>
+    <symbol
+       id="b"
+       overflow="visible">
+      <path
+         d="m 10.703,-13.531 c -1.1992,0 -2.1172,0.43359 -2.75,1.2969 -0.63672,0.86719 -0.95312,2.1172 -0.95312,3.75 0,1.625 0.31641,2.8711 0.95312,3.7344 0.63281,0.86719 1.5508,1.2969 2.75,1.2969 1.1875,0 2.0938,-0.42969 2.7188,-1.2969 0.63281,-0.86328 0.95312,-2.1094 0.95312,-3.7344 0,-1.6328 -0.32031,-2.8828 -0.95312,-3.75 -0.625,-0.86328 -1.5312,-1.2969 -2.7188,-1.2969 z m 0,-3.8906 c 2.9258,0 5.2109,0.79297 6.8594,2.375 1.6445,1.5742 2.4688,3.7617 2.4688,6.5625 0,2.793 -0.82422,4.9805 -2.4688,6.5625 -1.6484,1.5742 -3.9336,2.3594 -6.8594,2.3594 -2.9375,0 -5.2344,-0.78516 -6.8906,-2.3594 -1.6484,-1.582 -2.4688,-3.7695 -2.4688,-6.5625 0,-2.8008 0.82031,-4.9883 2.4688,-6.5625 1.6562,-1.582 3.9531,-2.375 6.8906,-2.375 z"
+         id="path32" />
+    </symbol>
+    <symbol
+       id="g"
+       overflow="visible">
+      <path
+         d="M 19.719,-10.359 V 0 h -5.4688 v -7.9219 c 0,-1.4688 -0.03906,-2.4766 -0.10938,-3.0312 -0.0625,-0.5625 -0.17188,-0.97656 -0.32812,-1.25 -0.21875,-0.35156 -0.51172,-0.62891 -0.875,-0.82812 -0.36719,-0.19531 -0.77734,-0.29688 -1.2344,-0.29688 -1.1367,0 -2.0312,0.44531 -2.6875,1.3281 -0.64844,0.875 -0.96875,2.0859 -0.96875,3.625 V 0 h -5.4375 v -17.016 h 5.4375 v 2.5 c 0.82031,-1 1.6914,-1.7344 2.6094,-2.2031 0.92578,-0.46875 1.9453,-0.70312 3.0625,-0.70312 1.957,0 3.4453,0.60547 4.4688,1.8125 1.0195,1.1992 1.5312,2.9492 1.5312,5.25 z"
+         id="path35" />
+    </symbol>
+    <symbol
+       id="f"
+       overflow="visible">
+      <path
+         d="M 19.719,-10.359 V 0 h -5.4688 v -7.9062 c 0,-1.4766 -0.03906,-2.4922 -0.10938,-3.0469 -0.0625,-0.5625 -0.17188,-0.97656 -0.32812,-1.25 -0.21875,-0.35156 -0.51172,-0.62891 -0.875,-0.82812 -0.36719,-0.19531 -0.77734,-0.29688 -1.2344,-0.29688 -1.1367,0 -2.0312,0.44531 -2.6875,1.3281 -0.64844,0.875 -0.96875,2.0859 -0.96875,3.625 V 0 h -5.4375 v -23.641 h 5.4375 v 9.125 c 0.82031,-1 1.6914,-1.7344 2.6094,-2.2031 0.92578,-0.46875 1.9453,-0.70312 3.0625,-0.70312 1.957,0 3.4453,0.60547 4.4688,1.8125 1.0195,1.1992 1.5312,2.9492 1.5312,5.25 z"
+         id="path38" />
+    </symbol>
+    <symbol
+       id="s"
+       overflow="visible">
+      <path
+         d="m 15.906,-16.484 v 4.1406 c -1.168,-0.48828 -2.293,-0.85156 -3.375,-1.0938 -1.0859,-0.25 -2.1055,-0.375 -3.0625,-0.375 -1.043,0 -1.8125,0.13281 -2.3125,0.39062 -0.5,0.26172 -0.75,0.65625 -0.75,1.1875 0,0.4375 0.1875,0.77734 0.5625,1.0156 0.38281,0.23047 1.0664,0.40234 2.0469,0.51562 l 0.96875,0.125 c 2.7812,0.35547 4.6484,0.9375 5.6094,1.75 0.96875,0.8125 1.4531,2.0859 1.4531,3.8125 0,1.8125 -0.67188,3.1797 -2.0156,4.0938 -1.3359,0.90625 -3.3281,1.3594 -5.9844,1.3594 -1.1172,0 -2.2773,-0.089844 -3.4844,-0.26562 -1.1992,-0.17578 -2.4297,-0.44141 -3.6875,-0.79688 v -4.125 c 1.082,0.52344 2.1914,0.91797 3.3281,1.1875 1.1328,0.26172 2.2891,0.39062 3.4688,0.39062 1.0625,0 1.8594,-0.14453 2.3906,-0.4375 0.53906,-0.30078 0.8125,-0.73828 0.8125,-1.3125 0,-0.48828 -0.1875,-0.84766 -0.5625,-1.0781 -0.36719,-0.23828 -1.1016,-0.42578 -2.2031,-0.5625 l -0.95312,-0.125 c -2.418,-0.30078 -4.1172,-0.85938 -5.0938,-1.6719 -0.96875,-0.82031 -1.4531,-2.0703 -1.4531,-3.75 0,-1.8008 0.61328,-3.1328 1.8438,-4 1.2383,-0.875 3.1328,-1.3125 5.6875,-1.3125 1,0 2.0508,0.07813 3.1562,0.23438 1.1016,0.14844 2.3047,0.38281 3.6094,0.70312 z"
+         id="path41" />
+    </symbol>
+    <symbol
+       id="r"
+       overflow="visible">
+      <path
+         d="m 13.812,-23.641 v 3.5781 h -3.0156 c -0.77344,0 -1.3086,0.14062 -1.6094,0.42188 -0.30469,0.27344 -0.45312,0.75 -0.45312,1.4375 v 1.1875 h 4.6406 v 3.8906 h -4.6406 v 13.125 h -5.4375 v -13.125 h -2.7031 v -3.8906 h 2.7031 v -1.1875 c 0,-1.8516 0.51562,-3.2227 1.5469,-4.1094 1.0312,-0.88281 2.6289,-1.3281 4.7969,-1.3281 z"
+         id="path44" />
+    </symbol>
+    <symbol
+       id="q"
+       overflow="visible">
+      <path
+         d="m 18.375,-14.188 c 0.6875,-1.0508 1.5039,-1.8516 2.4531,-2.4062 0.94531,-0.55078 1.9883,-0.82812 3.125,-0.82812 1.957,0 3.4453,0.60547 4.4688,1.8125 1.0195,1.1992 1.5312,2.9492 1.5312,5.25 v 10.359 h -5.4688 v -8.875 c 0.0078,-0.125 0.01563,-0.25781 0.01563,-0.40625 0.0078,-0.14453 0.01563,-0.34766 0.01563,-0.60938 0,-1.207 -0.17969,-2.082 -0.53125,-2.625 -0.35547,-0.53906 -0.92969,-0.8125 -1.7188,-0.8125 -1.0312,0 -1.8281,0.42969 -2.3906,1.2812 -0.5625,0.85547 -0.85547,2.0859 -0.875,3.6875 v 8.3594 h -5.4688 v -8.875 c 0,-1.8828 -0.16406,-3.0977 -0.48438,-3.6406 -0.32422,-0.53906 -0.90234,-0.8125 -1.7344,-0.8125 -1.043,0 -1.8516,0.43359 -2.4219,1.2969 -0.5625,0.85547 -0.84375,2.0742 -0.84375,3.6562 v 8.375 h -5.4688 v -17.016 h 5.4688 v 2.5 c 0.66406,-0.96875 1.4297,-1.6914 2.2969,-2.1719 0.875,-0.48828 1.832,-0.73438 2.875,-0.73438 1.1758,0 2.2109,0.28906 3.1094,0.85938 0.90625,0.5625 1.5859,1.3555 2.0469,2.375 z"
+         id="path47" />
+    </symbol>
+    <symbol
+       id="p"
+       overflow="visible">
+      <path
+         d="m 2.8594,-22.672 h 6.5312 l 8.25,15.547 v -15.547 h 5.5469 V 0 H 16.6406 L 8.4062,-15.562 V 0 H 2.8593 Z"
+         id="path50" />
+    </symbol>
+    <symbol
+       id="o"
+       overflow="visible">
+      <path
+         d="m 2.4375,-6.625 v -10.391 h 5.4688 v 1.7031 c 0,0.92969 -0.00781,2.0898 -0.015625,3.4844 -0.011719,1.3867 -0.015625,2.3125 -0.015625,2.7812 0,1.3672 0.03125,2.3516 0.09375,2.9531 0.070312,0.60547 0.19531,1.043 0.375,1.3125 0.21875,0.35547 0.50391,0.63281 0.85938,0.82812 0.36328,0.1875 0.78125,0.28125 1.25,0.28125 1.1328,0 2.0234,-0.42969 2.6719,-1.2969 0.64453,-0.875 0.96875,-2.0859 0.96875,-3.6406 v -8.4062 h 5.4375 V -3e-5 h -5.4375 v -2.4531 c -0.82422,0.99219 -1.6953,1.7188 -2.6094,2.1875 -0.91797,0.46875 -1.9297,0.70312 -3.0312,0.70312 -1.9609,0 -3.4531,-0.59766 -4.4844,-1.7969 -1.0234,-1.207 -1.5312,-2.9609 -1.5312,-5.2656 z"
+         id="path53" />
+    </symbol>
+    <symbol
+       id="n"
+       overflow="visible">
+      <path
+         d="m 2.8594,-22.672 h 9.7031 c 2.8828,0 5.0977,0.64062 6.6406,1.9219 1.5508,1.2812 2.3281,3.1055 2.3281,5.4688 0,2.375 -0.77734,4.2031 -2.3281,5.4844 -1.543,1.2812 -3.7578,1.9219 -6.6406,1.9219 H 8.7031 V 0 H 2.8593 Z m 5.8438,4.2344 v 6.3281 h 3.2344 c 1.1328,0 2.0078,-0.27344 2.625,-0.82812 0.625,-0.55078 0.9375,-1.332 0.9375,-2.3438 0,-1.0078 -0.3125,-1.7852 -0.9375,-2.3281 -0.61719,-0.55078 -1.4922,-0.82812 -2.625,-0.82812 z"
+         id="path56" />
+    </symbol>
+    <symbol
+       id="m"
+       overflow="visible">
+      <path
+         d="m 2.6094,-17.016 h 5.4375 v 16.719 c 0,2.2695 -0.54688,4.0039 -1.6406,5.2031 -1.0938,1.207 -2.6797,1.8125 -4.75,1.8125 H -1.0312 V 3.1405 h 0.9375 c 1.0312,0 1.7383,-0.23438 2.125,-0.70312 0.38281,-0.46094 0.57812,-1.3711 0.57812,-2.7344 z m 0,-6.625 h 5.4375 v 4.4375 H 2.6094 Z"
+         id="path59" />
+    </symbol>
+  </defs>
+  <path
+     d="M 526,119.5 350.38825,0 V 68.819297 L 0,68.813968 V 170.1807 H 350.37665 V 239 Z M 14.442901,153.60726 V 85.396723 H 364.81955 V 29.09608 l 132.85148,90.40258 -132.85148,90.40793 v -56.30065 z"
+     id="path64"
+     style="fill:#ffffff;stroke-width:1.2431" />
+</svg>
diff --git a/styles.css b/styles.css
index c703830..d21ecff 100644
--- a/styles.css
+++ b/styles.css
@@ -5,7 +5,7 @@
 
   --foreground-rgb: 255, 255, 255;
   --background-rgb: 10, 10, 10;
-
+  --shadow-rgb: 20, 20, 20;
   --callout-rgb: 238, 240, 241;
   --callout-border-rgb: 172, 175, 176;
   --card-rgb: 180, 185, 188;
@@ -36,7 +36,7 @@ main {
 }
 
 .centre #begin {
-  background: rgb(var(--card-rgb));
+  background-color: rgb(var(--card-rgb));
   border: 1px solid rgb(var(--card-border-rgb));
   border-radius: var(--border-radius);
   padding: 1rem 1.2rem;
@@ -115,11 +115,50 @@ footer section {
   background: none;
   border: none;
   cursor: pointer;
+  height: 60px;
+  width: 60px;
+  justify-content: center;
+  align-items: center;
+}
+
+.controlButtonOn:hover {
+  background-color: rgb(var(--shadow-rgb));
 }
 
 .controlImage {
-  height: 50px;
-  width: 50px;
+  height: 40px;
+  width: 40px;
+}
+
+.arrowButton {
+  background-color: rgb(var(--background-rgb));
+  border: 1px solid rgb(var(--background-rgb));
+  border-radius: var(--border-radius);
+  padding: 1rem 1.2rem;
+  cursor: pointer;
+}
+
+.arrowButton:hover {
+  border: 1px solid rgb(var(--shadow-rgb));
+  background-color: rgb(var(--shadow-rgb));
+}
+
+.arrowImage {
+  width: 75px;
+}
+
+.navigationOff {
+  display: none;
+}
+
+.navigationOn {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  align-items: center;
+  justify-content: center;
+  width: 30dvw;
+  position: fixed;
+  bottom: 12.5dvh;
 }
 
 /* Enable hover only on non-touch devices */