:root {
    --vibrant-purple: #BD2DFF;
    --my-black: #000;
    --my-white: #fff;
}

body {
    font-family: 'Fira Code', monospace;
    background-color: #000;
    color: #fff;
    background-image: radial-gradient(#141414 2px, transparent 2px);
    background-size: 20px 20px;
}

.text-vibrant-purple {
    color: var(--vibrant-purple);
}

.bg-vibrant-purple {
    background-color: var(--vibrant-purple);
}

.border-vibrant-purple {
    border-color: var(--vibrant-purple);
}

.shadow-neon {
    box-shadow: 8px 8px 0px var(--vibrant-purple);
}

.shadow-neon-hover:hover {
    box-shadow: 12px 12px 0px var(--vibrant-purple);
}

.btn {
    @apply inline-block px-6 py-3 border-2 border-white text-white uppercase font-bold text-sm transition-all duration-200 shadow-neon;
}

.btn:hover {
    @apply transform -translate-x-1 -translate-y-1 shadow-neon-hover;
}

.btn-primary {
    @apply border-vibrant-purple bg-vibrant-purple text-black shadow-none;
}

.btn-primary:hover {
    @apply transform -translate-x-1 -translate-y-1 shadow-neon-hover;
}

.section-heading {
    @apply text-5xl font-extrabold mb-8 text-white uppercase relative inline-block;
}

.section-heading::after {
    content: '';
    @apply absolute left-0 bottom-0 w-full h-2 bg-vibrant-purple transform -skew-x-12;
}


.card {
    padding: 6;
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

.card:hover {
    /* transform: translateY(-5px); */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.dark .card {
    background-color: #2d3748;
    color: #e2e8f0;
}

.dark .card h2 {
    color: #f7fafc;
}

.dark .card p,
.dark .card a {
    color: #cbd5e0;
}

.show-all:hover {
    color: var(--vibrant-purple);
}