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

@layer base {
  @font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('/fonts/inter.ttf') format('ttf');
  }

  .capsize::before {
    content: '';
    margin-bottom: -0.098em;
    display: table;
  }

  .capsize::after {
    content: '';
    margin-top: -0.219em;
    display: table;
  }

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

  pre {
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
  }

  /* https://seek-oss.github.io/capsize/ */
  .capsize::before {
    content: '';
    margin-bottom: -0.098em;
    display: table;
  }

  .capsize::after {
    content: '';
    margin-top: -0.219em;
    display: table;
  }

  ::-moz-selection {
    color: #fff;
    background: #000;
  }

  .light ::selection {
    color: #fff;
    background: #000;
  }

  .dark ::selection {
    background: #fff;
    color: #000;
  }

  html {
    @apply max-h-screen antialiased;
  }

  * {
    box-sizing: border-box;
  }

  body {
    @apply min-h-screen select-none bg-zinc-50 text-zinc-900 antialiased dark:bg-zinc-900 dark:text-zinc-50;
    /* PWA enhancements */
	  -webkit-overflow-scrolling: touch;
	  -webkit-tap-highlight-color: transparent;
	  -webkit-touch-callout: none;
    
  bottom {
    @apply min-h-screen select-none bg-zinc-50 text-zinc-900 antialiased dark:bg-zinc-900 dark:text-zinc-50;
  }

  }


  body:after {
    content: '';
    position: fixed;
    top: -50%;
    right: -50%;
    bottom: -50%;
    left: -50%;
    z-index: -1;
    @apply bg-white dark:bg-black;
  }
}

@layer components {
  /* needed to override tailwind forms styles */
  select {
    @apply w-full px-4 py-2 border border-gray-200 rounded outline-none text-primary bg-gray-1000 bg-opacity-5 hover:bg-opacity-10 focus:border-gray-1000 focus:outline-none focus:ring-0 dark:border-gray-800 dark:bg-white dark:focus:border-gray-600;
  }

  button:focus,
  a:focus {
    @apply outline-none ring-2 ring-blue-500 ring-offset-2 ring-offset-white dark:ring-blue-500 dark:ring-offset-black;
  }

  button:active:not(:focus-visible),
  a:active:not(:focus-visible),
  button:focus:not(:focus-visible),
  a:focus:not(:focus-visible) {
    @apply outline-none ring-0 ring-offset-0;
  }

  /* input[type='text'],
  textarea {
    @apply bg-white border border-gray-200 outline-none dark:border-gray-700 dark:bg-gray-800;
  } */

  input[type='checkbox'] {
    @apply dark:border-gray-600 dark:bg-gray-700;
  }

  /* input:focus,
  textarea:focus {
    @apply outline-none ring-2 ring-blue-500 ring-offset-2 ring-offset-white dark:ring-offset-black;
  } */

  .font-list-heading {
    @apply font-sans text-lg font-bold text-primary;
  }

  .tabbed-navigation::-webkit-scrollbar {
    display: none;
  }

  .light .bg-dots {
    background: linear-gradient(90deg, #f9fafb 15px, transparent 1%) center,
      linear-gradient(#f9fafb 15px, transparent 1%) center, rgba(0, 0, 0, 0.24);
    background-size: 16px 16px;
  }

  .dark .bg-dots {
    background: linear-gradient(90deg, #050505 15px, transparent 1%) center,
      linear-gradient(#050505 15px, transparent 1%) center,
      rgba(255, 255, 255, 0.12);
    background-size: 16px 16px;
  }
}

/* Your own custom utilities */
@layer utilities {
  .text-primary {
    @apply text-gray-1000 dark:text-gray-100;
  }

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

  .text-tertiary {
    @apply text-gray-500 dark:text-gray-400;
  }

  .text-quaternary {
    @apply text-gray-400 dark:text-gray-500;
  }

  .bg-elevated {
    @apply bg-gray-400 bg-opacity-5 dark:bg-gray-50;
  }

  .bg-primary {
    @apply bg-gray-100/60 dark:bg-gray-1000/70;
  }

  .highlight {
    @apply bg-black/10  dark:bg-white/[.06];
  }

  .button-primary-x {
    @apply flex space-x-2 flex-none items-center justify-center cursor-pointer leading-none transition-all font-semibold px-4 py-2 text-sm rounded-md text-gray-700 dark:text-gray-300 hover:text-gray-1000 shadow-sm bg-white dark:bg-gray-900 border border-gray-400 border-opacity-30 dark:border-opacity-30 dark:border-gray-500 dark:hover:text-white hover:border-opacity-50 dark:hover:border-opacity-50 hover:shadow-sm;
  }

  .button-primary-y {
    @apply flex space-x-2 flex-none items-center justify-center cursor-pointer leading-none font-semibold px-2 py-2 rounded-md text-gray-700 dark:text-gray-300 hover:text-gray-1000 shadow-sm bg-white dark:bg-gray-900 border border-gray-400 border-opacity-30 dark:border-opacity-30 dark:border-gray-500 dark:hover:text-white hover:border-opacity-50 dark:hover:border-opacity-50 hover:shadow-sm;
  }

  .filter-none {
    filter: none;
  }

  .filter-grayscale {
    filter: grayscale(100%);
  }

  .filter-saturate {
    -webkit-filter: brightness(105%) saturate(200%) contrast(1);
    filter: brightness(105%) saturate(200%) contrast(1);
  }

  .filter-blur {
    backdrop-filter: saturate(180%) blur(25px);
  }

  .highlight-link-hover {
    @apply -mx-0.5 rounded-sm bg-opacity-20 px-0.5 text-gray-1000 no-underline dark:bg-opacity-100 dark:text-gray-300 md:hover:bg-yellow-400 md:hover:bg-opacity-30 md:dark:hover:bg-yellow-500 md:dark:hover:bg-opacity-100 md:dark:hover:text-gray-1000;
  }

  .highlight-link {
    @apply -mx-0.5 bg-opacity-20 px-0.5 text-gray-1000 dark:bg-gray-100 dark:bg-opacity-20 dark:text-gray-300 md:hover:bg-opacity-30 md:dark:hover:bg-yellow-500 md:dark:hover:bg-opacity-100 md:dark:hover:text-gray-1000;
  }

  .blink {
    animation: blink-animation 1.5s steps(2, start) infinite;
    -webkit-animation: blink-animation 1.5s steps(2, start) infinite;
  }
}

@font-face {
  font-family: 'Inter';
  font-weight: 100 900;
  src: url(/fonts/inter-var-latin.ttf) format('ttf');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
  font-display: optional;
  font-style: normal;
}

#__next {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}