@tailwind base;
@tailwind components;
@tailwind utilities;

.hover\:underline-blue:hover {
  @apply underline;
  text-decoration-color: #0099ff;
}

.underline-blue {
  text-decoration: underline;
  text-decoration-color: #0099ff;
  text-decoration-thickness: 5px;
}
@layer base {
  .font-outline-2 {
    -webkit-text-stroke: 1px black;
  }
  .font-outline-4 {
    -webkit-text-stroke: 4px black;
  }

  .font-outline-4-blue {
    -webkit-text-stroke: 1px #000066;
  }
}
@layer components {
  @responsive {
    .text-shadow {
      text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    .text-shadow-md {
      text-shadow: 0 4px 8px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.08);
    }

    .text-shadow-lg {
      text-shadow: 0 15px 30px rgba(0, 0, 0, 0.11),
        0 5px 15px rgba(0, 0, 0, 0.08);
    }

    .text-shadow-none {
      text-shadow: none;
    }
  }
}