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

@import "swiper/swiper-bundle";

/* Main
/* ---------------------------------------------------------- */

[x-cloak] {
  display: none !important;
}

a.no-underline{
  text-decoration: none !important;
}
a.no-underline:hover{
  text-decoration: none;
}

/* pre{
  white-space: pre-wrap;
  word-break: break-all;
  max-width: 100%;
}

code{
  word-break: break-all;
} */

.kg-image-card{
  @apply content-center;
}

.kg-image {
  @apply mx-auto;
}

.text-gradient {
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.w-default {
  @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8;
}

.page-about-content h2,
.page-about-content h3 {
  @apply my-10;
}

.swiper-slide {
  height: auto !important;
}

.perspective-700 {
  perspective: 750px;
}

.perspective-transform {
  transform: rotateX(30deg) rotateY(0deg);
  transform-style: preserve-3d;
  transition: 1s ease all;
}

.perspective-transform:hover {
  transform: rotateX(15deg) rotateY(0deg);
}

.no-underline {
  text-decoration: none !important;
}

figcaption {
  @apply text-sm text-center;
}

.prose > h1::before,
.prose > h2::before,
.prose > h3::before,
.prose > h4::before,
.prose > h5::before,
.prose > h6::before {
  display: block;
  content: " ";
  height: 80px;
  margin-top: -80px;
  visibility: hidden;
  pointer-events: none;
}

.is-active-link {
  @apply transition-colors text-gray-900 dark:text-gray-100 bg-blue-100 dark:bg-blue-900;
}

.toc-list-item a {
  @apply text-sm transition-colors text-gray-600 dark:text-gray-400;
}

.toc-list-item a:hover {
  @apply dark:text-blue-500;
}

.toc-list-item {
  @apply my-1;
}