body {
  --at-apply: "font-sans m-auto p-5 max-w-80ch text-(left neutral-700) break-words leading-6 antialiased dark:bg-neutral-900";
  margin-left: auto !important;
  margin-right: auto !important;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
  word-wrap: break-word;
  width: 100%;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}

h1 {
  --at-apply: "font-black mb-4 text-(4xl neutral-800) dark:text-neutral-100";
}

h2 {
  --at-apply: "font-extrabold mb-4 text-(2xl neutral-800) dark:text-neutral-100";
}

h3 {
  --at-apply: "font-bold mb-4 text-(xl neutral-800) dark:text-neutral-100";
}

p {
  --at-apply: "text-(neutral-700 lg) dark:text-neutral-300";
}

b {
  --at-apply: "font-medium text-neutral-800 dark:neutral-100";
}

a {
  --at-apply: "hover:underline underline-offset-2";
}

article a {
  --at-apply: "text-neutral-800 font-medium underline underline-offset-2 dark:text-neutral-100";
}

textarea {
  --at-apply: "w-full text-16px";
}

input {
  --at-apply: "text-16px";
}

content {
  line-height: 1.6;
}

img {
  --at-apply: "max-w-full h-auto my-8 rounded-xl border border-neutral-800";
}

code {
  --at-apply: "font-hack text-(sm neutral-100) bg-themeBlack p-2.5px rounded border border-neutral-800";
}

pre {
  --at-apply: "font-mono rounded-xl border border-neutral-800 p-4 my-4 text-sm scrollbar scrollbar-w-8px scrollbar-h-8px scrollbar-thumb-color-neutral-700 scrollbar-track-color-neutral-600 scrollbar-rounded  overflow-y-auto";
}

pre > code {
  --at-apply: "font-hack";
  all: unset;
}

blockquote {
  --at-apply: "rounded-xl bg-themeBlack border border-neutral-800 p-4";
}

blockquote > p {
  --at-apply: "text-neutral-300";
}

ul {
  --at-apply: "ml-8";
}

ul > li {
  --at-apply: "list-disc text-lg pb-2 dark:text-neutral-300";
}

ul > li::marker {
  --at-apply: "text-neutral-500";
}

ol {
  --at-apply: "ml-8";
}

ol > li {
  --at-apply: "list-decimal text-lg pb-2 dark:text-neutral-300";
}

ol > li::marker {
  --at-apply: "text-neutral-500";
}

.newpost {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 50px;
  height: 50px;
  background-color: #3371ff;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
  transition: bottom 0.3s ease;
  display: flex;
  justify-content: center;
  align-items: center;
}

.newpost:hover {
  background-color: #4381ff;
}

@media screen and (max-width: 700px) {
  h1 {
    --at-apply: "font-black mb-4 text-(3xl neutral-800) dark:text-neutral-100";
  }
}

.scroll-top {
  position: fixed;
  bottom: 20px;
  right: 80px;
  width: 50px;
  height: 50px;
  /* red */
  background-color: #ff3333;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
  transition: bottom 0.3s ease;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

.showBtn {
  display: flex;
  opacity: 1;
}

.hideBtn {
  display: none;
}

.active {
  color: rgb(96 165 250);
}
