@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  @font-face {
    font-family: 'Maple Mono';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(/fonts/MapleMono-Regular.woff2) format('woff2');
  }
  @font-face {
    font-family: 'Maple Mono';
    font-style: bold;
    font-weight: 400;
    font-display: swap;
    src: url(/fonts/MapleMono-Bold.woff2) format('woff2');
  }
}

@layer components {
  /* Scrollbar */
  ::-webkit-scrollbar {
    @apply w-2 max-h-2;
  }
  ::-webkit-scrollbar-track {
    background: transparent;
  }
  ::-webkit-scrollbar-thumb {
    background: var(--special);

    @apply rounded;
  }

  .theme-ctp-mocha {
    --fg: #cdd6f4;
    --fg-lighter: #a6adc8;

    --bg: #181825;
    --bg-lighter: #1e1e2e;
    --bg-darker: #11111b;

    --card: #313244;
    --card-border: #45475a;
    --special: #74c7ec;
    --raw-special: 116, 199, 236;

    code.hljs{color:#cdd6f4};code .hljs-keyword{color:#cba6f7;};code .hljs-built_in{color:#f38ba8};code .hljs-type{color:#f9e2af};code .hljs-literal{color:#fab387};code .hljs-number{color:#fab387};code .hljs-operator{color:#94e2d5};code .hljs-punctuation{color:#bac2de};code .hljs-property{color:#94e2d5};code .hljs-regexp{color:#f5c2e7};code .hljs-string{color:#a6e3a1};code .hljs-char.escape_{color:#a6e3a1};code .hljs-subst{color:#a6adc8};code .hljs-symbol{color:#f2cdcd};code .hljs-variable{color:#cba6f7};code .hljs-variable.language_{color:#cba6f7};code .hljs-variable.constant_{color:#fab387};code .hljs-title{color:#89b4fa};code .hljs-title.class_{color:#f9e2af};code .hljs-title.function_{color:#89b4fa};code .hljs-params{color:#cdd6f4};code .hljs-comment{color:#585b70};code .hljs-doctag{color:#f38ba8};code .hljs-meta{color:#fab387};code .hljs-section{color:#89b4fa};code .hljs-tag{color:#a6adc8};code .hljs-name{color:#cba6f7};code .hljs-attr{color:#89b4fa};code .hljs-attribute{color:#a6e3a1};code .hljs-bullet{color:#94e2d5};code .hljs-code{color:#a6e3a1};code .hljs-emphasis{color:#f38ba8;font-style:italic};code .hljs-strong{color:#f38ba8;font-weight:bold};code .hljs-formula{color:#94e2d5};code .hljs-link{color:#74c7ec;font-style:italic};code .hljs-quote{color:#a6e3a1;font-style:italic};code .hljs-selector-tag{color:#f9e2af};code .hljs-selector-id{color:#89b4fa};code .hljs-selector-class{color:#94e2d5};code .hljs-selector-attr{color:#cba6f7};code .hljs-selector-pseudo{color:#94e2d5};code .hljs-template-tag{color:#f2cdcd};code .hljs-template-variable{color:#f2cdcd};code .hljs-addition{color:#a6e3a1};code .hljs-deletion{color:#f38ba8};
  }

  .theme-ctp-macchiato {
    --fg: #cad3f5;
    --fg-lighter: #a5adcb;

    --bg: #1e2030;
    --bg-lighter: #24273a;
    --bg-darker: #181926;

    --card: #363a4f;
    --card-border: #494d64;
    --special: #7dc4e4;
    --raw-special: 125, 196, 228;


    code.hljs{color:#cad3f5};code .hljs-keyword{color:#c6a0f6};code .hljs-built_in{color:#ed8796};code .hljs-type{color:#eed49f};code .hljs-literal{color:#f5a97f};code .hljs-number{color:#f5a97f};code .hljs-operator{color:#8bd5ca};code .hljs-punctuation{color:#b8c0e0};code .hljs-property{color:#8bd5ca};code .hljs-regexp{color:#f5bde6};code .hljs-string{color:#a6da95};code .hljs-char.escape_{color:#a6da95};code .hljs-subst{color:#a5adcb};code .hljs-symbol{color:#f0c6c6};code .hljs-variable{color:#c6a0f6};code .hljs-variable.language_{color:#c6a0f6};code .hljs-variable.constant_{color:#f5a97f};code .hljs-title{color:#8aadf4};code .hljs-title.class_{color:#eed49f};code .hljs-title.function_{color:#8aadf4};code .hljs-params{color:#cad3f5};code .hljs-comment{color:#5b6078};code .hljs-doctag{color:#ed8796};code .hljs-meta{color:#f5a97f};code .hljs-section{color:#8aadf4};code .hljs-tag{color:#a5adcb};code .hljs-name{color:#c6a0f6};code .hljs-attr{color:#8aadf4};code .hljs-attribute{color:#a6da95};code .hljs-bullet{color:#8bd5ca};code .hljs-code{color:#a6da95};code .hljs-emphasis{color:#ed8796;font-style:italic};code .hljs-strong{color:#ed8796;font-weight:bold};code .hljs-formula{color:#8bd5ca};code .hljs-link{color:#7dc4e4;font-style:italic};code .hljs-quote{color:#a6da95;font-style:italic};code .hljs-selector-tag{color:#eed49f};code .hljs-selector-id{color:#8aadf4};code .hljs-selector-class{color:#8bd5ca};code .hljs-selector-attr{color:#c6a0f6};code .hljs-selector-pseudo{color:#8bd5ca};code .hljs-template-tag{color:#f0c6c6};code .hljs-template-variable{color:#f0c6c6};code .hljs-addition{color:#a6da95};code .hljs-deletion{color:#ed8796};
  }

  .theme-ctp-frappe {
    --fg: #c6d0f5;
    --fg-lighter: #a5adce;

    --bg: #292c3c;
    --bg-lighter: #303446;
    --bg-darker: #232634;

    --card: #414559;
    --card-border: #51576d;
    --special: #85c1dc;
    --raw-special: 133, 193, 220;

    code.hljs{color:#c6d0f5};code .hljs-keyword{color:#ca9ee6};code .hljs-built_in{color:#e78284};code .hljs-type{color:#e5c890};code .hljs-literal{color:#ef9f76};code .hljs-number{color:#ef9f76};code .hljs-operator{color:#81c8be};code .hljs-punctuation{color:#b5bfe2};code .hljs-property{color:#81c8be};code .hljs-regexp{color:#f4b8e4};code .hljs-string{color:#a6d189};code .hljs-char.escape_{color:#a6d189};code .hljs-subst{color:#a5adce};code .hljs-symbol{color:#eebebe};code .hljs-variable{color:#ca9ee6};code .hljs-variable.language_{color:#ca9ee6};code .hljs-variable.constant_{color:#ef9f76};code .hljs-title{color:#8caaee};code .hljs-title.class_{color:#e5c890};code .hljs-title.function_{color:#8caaee};code .hljs-params{color:#c6d0f5};code .hljs-comment{color:#626880};code .hljs-doctag{color:#e78284};code .hljs-meta{color:#ef9f76};code .hljs-section{color:#8caaee};code .hljs-tag{color:#a5adce};code .hljs-name{color:#ca9ee6};code .hljs-attr{color:#8caaee};code .hljs-attribute{color:#a6d189};code .hljs-bullet{color:#81c8be};code .hljs-code{color:#a6d189};code .hljs-emphasis{color:#e78284;font-style:italic};code .hljs-strong{color:#e78284;font-weight:bold};code .hljs-formula{color:#81c8be};code .hljs-link{color:#85c1dc;font-style:italic};code .hljs-quote{color:#a6d189;font-style:italic};code .hljs-selector-tag{color:#e5c890};code .hljs-selector-id{color:#8caaee};code .hljs-selector-class{color:#81c8be};code .hljs-selector-attr{color:#ca9ee6};code .hljs-selector-pseudo{color:#81c8be};code .hljs-template-tag{color:#eebebe};code .hljs-template-variable{color:#eebebe};code .hljs-addition{color:#a6d189};code .hljs-deletion{color:#e78284};
  }

  .theme-ctp-latte {
    --fg: #4c4f69;
    --fg-lighter: #6c6f85;

    --bg: #e6e9ef;
    --bg-lighter: #eff1f5;
    --bg-darker: #dce0e8;

    --card: #ccd0da;
    --card-border: #bcc0cc;
    --special: #209fb5;
    --raw-special: 32, 159, 181;

    code.hljs{color:#4c4f69};code .hljs-keyword{color:#8839ef};code .hljs-built_in{color:#d20f39};code .hljs-type{color:#df8e1d};code .hljs-literal{color:#fe640b};code .hljs-number{color:#fe640b};code .hljs-operator{color:#179299};code .hljs-punctuation{color:#5c5f77};code .hljs-property{color:#179299};code .hljs-regexp{color:#ea76cb};code .hljs-string{color:#40a02b};code .hljs-char.escape_{color:#40a02b};code .hljs-subst{color:#6c6f85};code .hljs-symbol{color:#dd7878};code .hljs-variable{color:#8839ef};code .hljs-variable.language_{color:#8839ef};code .hljs-variable.constant_{color:#fe640b};code .hljs-title{color:#1e66f5};code .hljs-title.class_{color:#df8e1d};code .hljs-title.function_{color:#1e66f5};code .hljs-params{color:#4c4f69};code .hljs-comment{color:#acb0be};code .hljs-doctag{color:#d20f39};code .hljs-meta{color:#fe640b};code .hljs-section{color:#1e66f5};code .hljs-tag{color:#6c6f85};code .hljs-name{color:#8839ef};code .hljs-attr{color:#1e66f5};code .hljs-attribute{color:#40a02b};code .hljs-bullet{color:#179299};code .hljs-code{color:#40a02b};code .hljs-emphasis{color:#d20f39;font-style:italic};code .hljs-strong{color:#d20f39;font-weight:bold};code .hljs-formula{color:#179299};code .hljs-link{color:#209fb5;font-style:italic};code .hljs-quote{color:#40a02b;font-style:italic};code .hljs-selector-tag{color:#df8e1d};code .hljs-selector-id{color:#1e66f5};code .hljs-selector-class{color:#179299};code .hljs-selector-attr{color:#8839ef};code .hljs-selector-pseudo{color:#179299};code .hljs-template-tag{color:#dd7878};code .hljs-template-variable{color:#dd7878};code .hljs-addition{color:#40a02b};code .hljs-deletion{color:#d20f39};
  }

  code {background-color: var(--card);}

  body {
    background-color: var(--bg);
    color: var(--fg);

    @apply flex min-h-screen flex-col md:flex-row gap-y-2 md:gap-x-8 md:gap-y-0 mx-auto max-w-[80rem] px-8 pt-8;
  }

  .prose {
    --tw-prose-body: var(--fg);
    --tw-prose-headings: var(--fg);
    --tw-prose-links: var(--special);
    --tw-prose-code: var(--fg);
    --tw-prose-pre-bg: var(--card);
    --tw-prose-bold: var(--fg);
    --tw-prose-quotes: var(--fg);
    --tw-prose-quote-borders: var(--card);
    --tw-prose-bullets: var(--fg);
    --tw-prose-hr: var(--fg);
    --tw-prose-captions: var(--card);
    --tw-prose-th-borders: var(--card);
    --tw-prose-td-borders: var(--fg);
    --tw-prose-links: var(--special);

    :where(code):not(:where([class~=not-prose],[class~=not-prose] *)):before,
    :where(code):not(:where([class~=not-prose],[class~=not-prose] *)):after {
      content: none;
    }

    max-width: 100%;
  }

  .banner {
    height: calc(68px + max(min(100vw, 600px), 360px) * 0.1);
    background: var(--bg-lighter);

    @apply absolute top-0 left-0 z-10 w-full bg-center bg-cover;
  }

  .tag {
    padding: 0 10px 0 6px;
    border-radius: 0 3px 3px 0;
    color: var(--bg-darker);
    background-color: var(--special);

    @apply relative inline-flex h-5 ml-2;
  }

  .tag-after {
    transform: rotate(180deg);
    left: -8px;
    border-bottom: 10px solid transparent;
    border-top: 10px solid transparent;
    border-left: 8px solid var(--special);

    @apply absolute top-0;
  }

  .glow-button:hover {box-shadow: 0px 6px 15px rgba(var(--raw-special), .4);}
}
