input.css

@import url(https://fonts.cdnfonts.com/css/bahnschrift);
@import url(https://fonts.googleapis.com/css?family=Raleway);
@import url(https://fonts.googleapis.com/css?family=Bree+Serif);
@import url(https://fonts.googleapis.com/css?family=Fira+Code);
@import url(https://fonts.googleapis.com/css?family=Roboto);
@import url(https://www.nerdfonts.com/assets/css/webfont.css);

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

/* continues the footer's colour */
body {
  @apply bg-darkpurple;
}

@layer components {
  .sliding-underline {
    @apply after:block after:absolute after:h-1 after:m-auto after:w-0 after:top-6 after:-inset-1 after:bg-[transparent] relative inline-block
    after:transition-[width,background-color] duration-200 hover:after:w-full hover:after:bg-darkpurple;
  }
  .sliding-underline-low {
    @apply sliding-underline after:top-11;
  }
  .sliding-underline-yellow {
    @apply sliding-underline hover:after:bg-yellow;
  }
  .sliding-underline-yellow-low {
    @apply sliding-underline-yellow after:top-8;
  }
  .sliding-underline-beige {
    @apply sliding-underline hover:after:bg-beige;
  }

  /* adds the underline to the current page on the header */
  [aria-current="page"] {
    @apply after:w-full after:bg-yellow;
  }

  /* used in ContentResumeLines */
  .list-arrow {
    @apply *:before:content-['>'] *:before:font-mono *:before:text-lg *:before:mr-2;
  }

  .fixed-center {
    @apply top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2;
  }

  .fullscreen_container {
    @apply fixed fixed-center h-[120%] w-[120%] backdrop-blur-sm backdrop-brightness-50 z-50;
  }

  .fullscreen_img {
    @apply h-[90vh] w-[90vw] object-contain fixed fixed-center mt-8;
  }

  /* title */
  .title-text-stroke {
    -webkit-text-stroke: 2px #ab21df;

    @media (min-width: 768px) {
      -webkit-text-stroke: 4px #ab21df;
    }
  }

  /* .styled-body is applied to a container of markdown to html formatted text */
  .styled-body {
    @apply space-y-4;
  }
  .styled-body a {
    @apply underline text-purple;
  }
  .styled-body code {
    /* code snippets `` and `````` */
    @apply bg-[#00000018];
  }
  .styled-body pre code {
    /* code blocks `````` */
    @apply rounded-lg p-2;
  }
  .styled-body ul {
    @apply list-disc ml-4;
  }
  .styled-body ol {
    @apply list-decimal ml-4;
  }
  .styled-body blockquote {
    @apply border-l-4 border-purple pl-2 font-line;
  }

  .styled-body-cols ul {
    @apply columns-3;
  }
}