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

html {
  scroll-padding-top: 5rem;
  scroll-behavior: smooth;
}
body {
  @apply dark:bg-gradient-dark dark:text-primary-text bg-slate-100 text-gradient-dark w-full mx-auto;
}
main {
  max-width: 800px !important;
  margin: auto !important;
}
.prose {
  margin: 0;
  min-width: 100%;
}

pre {
  @apply dark:bg-black/30 bg-slate-200 text-slate-800 dark:text-slate-200 !important;
}

pre > code {
  @apply bg-transparent text-gray-700 dark:text-slate-300 !important;
}

.codeStyle {
  @apply bg-transparent !important;
}

pre > div > div > button > svg:hover {
  @apply hover:text-action transition-all ease-in-out duration-100 !important;
}

h1 > a,
h2 > a,
h3 > a,
h4 > a {
  @apply cursor-pointer relative text-gray-800 dark:text-gray-100 decoration-transparent font-bold !important;
}

h1 > a:hover::before,
h2 > a:hover::before,
h3 > a:hover::before,
h4 > a:hover::before {
  @apply content-['#'] absolute -left-8 text-gray-300 dark:text-gray-400;
}

h2 > a:hover::before {
  @apply -left-6;
}

h3 > a:hover::before {
  @apply -left-5;
}

h4 > a:hover::before {
  @apply -left-4;
}

div > code,
pre > code {
  @apply p-0 m-0 !important;
}

.slider {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.image {
  width: 1000px;
  height: 600px;
  border-radius: 10px;
}

.right-arrow {
  position: absolute;
  top: 50%;
  right: 0%;
  font-size: 2rem;
  rotate: 180deg;
  color: #bdbdbd;
  z-index: 10;
  cursor: pointer;
  user-select: none;
}

.left-arrow {
  position: absolute;
  top: 50%;
  left: -5%;
  font-size: 2rem;
  color: #bdbdbd;
  z-index: 10;
  cursor: pointer;
  user-select: none;
}

.slide {
  opacity: 0;
  transition-duration: 0.5s ease;
}

.slide.active {
  opacity: 1;
  transition-duration: 0.5s;
  transform: scale(0.8);
}