mtg menu fix?

MTG/menu/menu.js

@@ -1,21 +1,21 @@
 let navString = "";
 let baseLinks = [
-  '<a class="navbar-item is-dark" href="/index.html"> Home </a>',
-  '<a class="navbar-item" href="/resume/"> Resume </a>',
+  '<a class="navbar-item is-dark" href="https://chrisedwards.tech/"> Home </a>',
+  '<a class="navbar-item" href="https://chrisedwards.tech/resume/"> Resume </a>',
 ];
 let gameLinks = [
-  '<a class="navbar-item" href="/yatzee/"> Yatzee </a>',
-  '<a class="navbar-item" href="/tictac/"> Tic Tac Toe </a>',
+  '<a class="navbar-item" href="https://chrisedwards.tech/yatzee/"> Yatzee </a>',
+  '<a class="navbar-item" href="https://chrisedwards.tech/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://chrisedwards.tech/memory/"> Memory </a>',
   '<a class="navbar-item" href="https://mtg.chrisedwards.tech"> MTG Life Counter </a>',
 ];
 let utilLinks = [
-  '<a class="navbar-item" href="/speak"> Speak </a>',
-  '<a class="navbar-item" href="/binary/"> Binary to ASCII </a>',
+  '<a class="navbar-item" href="https://chrisedwards.tech/speak"> Speak </a>',
+  '<a class="navbar-item" href="https://chrisedwards.tech/binary/"> Binary to ASCII </a>',
   '<a class="navbar-item" href="https://ytdownload.chrisedwards.tech"> YouTube Converter </a>',
-  '<a class="navbar-item" href="/nato/"> NATO Alpha </a> ',
-  '<a class="navbar-item" href="/rollDice/"> Roll Dice </a> ',
+  '<a class="navbar-item" href="https://chrisedwards.tech/nato/"> NATO Alpha </a> ',
+  '<a class="navbar-item" href="https://chrisedwards.tech/rollDice/"> Roll Dice </a> ',
 ];
 
 navString =

MTG/script.js

@@ -157,6 +157,10 @@ let startCommander = () => {
   startLife = Number(40);
 };
 
+let flip = () => {
+  console.log("click");
+  document.getElementsByClassName("life").innerHTML = "";
+};
 function fullscreen() {
   var elem = document.documentElement;
 

MTG/style.css

@@ -135,9 +135,48 @@ main {
 
   /* user-select: none; */
   align-items: center;
-  justify-content: space-between;
+  justify-content: space-evenly;
 }
 
+
+
+
+.icon {
+  position: relative;
+  /* background-color: #04AA6D; */
+  border: none;
+
+  padding: 20px;
+  width: 200px;
+  text-align: center;
+  -webkit-transition-duration: 0.4s; /* Safari */
+  transition-duration: 0.4s;
+  text-decoration: none;
+  overflow: hidden;
+  cursor: pointer;
+  border-radius: 50%;
+}
+
+.icon:after {
+  content: "";
+  background: #697069;
+  display: block;
+  position: absolute;
+  padding-top: 300%;
+  padding-left: 350%;
+  margin-left: -20px!important;
+  margin-top: -120%;
+  opacity: 0;
+  transition: all 0.8s;
+  border-radius: 25%
+}
+
+.icon:active:after {
+  padding: 0;
+  margin: 0;
+  opacity: 1;
+  transition: 0s
+}
 .buttons:focus,
 .lifeDown:focus,
 .lifeUp:focus {
@@ -230,6 +269,10 @@ i {
   /* font-size: 2rem ; */
 }
 
+.icon{
+  font-size: 4vh;
+  }
+
 /* Container holding the image and the text */
 .container {
   margin-top: 3px;