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

@font-face {
    font-family: "DM Sans";
    src: url("/fonts/dm-sans.ttf") format("TrueType");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@layer base {
    ::-webkit-scrollbar {
        display: none !important; /* Chrome */
    }

    .no-scrollbar {
        -ms-overflow-style: none !important; /* Edge */
        scrollbar-width: none !important; /* Firefox */
    }

    html,
    body {
        @apply scroll-smooth underline-offset-[3px];
        scroll-padding-top: 64px;
    }

    body {
        @apply font-sans bg-white w-screen overflow-x-hidden;
    }

    main {
        @apply text-lg;
    }

    .lesson-content {
        @apply space-y-3;

        h1 {
            @apply text-3xl font-bold pt-6 first-of-type:pt-0;
        }

        h2 {
            @apply text-2xl font-bold pt-6;
        }

        li {
            @apply list-disc ml-5;
        }

        img {
            @apply rounded-xl;
        }

        .astro-code {
            @apply rounded-xl p-3;
        }

        code {
            @apply bg-zinc-200 px-2 rounded-md text-base;
        }

        pre {
            code {
                @apply [all:unset];
            }
        }
    }

    a {
        @apply underline;
    }

    .hero-description {
        @apply text-center py-7 text-2xl;
    }
}

@layer components {
    .content {
        @apply space-y-7;
    }

    .legal {
        @apply space-y-5 px-5 md:px-0 md:py-10 w-full md:w-3/4 mx-auto;

        h1 {
            @apply text-4xl font-bold;
        }

        h2 {
            @apply text-3xl font-bold;
        }

        h3 {
            @apply text-2xl font-bold;
        }

        h4 {
            @apply text-xl font-bold;
        }

        li {
            @apply list-disc ml-5;
        }
    }

    .btn-sm {
        @apply px-4 py-1 text-base rounded-xl cursor-pointer no-underline;
    }

    .btn-md {
        @apply px-5 py-2 text-lg rounded-xl cursor-pointer no-underline;
    }

    .btn-lg {
        @apply px-6 py-3 text-xl rounded-xl cursor-pointer no-underline;
    }

    .btn-git {
        @apply bg-git-gradient text-white shadow-2xl shadow-rose-500;
    }

    .btn-github {
        @apply bg-github-gradient text-white shadow-2xl shadow-purple-500;
    }

    .text-git-gradient {
        @apply bg-gradient-to-br from-red-500 to-pink-500 bg-clip-text text-transparent;
    }

    .bg-git-gradient {
        @apply bg-gradient-to-br from-red-500 to-pink-500;
    }

    .bg-git-fade {
        @apply bg-gradient-to-tl from-rose-100 to-transparent border border-rose-500;
    }

    .text-github-gradient {
        @apply bg-gradient-to-br from-purple-500 to-blue-500 bg-clip-text text-transparent;
    }

    .bg-github-gradient {
        @apply bg-gradient-to-br from-purple-500 to-blue-500;
    }

    .bg-github-fade {
        @apply bg-gradient-to-tl from-purple-100 to-transparent border border-purple-500;
    }

    .bg-default-fade {
        @apply bg-gradient-to-tl from-zinc-100 to-transparent border;
    }

    .fade::after {
        @apply absolute top-0 left-0 h-full w-screen;
        content: " ";
        background: linear-gradient(
            90deg,
            #ffffff,
            transparent 20%,
            transparent 80%,
            #ffffff
        );
        position: absolute;
        inset: 0;
    }

    .bg-cs000-gradient {
        background: linear-gradient(
            to bottom right,
            #ef4444,
            #ec4899,
            #a855f7,
            #3b82f6
        );
    }

    .glow {
        position: relative;
        z-index: 1;
    }

    .glow::before {
        content: "";
        position: absolute;
        top: -50%;
        left: -50%;
        width: 500px;
        height: 500px;
        background: radial-gradient(
            circle,
            rgba(255, 0, 0, 0.25),
            rgba(0, 0, 0, 0)
        );
        filter: blur(100px);
        border-radius: 50%;
        z-index: -1;
    }

    .glow::after {
        content: "";
        position: absolute;
        top: -50%;
        right: -50%;
        width: 500px;
        height: 500px;
        background: radial-gradient(
            circle,
            rgba(111, 0, 255, 0.25),
            rgba(0, 0, 0, 0)
        );
        filter: blur(100px);
        border-radius: 50%;
        z-index: -1;
    }
}
