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

.bg-grid {
    background-size: 30px 30px;
    background-image: radial-gradient(rgba(0, 0, 0, 0.1) 1.5px, transparent 1.5px);
}

.mask-grid {
    mask-size: 30px 30px;
    mask-image: radial-gradient(black 1.5px, rgba(0, 0, 0, 0.15) 1.5px);
    -webkit-mask-size: 30px 30px;
    -webkit-mask-image: radial-gradient(black 1.5px, rgba(0, 0, 0, 0.15) 1.5px);
}

.mask-radial-fade {
    mask-image: radial-gradient(ellipse at center, black 10%, transparent 70%);
    -webkit-mask-image: radial-gradient(ellipse at center, black 10%, transparent 70%);
}

.mask-spotlight {
    mask-image: radial-gradient(400px circle at var(--mouse-x, 50%) var(--mouse-y, -100%), black 0%, transparent 80%);
    -webkit-mask-image: radial-gradient(400px circle at var(--mouse-x, 50%) var(--mouse-y, -100%), black 0%, transparent 80%);
}