Shramkoweb/Portfolio

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

::selection {
  @apply bg-emerald-500;
  color: #fefefe;
}

html {
  min-width: 360px;
  scroll-behavior: smooth;
}

#__next {
  @apply bg-gray-50 dark:bg-gray-900;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.skip-nav {
  @apply absolute px-4 py-3 transition-transform duration-200 transform -translate-y-12 -left-1/4 focus:top-4 focus:translate-y-3 -top-8;
}

#skip {
  scroll-margin-top: 1.125rem;
}

.prose .anchor {
  @apply absolute invisible no-underline;

  margin-left: -1em;
  padding-right: 0.5em;
  width: 80%;
  max-width: 700px;
  cursor: pointer;
}

.anchor:hover {
  @apply visible;
}

.prose a {
  @apply transition-colors no-underline;
}

.prose .anchor:after {
  @apply text-gray-300 dark:text-gray-700;
  content: '#';
}

.prose code:after,
.prose code:before {
  content: ''
}

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

.prose pre {
  @apply border border-gray-300 bg-gray-50 dark:border-gray-700 dark:bg-gray-900;
}

.prose code:not([class*='language-']) {
  @apply text-gray-800 px-1 py-0.5 rounded-md bg-indigo-200 font-medium  ;
}

.prose pre code {
  @apply text-gray-800 dark:text-gray-200 p-0;
  border: initial;
}

.prose > :first-child:not(img) {
  margin-top: 1.25em;
  margin-bottom: 1.25em;
}

.inverted {
  margin-top: 4rem;
  margin-bottom: 4rem;
}

.dark img.inverted {
  filter: invert(1);
}

.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
  @apply text-gray-700 dark:text-gray-300;
}

.token.punctuation {
  @apply text-gray-700 dark:text-gray-300;
}

.token.property,
.token.tag,
.token.boolean,
.token.number,
.token.constant,
.token.symbol,
.token.deleted {
  @apply text-green-500;
}

.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted {
  @apply text-purple-500;
}

.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string {
  @apply text-yellow-500;
}

.token.atrule,
.token.attr-value,
.token.keyword {
  @apply text-blue-500;
}

.token.function,
.token.class-name {
  @apply text-pink-500;
}

.token.regex,
.token.important,
.token.variable {
  @apply text-yellow-500;
}

code[class*='language-'],
pre[class*='language-'] {
  @apply text-gray-800 dark:text-gray-50;
}

pre::-webkit-scrollbar {
  display: none;
}

pre {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.rehype-code-title {
  @apply px-5 py-2 font-mono text-xs font-bold text-gray-800 bg-gray-200 border border-b-0 border-gray-200 rounded-t-lg dark:text-gray-200 dark:border-gray-700 dark:bg-gray-800;
}

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

.highlight-line {
  @apply block px-4 -mx-4 bg-gray-200 border-l-4 border-blue-500 dark:bg-gray-800;
}

/* Remove Safari input shadow on mobile */
input[type='text'],
input[type='email'] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.share {
  padding-top: 7px;
  position: sticky;
  top: 50px;
  left: 0;
  transform: translateX(-200%);
}

.bg-pattern {
  background: radial-gradient(circle, transparent 20%, currentColor 20%, currentColor 80%, transparent 80%, transparent), radial-gradient(circle, transparent 20%, currentColor 20%, currentColor 80%, transparent 80%, transparent) 25px 25px, linear-gradient(#2f2f2f 2px, transparent 2px) 0 -1px, linear-gradient(90deg, #2f2f2f 2px, currentColor 2px) -1px 0;
  background-size: 25px 25px, 50px 50px, 15px 15px, 15px 15px;
  opacity: .8
}