@import "tailwindcss";

@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
@source '../../storage/framework/views/*.php';
@source '../**/*.blade.php';
@source '../**/*.js';

@theme {
    --font-sans: "'"Helvetica Neue"', 'Helvetica', 'Arial', 'sans-serif';
}

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

h1 {
   font-size: calc(1.375rem + 1.5vw);
}

h4 {
    font-size: calc(1.275rem + .3vw);
}


/* Override dengan px-based container ala Bootstrap */
@utility container {
  margin-inline: auto;
  padding-inline: 1rem;

  /* Match Bootstrap 5.x width */
  @media (min-width: 576px) { max-width: 540px; }
  @media (min-width: 768px) { max-width: 720px; }
  @media (min-width: 992px) { max-width: 960px; }
  @media (min-width: 1200px) { max-width: 1140px; }
  @media (min-width: 1400px) { max-width: 1320px; }
}

@layer components {
  .prose-bootstrap {
    @apply text-base leading-relaxed;

    h1, h2, h3, h4, h5, h6 {
      @apply font-bold  mb-2 mt-4;
    }

    h1 { @apply text-3xl; }
    h2 { @apply text-2xl; }
    h3 { @apply text-xl; }
    h4 { @apply text-lg; }
    h5 { @apply text-base; }
    h6 { @apply text-sm; }

    p {
      @apply mb-3;
    }

    a {
      @apply text-(--bs-primary) underline hover:text-(--bs-primary)/80;
    }

    ul {
      @apply list-disc ps-5 mb-3;
    }

    ol {
      @apply list-decimal ps-5 mb-3;
    }

    li {
      @apply mb-1;
    }

    blockquote {
      @apply ps-4 border-l-4 border-(--bs-secondary) text-gray-700 italic mb-3;
    }

    strong {
      @apply font-semibold;
    }

    img {
      @apply my-4 rounded inline;
    }

    table {
      @apply w-full text-sm border border-gray-300 my-4;
    }

    th, td {
      @apply border px-3 py-2;
    }

    code {
      @apply bg-gray-100 text-pink-600 px-1 rounded;
    }

    pre {
      @apply bg-black text-white p-4 rounded overflow-x-auto text-sm;
    }
  }
}



:root {
  --first-color: #111111;
  --second-color: #fff;
--third-color: #c026d3;
--fourth-color: #a21caf; /* fuchsia-800 */

  /* Bootstrap default colors */
  --bs-blue: #0d6efd;
  --bs-indigo: #6610f2;
  --bs-purple: #6f42c1;
  --bs-pink: #d63384;
  --bs-red: #dc3545;
  --bs-orange: #fd7e14;
  --bs-yellow: #ffc107;
  --bs-green: #198754;
  --bs-teal: #20c997;
  --bs-cyan: #0dcaf0;

  --bs-white: #fff;
  --bs-gray: #6c757d;
  --bs-gray-dark: #343a40;

  --bs-primary: #0d6efd;
  --bs-primary-hover: #0b5ed7;

  --bs-secondary: #6c757d;
  --bs-secondary-hover: #5c636a;

  --bs-success: #198754;
  --bs-success-hover: #157347;

  --bs-info: #0dcaf0;
  --bs-info-hover: #31d2f2;

  --bs-warning: #ffc107;
  --bs-warning-hover: #ffcd39;

  --bs-danger: #dc3545;
  --bs-danger-hover: #bb2d3b;

  --bs-light: #f8f9fa;
  --bs-light-hover: #e2e6ea;

  --bs-dark: #212529;
  --bs-dark-hover: #1a1e21;

}

.teks-berjalan {
    @apply border-b border-dashed border-fuchsia-600;
    padding: 0.3rem;
    margin-bottom: 0.9rem;
}

.time-post {
  font-size: 0.7rem;
  padding: 0;
  margin: 0;
  font-weight: 700;
}