/* Tooltips from ttps://codepen.io/vincentnavetat/pen/JjPVzGL */

@-webkit-keyframes tooltipFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes tooltipFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.tooltip-dropdown {
  display: none;
  position: fixed;
  top: 60px;
  right: -15vw;
  z-index: 1000;
  padding-top: 0px;
}

.tooltip-dropdown-buffs {
  display: none;
  position: absolute;
  top: 62px;
  left: -7vw;
  z-index: 1000;
  padding-top: 0px;
}

.tooltip-dropdown__content,
.mobileTooltip {
  background-color: var(--yellow-light);
  border-radius: 10px;
  padding: 8px 12px;
  width: 265px;
  text-align: left;
  box-shadow: rgba(0, 0, 0, 0.3) 2px 1px 10px 1px;
}

.tooltip-dropdown__content p,
.tooltip-dropdown__content strong,
.tooltip-dropdown__content b,
.tooltip-dropdown__content span,
.mobileTooltip p,
.mobileTooltip strong,
.mobileTooltip b,
.mobileTooltip span {
  color: var(--green-darker);
}

.infoMobile {
  cursor: pointer;
}

.mobileTooltip {
  position: fixed;
}

.tooltip--open .tooltip-dropdown,
.tooltip--open .tooltip-dropdown-buffs {
  -webkit-animation: tooltipFadeIn 0.15s;
  animation: tooltipFadeIn 0.15s;
  display: block;
}

@media (hover: hover) {
  .tooltip:hover .tooltip-dropdown,
  .tooltip:hover .tooltip-dropdown-buffs {
    -webkit-animation: tooltipFadeIn 0.15s;
    animation: tooltipFadeIn 0.15s;
    display: block;
  }
}

@media screen and (max-width: 992px) {
  .tooltip--open,
  .tooltip-dropdown,
  .tooltip-dropdown__content {
    display: none;
  }
}