:root {
  --light-grey: #dddddd;
  --medium-grey: #999999;
  --hover-bg: #eeeeee;
  --highlight-bg: #f3f3f3;
  --text-color: black;
}

html {
  font-family: sans-serif;
}

h1 {
  color: red;
  animation: rainbow-color 10s infinite;
}

ul {
  list-style-type: none;
  padding-left: 0;
  border-left: 1px solid var(--light-grey);
}

li {
  line-height: 1.5;
}

li a {
  display: inline-block;
  padding: 0.25em 0.5em;
}

li a:visited {
  color: var(--medium-grey);
}

li a:hover {
  background: var(--hover-bg);
}

li a span {
  display: inline-block;
  text-decoration: none;
  background: var(--highlight-bg);
  transform: rotate(11deg);
  padding: 0.1em 0.33em 0 0.4em;
  font-size: 0.85em;
  top: -2px;
  position: relative;
  border-radius: 10px;
  animation: shake 0.5s, rainbow-color 10s infinite;
}

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

@keyframes rainbow-color {
  0% {
    color: red;
  }
  15% {
    color: orange;
  }
  30% {
    color: gold;
  }
  45% {
    color: green;
  }
  60% {
    color: blue;
  }
  75% {
    color: purple;
  }
  100% {
    color: red;
  }
}