style.css

@keyframes like-gif {
  0% {
    background-position: 0%;
  }
  100% {
    background-position: 100%;
  }
}

:root {
  --menu-width: 20%;
  --menu-height: 5%;
  --zelda-white: #F9E9B6;
  --zelda-yellow: #FFFC54;
  --zelda-black: #31312D;
  --zelda-lightgreen: #1A9114;
  --zelda-darkgreen: #396F10;
}

body {
  padding-right: calc(var(--menu-width)*0.25);
  padding-left: calc(var(--menu-width)*0.25);
  background-image: radial-gradient(farthest-corner at 150% 150%, var(--zelda-yellow), #31312dFF, #31312dFF);
  color: var(--zelda-yellow);
  min-height: 100vh;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
}

h1 {
  text-align: center;
}

.like {
  display: flex;
  width: 110px; 
  height: 110px;
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/349115/like_animation.png) 0 0 no-repeat;
  background-size: 3000%;
  animation-play-state: paused;
}

.like:hover {
  animation: like-gif steps(28) 1s running both;
    
}

a {
  color: var(--zelda-lightgreen);
}

a:visited {
  color: var(--zelda-darkgreen);
}

a:hover {
  cursor: pointer;
  font-weight: bolder;
}

.testArea {
  width: 100%;
}

.collapsableNavbar a{
  position: absolute;
  text-align: center;
  text-decoration: none;
  margin:0;
  padding-left: 2%;
  padding-top: 1%;
  padding-right: 5%;
  padding-bottom: 1%;
  transition: 0.4s;
  width: var(--menu-width);
  height: var(--menu-height);
  left: calc(var(--menu-width) * -1.1);
  border-radius: 0 5px 5px 0;
  background-color: var(--zelda-darkgreen) ;
}

.collapsableNavbar a:hover {
  left: 0%;
  min-width: 150px;
  z-index: 10;
  padding-left: 1%;
  padding-right: 1%;
  color: var(--zelda-black);
  background-color: var(--zelda-yellow);
}

#home {
  top: calc(var(--menu-height)/2);
}

#audio {
  top: calc(var(--menu-height) + var(--menu-height)/2);
}

#zelda {
  top: calc(var(--menu-height) * 2 + var(--menu-height)/2);
}

#ttt {
  top: calc(var(--menu-height) * 3 + var(--menu-height)/2);
}

#virus {
  top: calc(var(--menu-height) * 4 + var(--menu-height)/2);
}