@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
    * {
        user-select: none;
    }
    @font-face {
        font-family: SFregular;
        src: url("./assets/font/SF-Pro-Display-Medium.otf");
    }
    @font-face {
        font-family: SFsemi;
        src: url("./assets/font/SF-Pro-Display-Bold.otf");
    }
    body {
        overflow: hidden;
        user-select: none;
    }
     :root {
        --radial-gradient-background: 250, 250, 250;
        --solid-color-background: 15, 15, 15;
        --overlay-color: 255, 255, 255;
    }
    body {
        @apply bg-neutral-950;
    }
    .radial-gradient {
        background: radial-gradient( circle at 50% 0%, rgba(var(--radial-gradient-background), 0.05) 0%, transparent 60%) rgba(var(--solid-color-background), 1);
    }
    .linear-mask {
        mask-image: linear-gradient( -75deg, white calc(var(--x) + 20%), transparent calc(var(--x) + 30%), white calc(var(--x) + 100%));
        -webkit-mask-image: linear-gradient( -75deg, white calc(var(--x) + 20%), transparent calc(var(--x) + 30%), white calc(var(--x) + 100%));
    }
    .linear-overlay {
        background-image: linear-gradient( -75deg, rgba(var(--overlay-color), 0.1) calc(var(--x) + 20%), rgba(var(--overlay-color), 0.5) calc(var(--x) + 25%), rgba(var(--overlay-color), 0.1) calc(var(--x) + 100%));
        mask: linear-gradient(black, black) content-box, linear-gradient(black, black);
        -webkit-mask: linear-gradient(black, black) content-box, linear-gradient(black, black);
        mask-composite: exclude;
        -webkit-mask-composite: xor;
    }
}