@import "tailwindcss";

@layer base {
    h1 {
        font-family: "VT323";
    }

    body {
        font-family: "Roboto Mono" serif;
        background-color: #030712;
        background-image:
            linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)),
            radial-gradient(#3c3c3c 1px, transparent 0);
        background-size: 20px 20px;
        color: white;
    }


}

@layer components {
    .card {
        @apply basis-full lg:basis-[calc(33.333%-1rem)] border border-gray-700 p-4 bg-zinc-800/25 backdrop-blur-3xl rounded-sm hover:border-zinc-500/50 hover:scale-110 transition;
    }

    .card .cover {
        @apply w-fit mb-4 rounded-sm h-50;
    }
}