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

@layer base {
    body {
        @apply bg-gray-900 text-white;
    }
}

@layer components {
    .btn {
        @apply px-4 py-2 rounded-lg font-semibold transition-colors duration-200;
    }

    .btn-primary {
        @apply bg-indigo-600 hover:bg-indigo-700 text-white;
    }

    .btn-secondary {
        @apply bg-gray-700 hover:bg-gray-600 text-white;
    }

    .pixel-mask {
        position: relative;
        width: 310px;
        height: 680px;
        margin: 0 auto;
        overflow: hidden;
        border-radius: 30px;
        box-shadow: 0 0 0 12px #2b2b2b, 0 0 0 14px #1e1e1e, 0 0 0 22px #101010;
        background-color: #000;
    }

    .iphone-mask {
        position: relative;
        width: 300px;
        height: 650px;
        margin: 0 auto;
        overflow: hidden;
        border-radius: 40px;
        box-shadow: 0 0 0 11px #1f1f1f, 0 0 0 13px #191919, 0 0 0 20px #111;
    }

    .iphone-mask::before {
        content: "";
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        height: 30px;
        width: 60%;
        background-color: #1f1f1f;
        border-bottom-left-radius: 20px;
        border-bottom-right-radius: 20px;
        z-index: 10;
    }

    .iphone-mask img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}

@layer utilities {
    .transition-all {
        transition-property: all;
        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
        transition-duration: 150ms;
    }

    .duration-300 {
        transition-duration: 300ms;
    }

    @variants responsive {

        /* Hide scrollbar for Chrome, Safari and Opera */
        .no-scrollbar::-webkit-scrollbar {
            display: none;
        }

        /* Hide scrollbar for IE, Edge and Firefox */
        .no-scrollbar {
            -ms-overflow-style: none;
            /* IE and Edge */
            scrollbar-width: none;
            /* Firefox */
        }
    }
}