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

.remark-code-title {
  @apply px-5 py-3 font-mono text-sm font-bold text-gray-200 bg-gray-700 rounded-t;
}

@layer base {
  html {
    scroll-behavior: smooth;
  }
}

.remark-code-title + div > pre {
  @apply mt-0 rounded-t-none;
}

.task-list-item:before {
  @apply hidden;
}

.code-line {
  @apply pl-4 -mx-4 border-l-4 border-gray-800;
}

.highlight-line {
  @apply -mx-4 bg-gray-700 bg-opacity-50 border-l-4 border-primary-500;
}

.line-number::before {
  @apply pr-4 -ml-2 text-gray-400;
  content: attr(line);
}

/* Some of these fonts don't exist 
 * https://www.coltborg.com/style-a-blockquote-using-tailwind-css/
.stylistic-quote-mark {
  font-size: 5rem;
  right: 100%;
  @apply mr-2 hidden font-dank-mono text-neutral-500 absolute top-0 leading-none;
}

@screen sm {
  .stylistic-quote-mark {
    @apply block;
  }
}*/

.video-responsive {
  overflow: hidden;
  padding-bottom: 56.25%;
  position: relative;
  height: 0;
}

.video-responsive iframe {
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  position: absolute;
}