.tooltip {
  position: relative;
  display: inline-block;
  font-size:smaller;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 1000px;
  color:#ffd500;
  background-color:black;
  text-align: left;
  border-radius: 6px;
  padding: 5px;
  position: absolute;
  z-index: 1;
  bottom: 90%;
  left: -500px;
  margin-left: 10px;
  opacity: 1;
}
.tooltiptext {
  transition: opacity 0s;
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: -70%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}

@keyframes pulse {
  0% {transform: scale(1) translateY(-70%)}
  3% {transform: scale(2)}
  6% {transform: scale(0.5)}
  9% {transform: scale(2)}
  12% {transform: scale(0.5)}
  15% {transform: scale(2)}
  27% {transform: scale(0.5) rotate(60deg) translateY(-30%)}
  33% {transform: scale(2) rotate(-60deg) translateY(-20%)}
  36% {transform: scale(1)}
  100% {transform: scale(1) translateY(-70%);}
}
.pulse { animation: 6s ease infinite pulse; }
.icon, .pulse {
  cursor: pointer;
}

.top {
  position:absolute;
  margin-left:1%;
  z-index:1;
  font: bold 2em sans-serif;
}
.top a {
  text-decoration:none;
  color:#3e83e0;
}