@tailwind base; /* Preflight is injected here */
@tailwind components;
@tailwind utilities;

@layer base {
  @font-face {
    /*https://style64.org/c64-truetype*/
    font-family: "C64 Pro Mono";
    font-weight: 400;
    src: url(/theme/font/C64_Pro_Mono-STYLE.woff2) format("woff");
  }

  html {
    /* text-lg == prose-lg */
    /* text-xl == prose-xl */
    @apply text-lg md:text-lg lg:text-xl font-texts text-rp-dawn-text dark:text-rp-moon-iris;
  }
  text {
    @apply text-rp-dawn-text dark:text-rp-moon-iris;
  }
  a {
    @apply underline decoration-2 underline-offset-4 decoration-rp-dawn-gold dark:decoration-rp-moon-pine;
  }
  a:hover {
    @apply underline decoration-2 underline-offset-4 decoration-rp-dawn-foam dark:decoration-rp-moon-rose;
  }
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    @apply font-headings text-rp-dawn-text dark:text-rp-moon-love;
  }
  h1 {
    @apply text-5xl md:text-7xl mb-9;
  }
  h2 {
    @apply text-4xl md:text-5xl mb-9;
  }
  h3 {
    @apply text-3xl md:text-4xl;
  }
  /*for unknown reasons, h4 must be undefined to not make it bigger than h3*/
  /*h5-h6 are ignored by tailwind typography*/
  img {
    @apply drop-shadow-lg;
  }
  dd {
    @apply ml-12 md:ml-24;
  }
  ul {
    @apply pl-4 list-disc;
  }

  /* pelican tag_cloud */
  ul.tagcloud {
    @apply list-none p-0;
  }
  ul.tagcloud li {
    @apply inline-block p-1;
  }
}

@layer components {
  /*This does not seem to affect prismjs which is good*/
  code {
    @apply bg-rp-dawn-highlight-low dark:bg-rp-moon-highlight-low;
  }
}

/*Hide heading anchor links unless hovering over them*/
.headerlink {
  @apply no-underline text-rp-dawn-love ml-1 md:ml-2 hover:no-underline;
}

.note {
  @apply bg-rp-dawn-highlight-med dark:bg-rp-moon-highlight-med m-8 p-4;
}
.warn {
  @apply bg-rp-dawn-text text-rp-dawn-base dark:bg-rp-moon-text dark:text-rp-moon-base m-8 p-4;
}

/*Attempt to only float thumbnails to the right*/
.image-process-article-image,
.image-process-thumb,
.image-process-responsive {
  /*@apply lg:float-right p-2 lg:p-4;*/
  @apply lg:float-right px-1 lg:px-3;
}

#skiptocontent a {
  position: absolute;
  top: -40px;
  left: 0px;
  /*color: white;*/
  /*border-right: 1px solid white;*/
  /*border-bottom: 1px solid white;*/
  z-index: 100;
  @apply bg-rp-dawn-text text-rp-dawn-surface dark:bg-rp-moon-text dark:text-rp-moon-surface;
}

#skiptocontent a:focus {
  position: absolute;
  left: 0px;
  top: 0px;
  outline-color: transparent;
}