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

@layer base {
  :root {
    --background: 243 241 239;
    --foreground: 44 40 37;
  }
  
  .dark {
    --background: 44 40 37;
    --foreground: 243 241 239;
  }
  
  body {
    @apply bg-warm-white text-warm-grey dark:bg-warm-grey dark:text-warm-white;
  }
}

@keyframes wave {
  0%, 100% {
    transform: translateY(0);
    opacity: 0.5;
  }
  50% {
    transform: translateY(-3px);
    opacity: 1;
  }
}

@font-face {
  font-family: "NanumPenScript";
  font-weight: 400;
  font-display: block;
  font-style: normal;
  font-named-instance: "Regular";
  src: url("/fonts/NanumPenScript.woff2") format("woff2");
}

.backdrop-blur {
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

.backdrop-blur-nav {
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

code {
  counter-reset: step;
  counter-increment: step 0;
}

code .line::before {
  content: counter(step);
  counter-increment: step;
  @apply mr-8 inline-block w-4 text-right text-warm-grey-2;
}

.mask {
  mask-image: radial-gradient(rgba(0, 0, 0, 1) 0%, transparent 80%);
}

a {
  @apply scroll-my-24 decoration-warm-grey-2 transition-all;
}

.anchor-link {
  @apply invisible absolute -ml-4 w-3/4 max-w-2xl cursor-pointer pr-2 no-underline;
}

.anchor-link:hover {
  @apply visible;
}

.anchor-link:after {
  @apply text-warm-grey-2 dark:text-warm-grey-1;
  content: "#";
}

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