diff --git a/.gitignore b/.gitignore
index b225e97..a561af4 100644
--- a/.gitignore
+++ b/.gitignore
@@ -11,3 +11,5 @@ speak.js
 videochat
 woz
 mulan
+raya
+
diff --git a/.vscode/settings.json b/.vscode/settings.json
index f673a71..b0ec095 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -1,3 +1,4 @@
 {
-    "liveServer.settings.port": 5502
+    "liveServer.settings.port": 5503,
+    "liveServer.settings.NoBrowser": true
 }
\ No newline at end of file
diff --git a/25.gif b/25.gif
deleted file mode 100644
index d494327..0000000
Binary files a/25.gif and /dev/null differ
diff --git a/MTG/index.html b/MTG/index.html
index c87045f..b0a472b 100644
--- a/MTG/index.html
+++ b/MTG/index.html
@@ -13,16 +13,18 @@
 <meta name="theme-color" content="#4C633C">
     <title>MTG Life Counter</title>
 
-    <script defer data-domain="chrisedwards.tech" src="https://metric1.chrisedwards.tech/js/plausible.js"></script>
+    <script defer data-domain="mtg.chrisedwards.tech" src="https://metric1.chrisedwards.tech/js/plausible.js"></script>
 
     <link rel="stylesheet" href="style.css">
-
+    <link rel="stylesheet" href="/menu/menu.css">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
     <link rel="manifest" href="site.webmainfest" />
 
 </head>
 <body>
-
+    <script defer src="/menu/menu.js"></script>
+    <div id="navContainer"></div>
    <script>
     if('serviceWorker' in navigator) {
         window.addEventListiner('load', () => {
diff --git a/MTG/style.css b/MTG/style.css
index 70b5a58..63d4dbd 100644
--- a/MTG/style.css
+++ b/MTG/style.css
@@ -14,6 +14,7 @@ background: radial-gradient(circle, #792f22 0%, #4f644f 47%, rgb(108, 127, 131)
   margin: 0;
   display: flex;
   /* height: 100vh; */
+  height:100%
 
 }
 html{
@@ -178,7 +179,7 @@ color:rgb(141, 140, 140);
 
 .lifeUp{
   font-size: 7vh;
-  color: #00cc00
+  color: #00cc00;
 }
 .lifeDown{
   font-size: 7vh;
diff --git a/binary/binary.css b/binary/binary.css
index 1a3cf46..6ed1974 100644
--- a/binary/binary.css
+++ b/binary/binary.css
@@ -1,6 +1,7 @@
 body {
   background-color: #6497b1;
   font-family: "Courier Prime", monospace;
+  height: 100%;
 }
 
 #input {
diff --git a/binary/index.html b/binary/index.html
index df33571..d7cb302 100644
--- a/binary/index.html
+++ b/binary/index.html
@@ -12,14 +12,15 @@
     <link rel="icon" type="image/ico" href="../binary.ico">
     <link rel="stylesheet" type="text/css" href="binary.css" />
     <script defer data-domain="chrisedwards.tech" src="https://metric1.chrisedwards.tech/js/plausible.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">
 
 </head>
 <body>
     
 
-        <div id="nav_menu">
+        <div id="navContainer">
         </div>
-        <script src="/menu/menu.js"></script>
+        <script defer src="/menu/menu.js"></script>
         <br /><br /><br />
     
         <form id="form">
diff --git a/cetech.png b/cetech.png
new file mode 100644
index 0000000..e3a18a9
Binary files /dev/null and b/cetech.png differ
diff --git a/cetechwhite.png b/cetechwhite.png
new file mode 100644
index 0000000..509e55c
Binary files /dev/null and b/cetechwhite.png differ
diff --git a/index.html b/index.html
index 0c91110..1910947 100644
--- a/index.html
+++ b/index.html
@@ -6,6 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="stylesheet" type="text/css" href="/menu/menu.css" />
     <link rel="stylesheet" href="style.css">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">
     <link href="https://fonts.googleapis.com/css?family=Roboto+Slab" rel="stylesheet">
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
@@ -34,12 +35,10 @@
 
 </head>
 <body>
-     <nav>
-         <div id="nav_menu">
-           
-    </div>    
-   <!-- <span style="margin: auto; display:inline-block">/home/</span>    -->
-    </nav>
+  <div id="navContainer"></div>
+
+
+
     <main>
         <div id="term">
             <span id='user'>user@localhost:</span>
@@ -51,7 +50,9 @@
 
 
 
-
+<script>
+   
+</script>
     <script src="/menu/menu.js"></script>
    <script src="https://unpkg.com/typewriter-effect@latest/dist/core.js"></script>
     <script src="script.js" defer></script>
diff --git a/logo.png b/logo.png
new file mode 100644
index 0000000..f07238b
Binary files /dev/null and b/logo.png differ
diff --git a/memory/index.html b/memory/index.html
index 2332583..0db681c 100644
--- a/memory/index.html
+++ b/memory/index.html
@@ -8,6 +8,7 @@
 <link rel="stylesheet" type="text/css" href="/menu/menu.css" />
 <link rel="icon" type="image/ico" href="mem.ico">
 <script defer data-domain="chrisedwards.tech" src="https://metric1.chrisedwards.tech/js/plausible.js"></script>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">
 
 <!--<meta name="viewport" content="width=device-width, initial-scale=1"/>-->
 <style>
@@ -118,8 +119,8 @@ perspective: 1000;
 </head>
 
 <body>
-  <div id="nav_menu"></div>
-  <script src="/menu/menu.js"></script> 
+ <div id="navContainer"></div>
+  <script defer src="/menu/menu.js"></script> 
 <br />
 <br />
 <br />
diff --git a/menu/menu.css b/menu/menu.css
index 9218d0d..86d6a21 100644
--- a/menu/menu.css
+++ b/menu/menu.css
@@ -7,70 +7,17 @@
   margin: 0;
   padding: 0;
 }
-#ham{
-  background-color:#999999 ; 
-  /* margin-right: 20px;   */
-  
-  padding: 5px;
-}
-#menu{
-  background-color:white;
-  width:50px;
-  height:50px;
-  /* box-shadow: 5px 5px 2.5px #5F5F5F; */
-  /* position:relative;  */
-  display: flex;
-  align-self: center;
-  margin-top: 5px;
-  margin-left: 5px;
-  /* padding: 20px; */
-  z-index:5; 
-  border-radius: 25%;
-  /* margin-right: 5%; */
-}
-#bars, #bigx{
-  height:50px; 
-  width:50px}
-.ham-menu {
-  height:100%; 
-  width:0%;
-  display:none; 
-  border:black solid 2px;
-  /* box-shadow: 10px 10px 5px #5F5F5F */
-}
-.ham-menu2 {display:inline;border:black solid 2px;
-  /* box-shadow: 10px 10px 5px #5F5F5F; */
-  position:absolute; top:5px; left:5px; z-index:5; margin-right: 5%;}
-#ham a {color:white; text-decoration:none; z-index:10 !important; }
-#ham ul{ list-style-type: none; margin-right: 15%;}
-#ham:focus{outline-color:black; }
-#site{margin-right: 15%;}
-#bars {
-    -webkit-transition: -webkit-transform .3s ease-in-out;
-  transition: transform .3s ease-in-out;
+html{
+  height: 100%
 }
 
 
-#bigx {
-    -webkit-transition: -webkit-transform .3s ease-in-out;
-  transition: transform .3s ease-in-out;
-  z-index:11;
+.navbar-menu, .navbar-dropdown{
+  background-color:rgb(24, 24, 24) !important;
 }
-
-#body {z-index:0;
-box-sizing: border-box;
-margin: 0;
-padding: 0%;
-margin-top: 60px}
-#nav-menu{
-display: flex;
-align-self: center;
-}
-nav{
-  /* background-color: #666666; */
-  min-width: 100%;
-  height: 60px;
-  position: absolute;
-  left: 0;
-  top: 0;
+.navbar-item{
+  color: white !important;
 }
+.navbar-item:hover {
+  color: #363636 !important;
+}
\ No newline at end of file
diff --git a/menu/menu.js b/menu/menu.js
index 8cf9a46..ba9a5bf 100644
--- a/menu/menu.js
+++ b/menu/menu.js
@@ -1,52 +1,25 @@
-function slideout() {
-    if (document.getElementById("ham").className == "ham-menu") {
-        document.getElementById("ham").className = "ham-menu2";
-        document.getElementById("ham").focus();
-        document.getElementById("menu").onclick = null; // console.log("show");
-    } else if (document.getElementById("ham").className == "ham-menu2") {
-        document.getElementById("ham").className = "ham-menu";
-        document.getElementById("menu").onclick = function() {
-            slideout()
-        }; // console.log("hide");
-    }
-}
+var navString = '<nav class="navbar is-dark" role="navigation" aria-label="main navigation"> <div class="navbar-brand"> <a class="navbar-item" href="/index.html"> <img src="/cetechwhite.png" width="50" height="50"> </a> <a role="button" class="navbar-burger is-dark" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample"> <span aria-hidden="true"></span> <span aria-hidden="true"></span> <span aria-hidden="true"></span> </a> </div> <div id="navbarBasicExample" class="navbar-menu is-dark"> <div class="navbar-start is-dark"> <a class="navbar-item is-dark" href="/index.html"> Home </a> <a class="navbar-item" href="/resume/" > Resume </a> <div class="navbar-item has-dropdown is-hoverable"> <a class="navbar-link" > Games </a> <div class="navbar-dropdown"> <a class="navbar-item" href="/yatzee/"> Yatzee </a> <a class="navbar-item" href="/tictac/"> Tic Tac Toe </a> <a class="navbar-item" href="/bingo/"> Bingo </a> <a class="navbar-item" href="/memory/"> Memory </a> <a class="navbar-item" href="https://mtg.chrisedwards.tech"> MTG Life Counter </a> </div> </div> <div class="navbar-item has-dropdown is-hoverable is-dark"> <a class="navbar-link" > Ultilities </a> <div class="navbar-dropdown"> <a class="navbar-item" href="/speak"> Speak </a> <a class="navbar-item" href="/binary/"> Binary to ASCII </a> <a class="navbar-item" href="/youtube_convert/"> YouTube Converter </a> <a class="navbar-item" href="/nato/"> NATO Alpha </a> </div> </div> </div> </div> </nav>'
+document.getElementById('navContainer').innerHTML = navString;
 
+document.addEventListener('DOMContentLoaded', () => {
 
-function closemenu1() {
-    setTimeout(function() {
-        document.getElementById("ham").className = "ham-menu";
-        document.getElementById("menu").onclick = function() {
-            slideout()
-        }
-    }, 250); //console.log("off click");
-}
-var sites = [
-    ["/", "Home"],
-    ["/resume/", "Resume"],
-    ["/tictac/", "Tic Tac Touch"],
-    ["/bingo/", "Bingo!"],
-    ["/memory/", "Memory"],
-    ["/yatzee/", "Yatzee!"],
-    ["/MTG/", "MTG"],
-    ["/youtube_convert/", "Youtube Converter"],
-    ["/binary/", "Binary Converter"],
-    ["/speak/", "Speak"],
-    ["/nato/", "NATO Phonetic Alphabet"],
-    ["/rollDice", "Dice"],
-    ["/be_mine/", "Be Mine!"],
-    ["/media/Movies", "Movies"],
-    ["/media/Tv%20Shows", "Tv Shows"]
-];
-var foobar = "";
-for (i = 0; i < sites.length; i++) {
-    // console.log(i)
-    foobar += '<ul> <li><a href="' + sites[i][0] + '">' + sites[i][1] + '</a></li> <br />';
-    // console.log(foobar)
-    foobar += "</ul>"
-}
-
-//document.getElementById("ham").addEventListener('onmouseleave', function() {slideout(), alert('test')});
-var foo = '<div  id="menu" onclick="slideout()"   ><img id="bars" src="/menu/3bar.png" /></div><div id="ham" class="ham-menu"  ><img id="bars" src="/menu/x.png" onclick="slideout()"/><div id="site"></div> </div>'
-
-document.getElementById("nav_menu").innerHTML = foo;
-document.getElementById("site").innerHTML = foobar;
+    // Get all "navbar-burger" elements
+    const $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0);
+    
+    // Add a click event on each of them
+    $navbarBurgers.forEach( el => {
+      el.addEventListener('click', () => {
+    
+        // Get the target from the "data-target" attribute
+        const target = el.dataset.target;
+        const $target = document.getElementById(target);
+    
+        // Toggle the "is-active" class on both the "navbar-burger" and the "navbar-menu"
+        el.classList.toggle('is-active');
+        $target.classList.toggle('is-active');
+    
+      });
+    });
+    
+    });
+  
\ No newline at end of file
diff --git a/menu/menu.js.bak b/menu/menu.js.bak
new file mode 100644
index 0000000..8cf9a46
--- /dev/null
+++ b/menu/menu.js.bak
@@ -0,0 +1,52 @@
+function slideout() {
+    if (document.getElementById("ham").className == "ham-menu") {
+        document.getElementById("ham").className = "ham-menu2";
+        document.getElementById("ham").focus();
+        document.getElementById("menu").onclick = null; // console.log("show");
+    } else if (document.getElementById("ham").className == "ham-menu2") {
+        document.getElementById("ham").className = "ham-menu";
+        document.getElementById("menu").onclick = function() {
+            slideout()
+        }; // console.log("hide");
+    }
+}
+
+
+function closemenu1() {
+    setTimeout(function() {
+        document.getElementById("ham").className = "ham-menu";
+        document.getElementById("menu").onclick = function() {
+            slideout()
+        }
+    }, 250); //console.log("off click");
+}
+var sites = [
+    ["/", "Home"],
+    ["/resume/", "Resume"],
+    ["/tictac/", "Tic Tac Touch"],
+    ["/bingo/", "Bingo!"],
+    ["/memory/", "Memory"],
+    ["/yatzee/", "Yatzee!"],
+    ["/MTG/", "MTG"],
+    ["/youtube_convert/", "Youtube Converter"],
+    ["/binary/", "Binary Converter"],
+    ["/speak/", "Speak"],
+    ["/nato/", "NATO Phonetic Alphabet"],
+    ["/rollDice", "Dice"],
+    ["/be_mine/", "Be Mine!"],
+    ["/media/Movies", "Movies"],
+    ["/media/Tv%20Shows", "Tv Shows"]
+];
+var foobar = "";
+for (i = 0; i < sites.length; i++) {
+    // console.log(i)
+    foobar += '<ul> <li><a href="' + sites[i][0] + '">' + sites[i][1] + '</a></li> <br />';
+    // console.log(foobar)
+    foobar += "</ul>"
+}
+
+//document.getElementById("ham").addEventListener('onmouseleave', function() {slideout(), alert('test')});
+var foo = '<div  id="menu" onclick="slideout()"   ><img id="bars" src="/menu/3bar.png" /></div><div id="ham" class="ham-menu"  ><img id="bars" src="/menu/x.png" onclick="slideout()"/><div id="site"></div> </div>'
+
+document.getElementById("nav_menu").innerHTML = foo;
+document.getElementById("site").innerHTML = foobar;
diff --git a/nato/index.html b/nato/index.html
index 886c867..efac298 100644
--- a/nato/index.html
+++ b/nato/index.html
@@ -8,25 +8,26 @@
     <link rel="stylesheet" href="style.css">
     <link rel="stylesheet" type="text/css" href="/menu/menu.css" />
     <script defer data-domain="chrisedwards.tech" src="https://metric1.chrisedwards.tech/js/plausible.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">
 
 
 </head>
 <body>
     <nav>
-        <div id="nav_menu">
+        <div id="navContainer">
     </nav>
     
-    <main>
+    <main id="main">
     <h1>Nato Phonetic Alphabet</h1>
     <input  id="input" autocomplete="off" autofocus="autofocus" maxlength="100"  type="text" onkeyup="convert()">
 <div class="button">
-    <button onclick="clearInput()">Clear Input</button>
+    <button id="clear" onclick="clearInput()">Clear Input</button>
 </div>
 <div id="output"></div>
 
     </main>
 
     <script src="index.js"></script>
-    <script src="/menu/menu.js"></script>
+    <script defer src="/menu/menu.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/nato/style.css b/nato/style.css
index 0fef5fd..9ece881 100644
--- a/nato/style.css
+++ b/nato/style.css
@@ -7,6 +7,7 @@
 }
 body{
     background-color:#2d2e2e;
+    height: 100%;
 }
 h1{
     text-align: center;
@@ -19,24 +20,30 @@ h1{
     justify-content: center;
     align-items: center;    
     padding: 30px;
-}
+    background-color: #2d2e2e !important;
+border-color:#2d2e2e !important}
 #main{
+    margin-top: 7%;
     display: flex;
     justify-items: center;
     flex-direction: column;
 }
-button{
+#clear{
 font-size: 35px; margin: 3%;
 background-color:cornflowerblue;
 border-radius: 15px;
 color: white;
 padding: 5px;
+margin: auto !important;
+text-align: center !important;
 }
 #output{
     background-color: cornflowerblue;
     max-width: 60%;
+    width: 300px;
     height: 15rem;
     margin: auto;
+    margin-top: 50px;
     color: white;
     padding: 12px;
     border-radius: 15px;
diff --git a/script.js b/script.js
index ff06393..98c8e65 100644
--- a/script.js
+++ b/script.js
@@ -5,7 +5,7 @@ document.getElementById("type").scrollIntoView({behavior: "smooth", block: "end"
 var typewriter = new Typewriter(document.getElementById('type'), {
   loop: false,
   cursor: "_",
-  delay: 150,
+  delay: 120,
   // onCreateTextNode: scroll,
 });
 
@@ -35,6 +35,7 @@ typewriter
   .pasteString('<br>')
   .callFunction(scroll)
   .pasteString('<a class="link" href="/resume/">resume</a>  <a class="link" href="/yatzee/">yatzee</a>  <a class="link" href="/tictac/">tic tac touch</a><br>')
+  .callFunction(scroll)
   .pasteString('<a class="link" href="/MTG/">mtg life counter</a>  <a class="link" href="/youtube_convert/">youtube downloader</a>  <a class="link" href="/binary/">binary to ascii converter</a>')
    .pasteString('<br>')
    .callFunction(scroll)
diff --git a/speak/index.html b/speak/index.html
index 2768ebc..f9049d4 100644
--- a/speak/index.html
+++ b/speak/index.html
@@ -8,6 +8,7 @@
   <link rel="stylesheet" type="text/css" href="/menu/menu.css">
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
   <script defer data-domain="chrisedwards.tech" src="https://metric1.chrisedwards.tech/js/plausible.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">
 
   <title>Speak</title>
   <style>
@@ -18,7 +19,7 @@
 
 </head>
 <body>
-  <div id="nav_menu"></div>
+<div id="navContainer"></div>
 <main>
  
   
diff --git a/speak/style.css b/speak/style.css
index 44c084a..b097a01 100644
--- a/speak/style.css
+++ b/speak/style.css
@@ -1,5 +1,5 @@
 body {
-
+height: 100%;
 
 
 background-color: darkred;
diff --git a/speak1/index.html b/speak1/index.html
new file mode 100644
index 0000000..12f4595
--- /dev/null
+++ b/speak1/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Document</title>
+  <script defer src='https://unpkg.com/tesseract.js@v2.1.0/dist/tesseract.min.js'></script>
+  <script src="script.js" defer></script>
+</head>
+<body>
+  <video width="720" height="560" autoplay muted></video>
+  <pre data-text style="font-size: 2rem; font-family: inherit; width: 100%; white-space: pre-wrap;"></pre>
+<button id="press" onsubmit="press()">capture</button>
+</body>
+</html>
\ No newline at end of file
diff --git a/speak1/script.js b/speak1/script.js
new file mode 100644
index 0000000..d05a448
--- /dev/null
+++ b/speak1/script.js
@@ -0,0 +1,42 @@
+const video = document.querySelector("video")
+const textElem = document.querySelector("[data-text]")
+
+async function setup() {
+  const stream = await navigator.mediaDevices.getUserMedia({
+    audio: false,
+    video: {
+      facingMode: 'environment'
+    }
+  })
+  video.srcObject = stream
+
+  video.addEventListener("playing", async () => {
+    const worker = Tesseract.createWorker()
+    await worker.load()
+    await worker.loadLanguage("eng")
+    await worker.initialize("eng")
+
+    const canvas = document.createElement("canvas")
+    canvas.width = video.width
+    canvas.height = video.height
+
+    document.getElementById('press').addEventListener("click", function () {
+      canvas.getContext("2d").drawImage(video, 0, 0, video.width, video.height)
+      const {
+        data: { text },
+      } = await worker.recognize(canvas)
+
+      speechSynthesis.speak(
+        new SpeechSynthesisUtterance(text.replace(/\s/g, " "))
+      )
+
+      textElem.textContent = text
+    
+  });
+})
+ 
+
+  
+  }
+
+setup()
diff --git a/style.css b/style.css
index 943484b..82d9079 100644
--- a/style.css
+++ b/style.css
@@ -1,11 +1,12 @@
 body {
   background-color: #667788;
+  height: 100%
 }
 main {
   display: flex;
   justify-content: center;
   margin: auto;
-  margin-top: 100px;
+  margin-top: 7%;
   padding: 7px;
 }
 #term {
diff --git a/tictac/index.html b/tictac/index.html
index 335d02f..c06be60 100644
--- a/tictac/index.html
+++ b/tictac/index.html
@@ -12,15 +12,15 @@
     <title> Tic Tac Toe Touch</title>
     <script defer src="tictac.js"></script>
         <script defer data-domain="chrisedwards.tech" src="https://metric1.chrisedwards.tech/js/plausible.js"></script>
+        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">
 
     </script>
 </head>
 
 <body>
-    <div id="nav_menu">
-    </div>
-    <script src="/menu/menu.js"></script>
-    <br /><br /><br />
+    <div id="navContainer"></div>
+    <script defer src="/menu/menu.js"></script>
+
    <main>
         </br>
 
diff --git a/tictac/tictac.css b/tictac/tictac.css
index aa85f15..150fd07 100644
--- a/tictac/tictac.css
+++ b/tictac/tictac.css
@@ -1,6 +1,10 @@
+html{
+    height:100%;
+}
 body {
     background: -webkit-linear-gradient(45deg, hsla(0, 0%, 97%, 1) 0%, hsla(0, 0%, 97%, 0) 70%), -webkit-linear-gradient(315deg, hsla(0, 0%, 38%, 1) 10%, hsla(0, 0%, 38%, 0) 80%), -webkit-linear-gradient(225deg, hsla(0, 0%, 63%, 1) 10%, hsla(0, 0%, 63%, 0) 80%), -webkit-linear-gradient(135deg, hsla(0, 0%, 29%, 1) 100%, hsla(0, 0%, 29%, 0) 70%);
     background: linear-gradient(45deg, hsla(0, 0%, 97%, 1) 0%, hsla(0, 0%, 97%, 0) 70%), linear-gradient(135deg, hsla(0, 0%, 38%, 1) 10%, hsla(0, 0%, 38%, 0) 80%), linear-gradient(225deg, hsla(0, 0%, 63%, 1) 10%, hsla(0, 0%, 63%, 0) 80%), linear-gradient(315deg, hsla(0, 0%, 29%, 1) 100%, hsla(0, 0%, 29%, 0) 70%);
+    height:100%;
 }
 td{
     border: 3px solid black;
diff --git a/yatzee/index.html b/yatzee/index.html
index a12f7d0..e2f6305 100644
--- a/yatzee/index.html
+++ b/yatzee/index.html
@@ -10,11 +10,12 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
     <script defer data-domain="chrisedwards.tech" src="https://metric1.chrisedwards.tech/js/plausible.js"></script>
-
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">
+<script defer src="/menu/menu.js"></script>
     <title>Yatzee!</title>
     </head>
 <body>
-    <div id="nav_menu">
+    <div id="navContainer"></div>
     </div>
     <div id="full" onclick="fullscreen()">
         <i class="fas fa-expand"></i>
@@ -75,8 +76,7 @@
     <div id="help">
         <img src="/how.png" id="how" onclick="how_to()" />
     </div>
-    <script type="text/javascript">
-    </script>
+  
     <script src="yatzee.js"></script>
 
 </body>
diff --git a/yatzee/yatzee.css b/yatzee/yatzee.css
index bdb68b4..704b2f1 100644
--- a/yatzee/yatzee.css
+++ b/yatzee/yatzee.css
@@ -3,6 +3,7 @@ body {
   cursor: default;
   font-size: 130%;
   font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
+  height: 100%;
 }
 
 #score {
@@ -95,7 +96,7 @@ body {
 
 #full {
   position: absolute;
-  top: 5px;
+  /* top: 5px; */
   right: 0;
   z-index: 100;
   color: rgb(165, 162, 162);
diff --git a/youtube_convert/index.php b/youtube_convert/index.php
index eba2712..dcae9f6 100644
--- a/youtube_convert/index.php
+++ b/youtube_convert/index.php
@@ -17,15 +17,15 @@ echo '
   <link rel="stylesheet" type="text/css" href="/menu/menu.css" />
 <title>YouTube Music</title>
 <style>
-body {background-color:#8f98a8; color:white}
+body {background-color:#8f98a8; color:white; height: 100%}
 </style>
 </head>
 <body onload="">
-<div id="nav_menu">
+<div id="navContainer">
 </div>
-<script src="/menu/menu.js"></script> 
+<script defer src="/menu/menu.js"></script> 
 <script defer data-domain="chrisedwards.tech" src="https://metric1.chrisedwards.tech/js/plausible.js"></script>
-
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">
 <script language="javascript">
 
 function reload(){
