diff --git a/css/font/AldotheApache.eot b/css/font/AldotheApache.eot
new file mode 100644
index 0000000..881d9c9
Binary files /dev/null and b/css/font/AldotheApache.eot differ
diff --git a/css/font/AldotheApache.otf b/css/font/AldotheApache.otf
new file mode 100644
index 0000000..eac83ad
Binary files /dev/null and b/css/font/AldotheApache.otf differ
diff --git a/font/AldotheApache.ttf b/css/font/AldotheApache.ttf
similarity index 100%
rename from font/AldotheApache.ttf
rename to css/font/AldotheApache.ttf
diff --git a/font/AldotheApache.woff b/css/font/AldotheApache.woff
similarity index 100%
rename from font/AldotheApache.woff
rename to css/font/AldotheApache.woff
diff --git a/css/font/eyelevation6.eot b/css/font/eyelevation6.eot
new file mode 100644
index 0000000..644aec8
Binary files /dev/null and b/css/font/eyelevation6.eot differ
diff --git a/css/font/eyelevation6.otf b/css/font/eyelevation6.otf
new file mode 100644
index 0000000..e39de76
Binary files /dev/null and b/css/font/eyelevation6.otf differ
diff --git a/font/eyelevation6.ttf b/css/font/eyelevation6.ttf
similarity index 100%
rename from font/eyelevation6.ttf
rename to css/font/eyelevation6.ttf
diff --git a/font/eyelevation6.woff b/css/font/eyelevation6.woff
similarity index 100%
rename from font/eyelevation6.woff
rename to css/font/eyelevation6.woff
diff --git a/css/style.css b/css/style.css
index 35397a0..5c4e838 100644
--- a/css/style.css
+++ b/css/style.css
@@ -15,6 +15,7 @@ body {
   background-size: cover;
   text-align: center;
   color: white;
+  
 }
 
 .container-fluid {
@@ -26,6 +27,7 @@ body {
   padding: 1vw;
   width: 100vw;
   position: fixed;
+  overflow: auto;
 }
 
 h1 {
@@ -47,7 +49,7 @@ h2 {
 .outer-div {
   padding: 10px;
   display: table;
-  max-width: 700px;
+  max-width: max-content;
   align-self: center;
   max-height: 700px;
   position: relative;
@@ -57,9 +59,9 @@ h2 {
 }
 .inner-div {
   -webkit-text-fill-color: white;
-  -webkit-text-stroke-width: 2px;
+  -webkit-text-stroke-width: 1px;
   -webkit-text-stroke-color: black;
-  background-color: orange;
+  background-color: dimgray;
   opacity: 0.8;
   align-content: space-around;
   left: 40%;
@@ -70,7 +72,7 @@ h2 {
   margin: 3vw;
   size: initial;
   text-align: center;
-  max-width: 80%;
+  max-width: max-content;
   letter-spacing: 3px;
   line-height: 1.8;
   cursor: pointer;
@@ -80,22 +82,31 @@ h2 {
   position: fixed;
   left: 3vw;
   bottom: 0;
-  max-width: 50%;
+  max-width: max-content;
   text-align: justify;
   height: 60px;
   line-height: 60px;
   font-size: 10px;
 }
 
+
+
+
+
 @font-face {
-  font-family: "Aldo the Apache";
-  src: url("font/AldotheApache.woff") format("woff");
-  src: url("font/AldotheApache.ttf") format("ttf");
+  font-family: "Aldo the Apache",sans-serif;
+  src: url("css/font/AldotheApache.ttf");
+  src: url("css/font/AldotheApache.eot") format("eot"),
+    url("css/font/AldotheApache.otf") format("otf"),
+    url("css/font/AldotheApache.woff") format("woff");
+
 }
 @font-face {
-  font-family: "eyelevation6";
-  src: url("font/eyelevation6.woff") format("woff");
-  src: url("font/eyelevation6.ttf") format("ttf");
+  font-family: "eyelevation6",sans-serif;
+  src: url("css/font/eyelevation6.eot");
+  src: url("css/font/eyelevation6.ttf") format("ttf"),
+    url("css/font/eyelevation6.otf") format("otf"),
+    url("css/font/eyelevation6.woff") format("woff");
 }
 
 /* The Overlay (background) */
@@ -127,9 +138,9 @@ h2 {
 .overlay a {
   padding: 8px;
   text-decoration: none;
-  font-size: 36px;
+  font-size: 3vmax;
   color: #818181;
-  display: block; /* Display block instead of inline */
+  display: inline-flex; /* Display block instead of inline */
   transition: 0.3s; /* Transition effects on hover (color) */
 }
 
@@ -148,7 +159,7 @@ h2 {
 }
 
 /* When the height of the screen is less than 450 pixels, change the font-size of the links and position the close button again, so they don't overlap */
-@media screen and (max-width: 600px) {
+@media screen and (max-height: 450px) {
   .overlay a {
     font-size: 20px;
   }
@@ -173,14 +184,17 @@ h2 {
   display: flex;
   flex-wrap: wrap;
   flex-direction: column;
+  
 }
-i {
+.contactDetails > i {
   font-size: 3vw;
   color: white;
+  
 }
 ul {
   list-style: none;
   text-align: left;
+  width: min-content;
 }
 
 #mapContainer {
diff --git a/index.html b/index.html
index 9045fe4..b384168 100644
--- a/index.html
+++ b/index.html
@@ -20,11 +20,11 @@
 
   <div class="container-fluid">
     <div class="row">
-      <div class="col-md-4 outer-div">
+      <div class="col-sm-4 outer-div" style="font-family: 'Aldo the Apache'">
         <h1 style="font-family: 'Aldo the Apache'">Welcome</h1>
         <h2 style="font-family: 'Aldo the Apache'">to the fun side</h2>
       </div>
-      <div class="col-md-8 outer-div">
+      <div class="col-sm-8 outer-div">
         <div onclick="openNav1(TheSquare)" class="row inner-div" style="font-family: 'Aldo the Apache'">
           The Square
         </div>
diff --git a/js/particles.min.js b/js/particles.min.js
index 31db45b..57521db 100644
--- a/js/particles.min.js
+++ b/js/particles.min.js
@@ -15,7 +15,13 @@ function clamp(e, a, t) { return Math.min(Math.max(e, a), t) }
 function isInArray(e, a) { return a.indexOf(e) > -1 } var pJS = function (e, a) {
     var t = document.querySelector("#" + e + " > .particles-js-canvas-el");
     this.pJS = {
-        canvas: { el: t, w: t.offsetWidth, h: t.offsetHeight },
+        _canvas: { el: t, w: t.offsetWidth, h: t.offsetHeight },
+        get canvas() {
+            return this._canvas;
+        },
+        set canvas(value) {
+            this._canvas = value;
+        },
         particles: {
             number: { value: 400, density: { enable: !0, value_area: 800 } }, color: { value: "#fff" }, shape: {
                 type: "circle",
@@ -246,7 +252,7 @@ Object.deepExtend = function (e, a) {
     for (var t in a) a[t] && a[t].constructor && a[t].constructor === Object ? (e[t] = e[t] || {}, arguments.callee(e[t], a[t])) : e[t] = a[t];
     return e
 }, window.requestAnimFrame = function () { return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function (e) { window.setTimeout(e, 1e3 / 60) } }(), window.cancelRequestAnimFrame = function () { return window.cancelAnimationFrame || window.webkitCancelRequestAnimationFrame || window.mozCancelRequestAnimationFrame || window.oCancelRequestAnimationFrame || window.msCancelRequestAnimationFrame || clearTimeout }(), window.pJSDom = [], window.particlesJS = function (e, a) {
-    "string" != typeof e && (a = e, e = "particles-js"), e || (e = "particles-js");
+    "string" != typeof e && (a = e, e = newFunction()), e || (e = "particles-js");
     var t = document.getElementById(e), i = "particles-js-canvas-el", s = t.getElementsByClassName(i);
     if (s.length) for (; s.length > 0;)t.removeChild(s[0]); var n = document.createElement("canvas");
     n.className = i, n.style.width = "100%", n.style.height = "100%";
@@ -260,4 +266,8 @@ Object.deepExtend = function (e, a) {
             window.particlesJS(e, s), t && t()
         } else console.log("Error pJS - XMLHttpRequest status: " + i.status), console.log("Error pJS - File config not found")
     }, i.send()
-};
\ No newline at end of file
+};
+
+function newFunction() {
+    return "particles-js";
+}
diff --git a/js/script.js b/js/script.js
index f4223c2..310421f 100644
--- a/js/script.js
+++ b/js/script.js
@@ -36,7 +36,7 @@ particlesJS('particles-js',
         }
       },
       "color": {
-        "value": "#ffffff"
+        "value": "random"
       },
       "shape": {
         "type": "polygon",
@@ -59,7 +59,7 @@ particlesJS('particles-js',
         }
       },
       "size": {
-        "value": 10,
+        "value": 20,
         "random": true,
         "anim": {
           "enable": false,
@@ -81,7 +81,7 @@ particlesJS('particles-js',
         "direction": "none",
         "random": false,
         "straight": false,
-        "out_mode": "out",
+        "out_mode": "bounce",
         "attract": {
           "enable": false,
           "rotateX": 600,
@@ -117,7 +117,7 @@ particlesJS('particles-js',
           "speed": 3
         },
         "repulse": {
-          "distance": 200
+          "distance": 100
         },
         "push": {
           "particles_nb": 4