index.module.css

.overlay {
  @apply fixed
    inset-0
    flex
    justify-center
    bg-white/40
    backdrop-blur-[2px]
    dark:bg-neutral-950/40;

  .content {
    @apply relative
      mx-4
      my-4
      inline-flex
      w-full
      flex-col
      overflow-y-auto
      rounded
      border
      border-neutral-200
      bg-white
      p-8
      focus:outline-none
      dark:bg-neutral-950
      sm:my-20
      lg:max-w-[900px]
      xl:p-12
      xs:p-6;
  }

  .close {
    @apply absolute
      right-3
      top-3
      block
      size-6
      cursor-pointer
      rounded
      focus:outline-none
      focus:ring-2
      focus:ring-neutral-200
      dark:focus:ring-neutral-900;
  }

  .title {
    @apply mb-2
      text-3xl
      font-semibold
      text-neutral-900
      dark:text-white;
  }

  .description {
    @apply mb-4
      text-lg
      font-regular
      text-neutral-800
      dark:text-neutral-200;
  }

  .authors {
    @apply mb-8
      flex
      flex-wrap
      items-center
      gap-4;

    a {
      @apply flex
        items-center
        gap-1
        text-xs
        text-neutral-600
        underline
        visited:text-neutral-600;
    }

    svg {
      @apply size-3
        text-neutral-600;
    }
  }

  .wrapper main {
    @apply flex
      flex-col
      gap-4;

    pre {
      @apply overflow-auto;
    }
  }
}