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

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

  * {
    box-sizing: border-box;
  }

  body {
    @apply m-0 p-0 font-sans;
  }

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

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

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

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

@layer components {
}

@layer utilities {
  .text-primary {
    @apply text-black dark:text-white;
  }

  .text-secondary {
    @apply text-black/80 dark:text-white/80;
  }

  .text-tertiary {
    @apply text-black/60 dark:text-white/60;
  }

  .text-quaternary {
    @apply text-black/40 dark:text-white/40;
  }

  .flip-card {
    background-color: transparent;
    perspective: 1000px; /* Remove this if you don't want the 3D effect */
  }

  /* This container is needed to position the front and back side */
  .flip-card-inner {
    position: relative;
    transition: transform 0.8s;
    transform-style: preserve-3d;
  }

  .rotate-y-180 {
    transform: rotateY(180deg);
  }

  /* .flip-card:hover .flip-card-inner {
    transform: rotateY(180deg);
  } */

  .flip-card-front,
  .flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden; /* Safari */
    backface-visibility: hidden;
  }

  .flip-card-back {
    transform: rotateY(180deg);
  }
}

.container {
  display: grid;
  grid-template-columns: 20% 20% 20% 20%;
  grid-template-rows: masonry;
  align-tracks: start; 
  justify-tracks: start;
}
