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

@font-face {
    font-family: 'ibm-vga';
    font-style: normal;
    font-weight: 400;
    src: url('/public/fonts/Web437_IBM_VGA_8x16.woff')
}

@layer base {
    html {
        font-family: ibm-vga, monospace;
        font-size: 17px;
    }
    b {
        @apply text-white font-normal
    }

    a {
        @apply text-blue-400 hover:text-blue-300 underline
    }

    h1 {
        @apply text-shadow-md font-bold shadow-zinc-950 text-white
    }

    h2 {
        @apply text-shadow-sm font-bold shadow-zinc-950 text-white text-xl
    }

    hr {
        @apply border-zinc-500 drop-shadow-pixel-sm shadow-zinc-900
    }

}

/* https://pixelcorners.lukeb.co.uk */
.pixel-corner-sm {
    clip-path: polygon(
        0px calc(100% - 2px),
        1px calc(100% - 2px),
        1px calc(100% - 1px),
        2px calc(100% - 1px),
        2px 100%,
        calc(100% - 2px) 100%,
        calc(100% - 2px) calc(100% - 1px),
        calc(100% - 1px) calc(100% - 1px),
        calc(100% - 1px) calc(100% - 2px),
        100% calc(100% - 2px),
        100% 2px,
        calc(100% - 1px) 2px,
        calc(100% - 1px) 1px,
        calc(100% - 2px) 1px,
        calc(100% - 2px) 0px,
        2px 0px,
        2px 1px,
        1px 1px,
        1px 2px,
        0px 2px
    );
}

.pixel-corner-md {
    clip-path: polygon(
        0px calc(100% - 3px),
        3px calc(100% - 3px),
        3px 100%,
        calc(100% - 3px) 100%,
        calc(100% - 3px) calc(100% - 3px),
        100% calc(100% - 3px),
        100% 3px,
        calc(100% - 3px) 3px,
        calc(100% - 3px) 0px,
        3px 0px,
        3px 3px,
        0px 3px
    );
}