body {
            background-color: black;
            color: white;
            padding: 0;
            margin: 0;
        }
        h2 {
            text-align: center;
        }

        #container {
            height: 100vh;
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            flex-wrap: wrap;
        }

        .info {
            padding: 2ch;
            border-radius: 1ch;
            background-color: #eeeeee;
            width: 20%;
            margin-left: 2ch;
        }

        #device {
            border: 1px solid;
            border-radius: 2ch;
            height: 90vh;
            aspect-ratio: 62 / 92;
            container-type: size;
            width: max-content;
        }

        #canvas {
            image-rendering: pixelated;
            border: 1px solid;
            width: 55cqw; /* 34 / 62 */
            height: 29cqw; /* 18 / 62 */
            margin-left: 24cqw; /* 15 / 62 */
            margin-top: 11cqw; /* 7 / 62 */

            /* colorize demo */
            /* filter: sepia(100%) hue-rotate(200deg); */
        }


        #loader {
            padding: 2ch;
            border: 1px solid;
            margin-right: 4ch;
        }

        #load {
            width: 100%;
        }

        #keypad {
            margin-top: 30px;
        }
        /* device: 62x92 px */
        .key-btn {
            background-color: transparent;
            margin-top: 2cqw; /* 10px / 620px */
            margin-left: 2cqw;
            width: 22cqw;  /* 14 / 62 */
            height: 22cqw;
            border-radius: 50%;
            border: 1px solid white;
            font-size: 4cqi;
        }
        .key-btn:hover {
             border: 1px solid grey;
        }