@import url('../style.css'); 
 
.tooltip-links {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--gap);
    height: 50vh;
  }
  
  a {
    color: black;
    text-decoration: none;
  }
  
  .tooltip-box {
    visibility: hidden;
    position: absolute;
    width: 280px;
    margin-top: -80px;
    background-color: var(--tooltip-bg-color);
    color: var(--tooltip-text-color);
    text-align: center;
    border-radius: var(--tooltip-border-radius);
    padding: var(--tooltip-padding);
    z-index: 1;
  }
  
  .tooltip-box::before {
    content: '';
    position: absolute;
    width: var(--tooltip-arrow-size);
    height: var(--tooltip-arrow-size);
    background-color: var(--tooltip-bg-color);
    clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
    left: -6px;
    top: 42px;
  }
  
  .tooltip-link.active {
    border-bottom: 1px solid var(--active-border-color);
  }
  
  .tooltip-link.active .tooltip-box,
  .tooltip-box.active {
    visibility: visible;
  }