@import url('https://fonts.googleapis.com/css2?family=Gelasio&family=Inter:wght@400;500&display=swap');
@import '@flaticon/flaticon-uicons/css/all/all';
@import 'tailwindcss';
@custom-variant dark (&:where(.dark, .dark *));

.font-gelasio {
  font-family: 'Gelasio', serif;
}

:root {
  /* Light Theme */
  --bg-color: #fafafa;
  --bg-secondary-color: #f0f0f0;
  --text-color: #111111;
  --text-secondary-color: #444444;
  --accent-color: #3b82f6;
  --border-color: #e5e7eb;
  --card-bg-color: #ffffff;
  --link-color: #2563eb;
}

[data-theme='dark'] {
  --bg-color: #09090b;
  --bg-secondary-color: #1f1f23;
  --text-color: #ededed;
  --text-secondary-color: #a3a3a3;
  --accent-color: #60a5fa;
  --border-color: #27272a;
  --card-bg-color: #18181b;
  --link-color: #3b82f6;
}

@layer components {
  * {
    @apply m-0 p-0 box-border text-base duration-100;
  }

  html {
    @apply overflow-x-hidden;
  }

  body {
    @apply font-normal text-[#111111] dark:text-[#ededed] bg-[#fafafa] dark:bg-[#09090b] transition-colors duration-300;
  }

  i {
    @apply mt-0.5;
  }

  section {
    @apply py-4 px-[5vw] md:px-[7vw] lg:px-[10vw];
  }

  img {
    @apply w-full h-full object-cover;
  }

  .navbar {
    @apply z-10 sticky top-0 flex items-center gap-12 w-full px-[5vw] py-5 h-[80px] border-b border-[#e5e7eb] dark:border-[#27272a] bg-[#fafafa] dark:bg-[#09090b];
  }

  .h-cover {
    @apply min-h-[calc(100vh-80px)];
  }

  .center {
    @apply block mx-auto;
  }

  .btn-dark {
    @apply whitespace-nowrap rounded-full bg-[#1f1f1f] dark:bg-[#e4e4e7] text-[#f1f1f1] dark:text-[#1a1a1a] hover:opacity-80 py-3 px-6 text-xl capitalize;
  }

  .btn-light {
    @apply whitespace-nowrap rounded-full bg-[#f4f4f5] dark:bg-[#1a1a1d] text-[#1a1a1a] dark:text-[#f4f4f5] hover:opacity-80 py-3 px-6 text-xl capitalize;
  }

  .input-box {
    @apply w-[100%] rounded-md p-4 bg-[#fafafa] dark:bg-[#09090b] pl-12 border border-[#e5e7eb] dark:border-[#27272a] focus:bg-transparent placeholder:text-black dark:placeholder:text-white;
  }

  input:disabled,
  input:disabled ~ .input-icon {
    @apply opacity-50 dark:opacity-100;
  }

  .input-icon {
    @apply absolute left-4 top-1/2 -translate-y-1/2;
  }

  .link {
    @apply text-[#444444] dark:text-[#a3a3a3] hover:text-[#111111] hover:bg-[#ededed] p-3 px-4 block opacity-75;
  }

  .hide {
    @apply opacity-0 pointer-events-none duration-100;
  }

  .show {
    @apply opacity-100 pointer-events-auto;
  }

  .sidebar-link {
    @apply flex gap-4 items-center py-5 text-[#444444] dark:text-[#a3a3a3] hover:text-[#111111] hover:dark:text-[#ededed];
  }

  .sidebar-link.active {
    @apply text-[#111111] dark:text-[#ededed] border-r-2 border-[#e5e7eb] dark:border-[#27272a] pl-6 bg-[#f0f0f0] dark:bg-[#1f1f23] -ml-6 md:rounded-tl-lg md:rounded-bl-lg max-md:border-none;
  }

  #textEditor h2,
  h2 {
    @apply text-4xl leading-normal font-bold max-md:text-3xl max-md:leading-snug;
  }

  #textEditor h3,
  h3 {
    @apply text-3xl leading-loose max-md:text-2xl max-md:leading-normal;
  }

  #textEditor *,
  .project-page-content * {
    @apply text-xl leading-10 md:text-2xl;
  }

  #textEditor a,
  .project-page-content a {
    @apply text-[#111111] dark:text-[#ededed] underline hover:opacity-50;
  }

  .tag {
    @apply p-2 bg-[#2a2a2e] dark:bg-[#d4d4d4] text-[#ededed] dark:text-[#111111] rounded-full px-4 capitalize;
  }

  .project-title {
    @apply text-2xl font-medium leading-7 line-clamp-3 sm:line-clamp-2;
  }

  .project-index {
    @apply text-4xl sm:text-3xl lg:text-5xl font-bold text-[#111111] dark:text-[#ededed] leading-none;
  }
}

.ce-block__content,
.ce-toolbar__content {
  max-width: 900px;
}

.cdx-settings-button[data-tune='withBorder'],
.cdx-settings-button[data-tune='withBackground'],
.cdx-settings-button[data-tune='stretched'] {
  display: none;
}
