nav#floatmenu {
  position: absolute;
  z-index: 10;
  padding: 10px;
  background: #888;
  border: solid 2px #000;
  box-shadow: 0px 0px 30px 0px #000;
  opacity: 0;
  transform: scale(0.5);
  transition-property: opacity, transform;
  transform-origin: top right;
  pointer-events: none;
  transition-duration: 200ms;
}
@media screen and (max-width: 500px) {
  nav#floatmenu {
    border: solid 2px #888;
  }
}

nav#floatmenu ul {
  margin: 0px;
  padding: 0px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

nav#floatmenu li {
  display: flex;
  margin: 0px;
  background: #888;
  border: solid 2px transparent;
  transition-property: transform;
  transition-duration: 300ms;
}

nav#floatmenu li:hover {
  border: solid 2px #000;
  transform: scale(1.1);
  box-shadow: 0px 0px 20px 10px #0008;
}
@media screen and (max-width: 500px) {
  nav#floatmenu li:hover {
    transform: scale(0.9);
  }
}

nav#floatmenu a {
  display: flex;
  align-items: center;
}

nav#floatmenu a#games {
  background: linear-gradient(90deg, #0f0 10px, #333 10px, #555 40px);
}
nav#floatmenu a#drawings {
  background: linear-gradient(90deg, #fc0 10px, #333 10px, #555 40px);
}
nav#floatmenu a#rhb {
  background: linear-gradient(90deg, #e2021a 10px, #333 10px, #555 40px);
}
nav#floatmenu a#bricks {
  background: linear-gradient(90deg, #3877ff 10px, #333 10px, #555 40px);
}
nav#floatmenu a#boxes {
  background: linear-gradient(90deg, #eee 10px, #333 10px, #555 40px);
}
nav#floatmenu a#bio {
  background: linear-gradient(90deg, #eee 10px, #333 10px, #555 40px);
}
nav#floatmenu a#contact {
  background: linear-gradient(90deg, #eee 10px, #333 10px, #555 40px);
}

nav#floatmenu a img:nth-child(odd) {
  width: calc(100% - 90px);
  margin: 0px 0px 0px 20px;
  padding: 0px 0px 0px 0px;
}

nav#floatmenu a img:nth-child(even) {
  width: 50px;
  margin: -10px 0px;
  padding: 5px 0px 5px 5px;
}

nav#floatmenu a#games img:nth-child(even) {
  animation-name: games-animate;
  animation-duration: 1000ms;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}
@keyframes games-animate {
  0%   {transform: rotate(  0deg);}
  100% {transform: rotate(360deg);}
}

nav#floatmenu a#drawings img:nth-child(even) {
  animation-name: drawings-animate;
  animation-duration: 500ms;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: linear;
  transform-origin: 50% 80%;
}
@keyframes drawings-animate {
  0%   {transform: rotate(-8deg);}
  100% {transform: rotate( 8deg);}
}

nav#floatmenu a#rhb img:nth-child(even) {
  animation-name: rhb-animate;
  animation-duration: 800ms;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
@keyframes rhb-animate {
  0%   {transform: translateX(-10px);}
  100% {transform: translateX( 10px);}
}

nav#floatmenu a#bricks img:nth-child(even) {
  animation-name: bricks-animate;
  animation-duration: 300ms;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
@keyframes bricks-animate {
  0%   {transform: scale(0.8);}
  100% {transform: scale(1.0);}
}

nav#floatmenu a#boxes img:nth-child(even) {
  animation-name: boxes-animate;
  animation-duration: 700ms;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
@keyframes boxes-animate {
  0%   {transform: scale(0.9);}
  100% {transform: scale(1.0);}
}

nav#floatmenu a#bio img:nth-child(even) {
  animation-name: bio-animate;
  animation-duration: 150ms;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
@keyframes bio-animate {
  0%   {transform: rotate(-5deg);}
  100% {transform: rotate( 5deg);}
}

nav#floatmenu a#contact img:nth-child(even) {
  animation-name: contact-animate;
  animation-duration: 150ms;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
@keyframes contact-animate {
  0%   {transform: rotate( 5deg);}
  100% {transform: rotate(-5deg);}
}