@import "tailwindcss";

:root {
  --background: #f9f9f9;
  --foreground: #171717;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: #0a0a0a;
    --foreground: #ededed;
  }
}
@theme {
  --prose-link-color: #1e90ff;
}
@layer components {
  #markdown-view-preview {
    p {
      font-size: var(--background);
      color: var(--color-gray-700);
      margin: 4px 0;
      letter-spacing: 1px;
      line-height: 1.6;
    }
    blockquote {
      border-left: 4px solid #1e90ff;
      padding-left: 10px;
      color: #333;

      font-size: 20px;
      margin: 10px 0;
    }
    a {
      color: var(--color-gray-800);
      font-weight: 600;
      padding-bottom: 2px;
      border-bottom: 1px solid var(--prose-link-color);
    }
    a:hover {
      border-bottom: 2px solid var(--prose-link-color);
    }
    ul {
      margin-left: 30px;
      list-style: disc;
    }
    ul > li {
      margin-bottom: 10px;
    }
  }
}
@layer base {
  ol {
    list-style-type: decimal;

    margin: 1em 0;

    padding-left: 2em;
  }
}
body {
  color: var(--foreground);
  background: var(--background);
  font-family: Arial, Helvetica, sans-serif;
}
.ant-input-disabled,
.ant-select-disabled .ant-select-selector {
  background-color: transparent !important;
  color: rgba(0, 0, 0, 0.85) !important;
}
.ant-checkbox-disabled + span {
  background-color: transparent !important;
  color: rgba(0, 0, 0, 0.85) !important;
}