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

@layer base {
  h1 {
    font-size: 2.5em;
  }
  h2 {
    font-size: 2em;
  }
  h3 {
    font-size: 1.6em;
  }
  h4 {
    font-size: 1.2em;
  }
}

@layer components {
  .btn {
    @apply px-5 py-3 font-medium text-white transition duration-200 ease-in-out rounded shadow bg-primary-600 hover:bg-opacity-75;
  }

  .pop-btn {
    @apply px-2 py-2 text-sm text-black rounded shadow bg-green-200 hover:bg-green-100;
  }

  .card {
    @apply max-w-md p-8 overflow-hidden bg-white rounded shadow-md;
  }

  .input {
    @apply block py-1 text-gray-500 border-gray-300 rounded shadow-sm focus:ring-yellow-300 focus:border-primary-50;
  }

  .link {
    @apply cursor-pointer text-primary-600 hover:text-primary-500 dark:text-primary-400 dark:hover:text-primary-300;
  }
  .splash-bg {
    background: linear-gradient(65deg, #414b61 0 45%, #2d3343 45% 100%);
  }
  .img-effect {
    --m:
      radial-gradient(circle farthest-side at right,#000 99%,#0000) 0 100%/46% 92% no-repeat,
      radial-gradient(circle farthest-side at left,#000 99%,#0000) 100% 0/46% 92% no-repeat;
    -webkit-mask: var(--m);
            mask: var(--m);
  }

  @keyframes svg-glow {
    from { stroke: #FF0000; }
    to { stroke: #00FF00; }
  } 
  .shape-effect, .circle-effect {
    fill:transparent;
  } 
  .circle-effect {
    animation: svg-glow 1.5s ease-in-out infinite alternate;
  } 
  .shape-effect:hover {
    fill:green;
    fill-opacity:0.3;
  }
}

:root {
  /* This is used for the spinner and progress bar */
  --color-primary-500: #00bfd8;
}

@media (pointer: fine) {
  ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }

  /* Track */
  ::-webkit-scrollbar-track {
    @apply bg-gray-100 dark:bg-gray-700;
  }

  /* Handle */
  ::-webkit-scrollbar-thumb {
    @apply bg-gray-300 dark:bg-gray-500;
  }

  /* Handle on hover */
  ::-webkit-scrollbar-thumb:hover {
    @apply bg-gray-400 dark:bg-gray-400;
  }
}
