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

@layer base {
    body {
        font-variant-numeric: slashed-zero;
    }
    @font-face {
        font-family: 'PolySans';
        font-style: normal;
        font-weight: 100;
        font-display: swap;
        src: url('/fonts/PolySans-Slim.woff2') format('woff2');
    }
    @font-face {
        font-family: 'PolySans';
        font-style: italic;
        font-weight: 100;
        font-display: swap;
        src: url('/fonts/PolySans-SlimItalic.woff2') format('woff2');
    }
    @font-face {
        font-family: 'PolySans';
        font-style: normal;
        font-weight: 400;
        font-display: swap;
        src: url('/fonts/PolySans-Neutral.woff2') format('woff2');
    }
    @font-face {
        font-family: 'PolySans';
        font-style: italic;
        font-weight: 400;
        font-display: swap;
        src: url('/fonts/PolySans-NeutralItalic.woff2') format('woff2');
    }
    @font-face {
        font-family: 'PolySans';
        font-style: normal;
        font-weight: 500;
        font-display: swap;
        src: url('/fonts/PolySans-Median.woff2') format('woff2');
    }
    @font-face {
        font-family: 'PolySans';
        font-style: italic;
        font-weight: 500;
        font-display: swap;
        src: url('/fonts/PolySans-MedianItalic.woff2') format('woff2');
    }
    @font-face {
        font-family: 'PolySans';
        font-style: normal;
        font-weight: 700;
        font-display: swap;
        src: url('/fonts/PolySans-Bulky.woff2') format('woff2');
    }
    @font-face {
        font-family: 'PolySans';
        font-style: italic;
        font-weight: 700;
        font-display: swap;
        src: url('/fonts/PolySans-BulkyItalic.woff2') format('woff2');
    }
}

@layer components {
    .table tbody > tr:hover > td {
        @apply bg-grey-50;
    }
    .table tbody > tr:first-child > td:first-child {
        @apply rounded-tl-xl;
    }
    .table tbody > tr:first-child > td:last-child {
        @apply rounded-tr-xl;
    }
    .table tbody > tr:last-child > td:first-child {
        @apply rounded-bl-xl;
    }
    .table tbody > tr:last-child > td:last-child {
        @apply rounded-br-xl;
    }
}

@layer utilities {
    .text-blurred {
        color: transparent;
        text-shadow: 0 0 7px rgba(0, 0, 0, 0.5);
    }
}