@tailwind base;
@tailwind components;
@tailwind utilities;
@layer components {
  .flash_notice {
    @apply w-full px-5 py-3 text-center rounded-lg pointer-events-none border dark:border-cod-gray-medium dark:bg-cod-gray bg-neutral-50 border-neutral-200 text-neutral-800 dark:text-neutral-50;
  }

  .rainbow {
    background: linear-gradient(
      90deg,
      rgba(240, 82, 82, 1) 3%,
      rgba(250, 202, 21, 1) 33%,
      rgba(49, 196, 141, 1) 66%,
      rgba(28, 100, 242, 1) 97%
    );
    border-radius: 11px;
    display: inline-block;
    padding: 3px;
  }

  .rainbow span {
    display: block;
    border-radius: 9px;
    padding: 0.7em 1.3em;
  }

  .rainbow .dark-text {
    background: linear-gradient(
      90deg,
      rgba(240, 82, 82, 1) 3%,
      rgba(250, 202, 21, 1) 33%,
      rgba(49, 196, 141, 1) 66%,
      rgba(28, 100, 242, 1) 97%
    );
    -webkit-background-clip: text;
    -moz-background-clip: text;
    -webkit-text-fill-color: transparent;
    -moz-text-fill-color: transparent;
  }

  .rainbow:active {
    opacity: 100% !important;
  }

  .text-4xxl {
    font-size: 42px;
    line-height: 1;
  }
  .post-body a:focus-within {
    @apply focus:outline-none;
  }
  .post-body a,
  .faq a {
    @apply dark:hover:text-purple-400 hover:text-violet-600 transition ease-in-out;
  }
  .load_more_btn {
    @apply focus:outline-none text-center text-sm py-1.5 px-2.5 rounded-lg transition ease-in-out border text-gray-500 hover:text-gray-700 hover:bg-white bg-transparent border-gray-400 dark:hover:bg-cod-gray dark:hover:text-white dark:hover:border-neutral-700 dark:border-loadbtn dark:text-neutral-500;
  }
  .input {
    @apply block text-sm rounded-md border border-gray-200 outline-none px-3 py-2 w-full dark:bg-cod-gray-light dark:border-cod-gray-medium dark:text-white;
  }
  .btn-primary {
    @apply rounded-lg py-2 text-sm px-4 text-white inline-block font-medium bg-blue-600 hover:bg-blue-700;
  }
  .btn-secondary {
    @apply rounded-lg py-2 text-sm px-4 bg-gray-100 inline-block font-medium dark:text-gray-50 dark:bg-cod-gray-medium hover:bg-gray-200 dark:hover:bg-cod-gray-medium/80;
  }
  .label {
    @apply block text-sm font-medium dark:text-neutral-50;
  }
}

@import "./custom.css";
.post-body p {
  margin-bottom: 1.5rem !important;
}

.post-body li {
  margin-bottom: 1rem !important;
  margin-left: 1.5rem !important;
}

.post-body ul li {
  list-style-type: disc;
}

.post-body ol li {
  list-style-type: decimal;
}

.post-body a,
.faq a {
  text-decoration: underline !important;
}

pre {
  font-family: monospace !important;
  color: #abb2bf;
  display: block;
  overflow-x: auto;
  padding: 1rem 1.4rem;
  border-radius: 0.6rem;
  background-color: #1f1f1f;
  font-size: 15px !important;
  margin-top: 1rem !important;
  margin-bottom: 1.5rem !important;
}

li pre {
  margin-left: -1.5rem !important;
}
.hljs-comment,
.hljs-quote {
  color: #5c6370;
  font-style: italic;
}

.hljs-doctag,
.hljs-formula,
.hljs-keyword {
  color: #c678dd;
}

.hljs-deletion,
.hljs-name,
.hljs-section,
.hljs-selector-tag,
.hljs-subst {
  color: #e06c75;
}

.hljs-literal {
  color: #56b6c2;
}

.hljs-addition,
.hljs-attribute,
.hljs-meta .hljs-string,
.hljs-regexp,
.hljs-string {
  color: #98c379;
}

.hljs-attr,
.hljs-number,
.hljs-selector-attr,
.hljs-selector-class,
.hljs-selector-pseudo,
.hljs-template-variable,
.hljs-type,
.hljs-variable {
  color: #d19a66;
}

.hljs-bullet,
.hljs-link,
.hljs-meta,
.hljs-selector-id,
.hljs-symbol,
.hljs-title {
  color: #61aeee;
}

.hljs-built_in,
.hljs-class .hljs-title,
.hljs-title.class_ {
  color: #e6c07b;
}

.hljs-emphasis {
  font-style: italic;
}

.hljs-strong {
  font-weight: 700;
}

.hljs-link {
  text-decoration: underline;
}

.post-body code:not(.hljs) {
  font-family: monospace;
  color: #abb2bf;
  border-radius: 0.2rem;
  padding: 0.2rem 0.3rem;
  background-color: #1f1f1f;
  font-size: 15px !important;
  margin-top: 1rem !important;
}

.post-body img + em {
  color: #666;
  font-size: 16px;
  line-height: 1.2;
  font-style: normal;
  margin-left: auto;
  margin-right: auto;
  display: table;
  text-align: center;
}

.post-body img {
  margin-bottom: 1rem;
}

.post-body h1 {
  font-size: 1.875rem; /* 30px */
  line-height: 2.25rem; /* 36px */
  font-weight: 700;
  margin-bottom: 1.5rem;
}
.post-body h2 {
  font-size: 1.5rem; /* 24px */
  line-height: 2rem; /* 32px */
  font-weight: 700;
  margin-bottom: 1.5rem;
}
.post-body h3 {
  font-size: 1.125rem; /* 18px */
  line-height: 1.75rem; /* 28px */
  font-weight: 600;
  margin-bottom: 1.5rem;
}
.post-body pre + h1,
.post-body pre + h2,
.post-body pre + h3 {
  margin-top: 3rem;
}
.post-body p + h1,
.post-body p + h2,
.post-body p + h3 {
  margin-top: 3rem;
}

.turbo-progress-bar {
  background-color: #333333;
}

.flip-x {
  transform: scaleX(-1);
  display: inline-block;
}

.hover\:scale-101:hover {
  --tw-scale-x: 1.01;
  --tw-scale-y: 1.01;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y))
    rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
    scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.fade-out.aos-animate {
  opacity: 0;
}

[data-aos="fade-right"] {
  transform: translate3d(-2rem, 0, 0);
}

[data-aos="fade-left"] {
  transform: translate3d(2rem, 0, 0);
}

.swiper-slide-fully-visible {
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}

.swiper-slide-fully-visible p,
.swiper-slide-fully-visible h3,
.swiper-slide-fully-visible img {
  opacity: 1 !important;
  filter: grayscale(0%) !important;
}

.swiper-slide p,
.swiper-slide img,
.swiper-slide h3 {
  opacity: 0.5;
  filter: grayscale(100%);
  transition: opacity 200ms ease-in-out, filter 200ms ease-in-out;
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */