style.css

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

html {
    font-feature-settings: "rlig" 1, "calt" 1, "ss01" 1, "ss06" 1 !important;
}

[data-reach-skip-link] {
    @apply sr-only;
}

[data-reach-skip-link]:focus {
    @apply not-sr-only fixed ml-6 top-0 bg-white text-lg px-6 py-2 mt-2 outline-none focus:ring z-50;
}

.dark .invert-on-dark {
    filter: invert(1) brightness(1.8);
}

body {
    background: linear-gradient(
            to bottom,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 1) 300px
    ),
    fixed 0 0 / 20px 20px radial-gradient(#d1d1d1 1px, transparent 0),
    fixed 10px 10px / 20px 20px radial-gradient(#d1d1d1 1px, transparent 0);
}

.dark body {
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, #111 300px),
    fixed 0 0 / 20px 20px radial-gradient(#313131 1px, transparent 0),
    fixed 10px 10px / 20px 20px radial-gradient(#313131 1px, transparent 0);
}

/*
see: https://stackoverflow.com/a/50084247
*/
svg text{
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}