@keyframes navAnim {
  0% { width: 0% }
  90% { width: 100% }
  100% { width: 20% }
}

@keyframes wiggle{
     0%{ transform: rotate(0deg);}
     25%{transform: rotate(10deg);}
     50%{transform: rotate(-10deg);}
     100%{transform: rotate(0deg);}
}

@keyframes shake{
     0%{ transform: translateX(0);}
     17%{transform: translateX(15px);}
     33%{transform: translateX(-15px);}
     50%{transform: translateX(0px);}
     100%{transform: translateX(0px);}
}

.navAlt{
  display: inline-flex;
  width: 100%;
  position: fixed;
  top: 0; 
  left: 0;
  justify-content: center;
  background-color: var(--back);
  z-index: 999;
  align-items: center;
  height: 50px;
  overflow: hidden;
  margin-bottom: 2vh;
}

.links {
  color: var(--accent);
  text-decoration: none;
}

.buttonLinks{
  background-color: var(--back);
  height: 50px;
  font-family: 'CAYoshiro-Light', Helvetica, Arial, Sans-Serif;
  font-size: 2vw;
  border: none;
  padding-left: 10px;
  padding-left: 10px;
  animation: navAnim 0.8s steps(200, end);
}

@media only screen and (max-width: 600px) {
  .buttonLinks{
    font-size: 4vw;
  }
}

.links:hover{
  color: var(--button);
}

#random{
  width: 50px;
  padding-right: 50px;
}

#randomDice:hover{
  animation:  shake 0.4s;
}

.navDivider{
  font-size: 2vw;
  color: var(--accent);
}

.child1, .child2, .child3, .child4, .child5, .child6, .child7, .child8, .child9, .child10, .child11, .child12, .child13, .child14{
  display: inline-block;
}

.child1:hover, .child2:hover, .child3:hover, .child4:hover, .child5:hover, .child6:hover, .child7:hover, .child8:hover, .child9:hover, .child10:hover, .child11:hover, .child12:hover, .child13:hover, .child14:hover{
  animation:  wiggle 0.2s;
}