@tailwind base;
@layer base {
  h1 {
    @apply text-3xl;
  }
  h2 {
    @apply text-2xl;
  }
  h3 {
    @apply text-xl;
  }
  h4 {
    @apply text-lg;
  }
  h5 {
    @apply text-lg;
  }
  h6 {
    @apply text-lg;
  }
  a {
    @apply text-blue-700 underline cursor-pointer;
  }
}
@tailwind components;
@tailwind utilities;

html,
body,
#root {
  height: 100%;
}

.tiptap {
  outline: none;
  min-height: 200px;
  padding-top: 20px;
  padding-bottom: 20px;
}

[data-tooltip] {
  position: relative;
}

[data-tooltip]::after {
  position: absolute;
  opacity: 0;
  font-size: 80%;
  pointer-events: none;
  display: 'inline-block';
  content: attr(data-tooltip);
  left: -50%;
  top: calc(100% + 10px);
  border-radius: 8px;
  color: white;
  background-color: black;
  z-index: 10;
  padding: 8px;
  width: 400px;
  transform: translateY(-20px);
  transition: all 150ms cubic-bezier(0.25, 0.8, 0.25, 1);
}

[data-tooltip]:hover::after {
  opacity: 1;
  transform: translateY(0);
  transition-duration: 300ms;
  overflow: visible;
}
