html,
body {
  padding: 0;
  margin: 0;
  margin-right: 0 !important;
  font-family: "Sen", -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
    Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
}

a {
  color: inherit;
  text-decoration: none;
}

* {
  box-sizing: border-box;
}

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

body {
  @apply bg-primary text-accent;
}

ul {
  list-style: disc inside;
}

.circle-1 {
  will-change: transform;
  animation: circle-1-keyframes 13s ease-in-out infinite alternate;
}

.circle-2 {
  will-change: transform;
  animation: circle-2-keyframes 8s ease-in-out infinite alternate;
}

.circle-3 {
  will-change: transform;
  animation: circle-3-keyframes 18s ease-in-out infinite alternate;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 7px;
  height: 3px;
}

::-webkit-scrollbar-track {
  border-radius: 10px;
  background-color: transparent;
}

::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background: #4b515b;
}

::-webkit-scrollbar-thumb:hover {
  background: #5c636e;
}

@keyframes circle-1-keyframes {
  0% {
  }
  100% {
    transform: translateX(200px) translateY(50px);
  }
}

@keyframes circle-2-keyframes {
  0% {
  }
  100% {
    transform: translateX(300px) translateY(-25px);
  }
}

@keyframes circle-3-keyframes {
  0% {
  }
  100% {
    transform: translateX(250px) translateY(25px);
  }
}

.prose .anchor {
  @apply invisible absolute -ml-8 cursor-pointer pr-1 no-underline;
  width: 80%;
  max-width: 700px;
}

.anchor:hover {
  @apply visible;
}

.prose .anchor::after {
  @apply text-gray-600;
  content: "#";
}

.prose *:hover > .anchor {
  @apply visible;
}

div[data-rehype-pretty-code-fragment] code {
  display: grid;
}

div[data-rehype-pretty-code-fragment] {
  overflow: hidden;
  @apply my-8 rounded-xl leading-6;
}

div[data-rehype-pretty-code-fragment] pre {
  overflow-x: scroll;
  @apply bg-secondary px-5 py-3 text-sm leading-7;
}

.will-change-opacity {
  will-change: opacity;
}
