@font-face {
            font-family: 'jrug punk';
            src:
            url(fonts/JRUG_PUNK.woff),
            url(fonts/JRUG_PUNK.otf);
        }

        *{
          cursor: url(cursor.png), auto;
        }
        a:hover{
          cursor: url(cursor-pointer.png), pointer;
        }
        button:hover{
          cursor: url(cursor-pointer.png), pointer;
        }

        html,
        body {
            scroll-behavior: smooth;
            margin: 0;
            padding: 0;
        }

        .title {
            color: black;
            padding-right: 10px;
            max-width: 95vw;
            width: 600px;
            margin: auto;
            box-shadow: 0 0 30px 100px #fff;
            text-align: center;
            font-family: 'Courier New', Courier, monospace;
            font-size: 4vmin;
            align-items: center;
            z-index: 999;
            position: relative;
        }

        #numbers {
            display: grid;
            grid-template-columns: 1fr;
            background-color: white;
            gap: 0px;
            row-gap: 0px;
        }

        img {
            display: block;
            width: 100%;
            height: auto;
            transition: transform 0.3s ease;
        }

        ::selection {
            color: #fff;
            background-color: black;
        }

        .controls {
            position: fixed;
            top: 20px;
            z-index: 1001;
        }

        .control-btn {
            text-decoration: none;
            padding: 10px 15px;
            font-family: jrug punk;
            font-size: 2.5vmin;
            color: black;
            background: white;
            border: solid;
            white-space: nowrap;
            cursor: pointer;
            transition: 300ms ease;
            display: inline-block;
        }

        .control-btn:hover {
            color: #fff;
            background-color: black;
        }

        #aboutBtn {
            margin-left: 20px;
        }

        #refreshBtn {
            right: 20px;
        }

        .refresh-active {
            animation: refreshSpin 0.5s ease;
        }

        @keyframes refreshSpin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        #aboutModal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.7);
            z-index: 2000;
            align-items: center;
            justify-content: center;
        }

        .modal-content {
            background: white;
            padding: 30px;
            border: solid;
            max-width: 500px;
            text-align: center;
            font-family: 'Courier New', Courier, monospace;
            font-size: 2vh;
            position: relative;
        }

        .close-btn {
            position: absolute;
            top: 10px;
            right: 15px;
            font-size: 24px;
            cursor: pointer;
            color: black;
            font-family: jrug punk;
        }

        .close-btn:hover {
            color: #fff;
            background-color: black;
        }

        .fade-out {
            opacity: 0;
            transition: opacity 0.5s ease;
        }

        .fade-in {
            opacity: 1;
            transition: opacity 0.5s ease;
        }

        .loading {
            text-align: center;
            padding: 40px;
            font-size: 18px;
            color: black;
            font-family: jrug punk;
            background: white;
            margin: 20px;
            white-space: nowrap;
        }

        .loading::after {
            content: '';
            display: inline-block;
            width: 20px;
            height: 20px;
            border-top: 2px solid white;
            border-radius: 50%;
            animation: spin 1s linear infinite;
            margin-left: 10px;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        .modal-content a {
            color: black;
            text-decoration: underline;
        }

        .modal-content a:hover {
            color: #fff;
            background-color: black;
        }

        @media only screen and (min-width: 640px) {
            #numbers {
                grid-template-columns: 1fr 1fr 1fr;
            }
        }

        @media only screen and (min-width: 860px) {
            #numbers {
                grid-template-columns: 1fr 1fr 1fr 1fr;
            }
        }

        @media only screen and (min-width: 1080px) {
            #numbers {
                grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
            }
        }

#numbers > img {
    mix-blend-mode:darken;
    transition: transform 0.6s ease-in-out;
}