index.css

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

@layer base {
  a {
    @apply text-indigo;
    text-decoration: none;
  }

  a:hover {
    text-decoration: underline;
  }

  a:focus, a:active {
    @apply text-indigo-600;
  }
}

html, body, #app {
  font-size: 14px;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
}

.tooltip-top {
  display: none;
  transform: translate(0%, -110%);
}

.tooltip:hover .tooltip-top {
  display: inline;
}

.tooltip-bottom {
  display: none;
  transform: translate(0%, 85%);
}

.tooltip:hover .tooltip-bottom {
  display: inline;
}

.tooltip-left {
  display: none;
  transform: translate(-110%, -30%);
}

.tooltip:hover .tooltip-left {
  display: inline;
}

.tooltip-right {
  display: none;
  transform: translate(5%, -30%);
}

.tooltip:hover .tooltip-right {
  display: inline;
}

.hero-bg {
  background-image: url(/background-pattern-v2.png);
}