.topnav {
    position: fixed;
    top: 0px;
    z-index: 1000;
    background-color: white;
    width: 100%;
    box-shadow: 0px 0px 10px 10px rgba(0,0,0,0.2);
    outline: none;
}

.topnav a {
  float: left;
  display: block;
  color: black;
  text-align: center;
  padding: 15px 15px;
  text-decoration: none;
  font-size: 17px;
}

@keyframes rainbow-selection {
  0%  { color: #ff0000; text-shadow: 0 0 10px #ff0000; background-color: #008eff70; }
  15% { color: #ff7f00; text-shadow: 0 0 10px #ff7f00; background-color: #008eff70; }
  30% { color: #ffff00; text-shadow: 0 0 10px #ffff00; background-color: #008eff70; }
  45% { color: #00ff00; text-shadow: 0 0 10px #00ff00; background-color: #008eff70; }
  60% { color: #0000ff; text-shadow: 0 0 10px #0000ff; background-color: #008eff70; }
  75% { color: #4b0082; text-shadow: 0 0 10px #4b0082; background-color: #008eff70; }
  90% { color: #9400d3; text-shadow: 0 0 10px #9400d3; background-color: #008eff70; }
  100% { color: #ff0000; text-shadow: 0 0 10px #ff0000; background-color: #008eff70; }
}

.topnav a:hover {
  color: #04AA6D;
  box-shadow: 0px 0px 10px 10px rgba(0,0,0,0.2);
  outline: none;
  animation: rainbow-selection 1s ease-in-out infinite;
}

.topnav a.active {
  color: black;
  animation: rainbow-selection 1s ease-in-out infinite;
}

.topnav .icon {
  display: none;
  padding: 19px !important;
}

@media screen and (max-width: 1335px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}

@media screen and (max-width: 1335px) {
  .topnav.responsive {position: fixed; }
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}