@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');

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

.text-transparent {
    color                  : rgba(0, 0, 0, 0);
    -webkit-text-stroke    : 1px black;
    -webkit-font-smoothing : antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering         : optimizeLegibility;
}

.container {
    @apply lg:px-0 px-4
}

.markdown {
    @apply text-gray-800
}

.markdown h1 {
    @apply mt-8 text-4xl font-semibold mb-6 border-b pb-2
}

.markdown h2 {
    @apply mt-6 text-2xl font-semibold mb-4
}

.markdown h3 {
    @apply mt-6 text-xl font-semibold mb-4
}

.markdown h4 {
    @apply mt-6 text-lg font-semibold mb-4
}

.markdown p {
    @apply my-2
}

.markdown strong {
    @apply font-semibold
}

.markdown blockquote {
    @apply pl-4 bg-gray-100 border-l-4 border-red-500 py-2 pr-2 my-2 rounded
}

.markdown ul{
    @apply list-disc pl-6
}

.markdown ol{
    @apply list-decimal pl-6
}



.markdown code:not([class]){
    @apply rounded bg-gray-100 py-2 px-1 inline
}

.markdown img {
    @apply max-w-full mx-auto rounded my-2
}

.markdown a {
    @apply text-red-500 hover:text-red-700
}


.mouse {
    margin: 0 auto;
    display: block;
    border-radius: 50px;
    border: 2px solid #000;
    height: 60px;
    width: 30px;
    position: relative;
  }

  .move {
    position: absolute;
    background-color: #000;
    height: 10px;
    width: 10px;
    border-radius: 50%;
    left: 50%;
    transform: translateX(-50%);
    animation: move 2s linear infinite;
  }

  @keyframes move {
    0% {
      transform: translate(-50%,10px);
      opacity: 0;
    }
    50% {
      transform: translate(-50%,30px);
      opacity: 1;
    }
    100% {
      transform: translate(-50%,45px);
      opacity: 0;
    }
  }



@layer utilities {
    @variants responsive {
        .masonry {
            column-gap: 1.5em;
            column-count: 1;
        }
        .masonry-sm {
            column-gap: 1.5em;
            column-count: 2;
        }
        .masonry-md {
            column-gap: 1.5em;
            column-count: 3;
        }
        .break-inside {
            break-inside: avoid;
        }

    }
}