input.css

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

@layer base {
    /* outermost diouxus div, centers the scene */
    #main {
        @apply flex justify-center items-center text-center;
    }

    h1 {
        @apply mb-2 mt-0 text-2xl font-medium;
    }

    h2 {
        @apply mb-2 mt-0 text-lg font-medium;
    }
    
    h3 {
        @apply mb-2 mt-0 text-base font-medium;
    }

    label {
        @apply text-sm text-black;
    }

    input[type=text] {
        @apply text-base text-black;
    }

    button {
        @apply text-base text-white rounded-md box-border w-full h-[15vh] min-h-[15vh];
    }

    button:disabled {
        @apply brightness-[0.8];
    }

    p, ul {
        @apply text-base;
    }

    ol > li {
        @apply my-2;
    }

    .dice {
        @apply font-dice;
    }

    .icon {
        @apply w-[4vh] h-[4vh];
    }

    @font-face {
        font-family: 'dice';
        src: url('./dice-mono.woff2') format('woff2'),   /* Super Modern Browsers */
             url('./dice-mono.woff')  format('woff'),    /* Pretty Modern Browsers */
             url('./dice-mono.ttf')   format('truetype') /* Safari, Android, iOS */  
    }

    #rolling:after {
        content: "";
        color: rgb(188, 143, 143);
        animation: rolling 2s linear;
    }

    @keyframes rolling {
        0%   { content: "61"; }
        5%   { content: "42"; }
        10%  { content: "21"; }
        15%  { content: "32"; }
        20%  { content: "16"; }
        25%  { content: "53"; }
        30%  { content: "65"; }
        35%  { content: "54"; }
        40%  { content: "42"; }
        45%  { content: "34"; }
        50%  { content: "15"; }
        55%  { content: "26"; }
        60%  { content: "13"; }
        65%  { content: "21"; }
        70%  { content: "62"; }
        75%  { content: "34"; }
        80%  { content: "56"; }
        85%  { content: "43"; }
        90%  { content: "21"; }
        95%  { content: "45"; }
        100% { content: "63"; }
    }

    .scrollbox {
        /* Modified from:
         * https://stackoverflow.com/a/44794221 */
        overflow-y: scroll;
        background: /* Shadow covers */
        linear-gradient(white 30%, rgba(255, 255, 255, 0)), linear-gradient(rgba(255, 255, 255, 0), white 70%) 0 100%, /* Shadows */
        radial-gradient(farthest-side at 50% 0, rgba(0, 0, 0, .3), rgba(0, 0, 0, 0)), radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, .3), rgba(0, 0, 0, 0)) 0 100%;
        background-repeat: no-repeat;
        background-color: white;
        background-size: 100% 40px, 100% 40px, 100% 14px, 100% 14px;
        /* Opera doesn't support this in the shorthand */
        background-attachment: local, local, scroll, scroll;
    }

    .overlay {
        @apply z-10 absolute;
        top: 15vh;
        left: 10vw;
        right: 10vw;
    }

    .overlay + div {
        @apply z-0 blur-sm;
    }

    @media (display-mode: standalone) {
        #install {
            display: none;
        }
    }
}