* {
    padding: 0;
    margin: 0;
}

@media screen and not (max-aspect-ratio: 1/1) {
    :root {
        --inner-width: 48dvh;
        --inner-height: 97vw;
        --margin: 1vw;
    }

    #container.display {
        margin: auto var(--margin) auto auto;
    }

    #container.dpad {
        margin: auto auto auto var(--margin);
    }

    #container canvas {
        object-fit: contain;
        display: block;
        width: inherit;
        max-width: inherit;
    }

    #container #inner {
        max-width: var(--inner-width);
        max-height: var(--inner-height);
        width: var(--inner-height);
        height: var(--inner-width);
        margin: 0 auto;
    }

    #body {
        height: 100vh;
        align-content: center;
    }
}

@media screen and (max-aspect-ratio: 1/1) {
    :root {
        --inner-width: 97vw;
        --inner-height: 48dvh;
        #--margin-short: calc(4vw - 1dvh);
        --margin-short: 1dvh;
        --margin-tall: calc(1dvh - 1vw);
        --margin-top: max(var(--margin-tall), var(--margin-short));
    }

    #container {
        #margin-top:max(calc(5vw - 1dvh),calc(1dvh - 1vw));
        margin-top: var(--margin-top);
    }

    #container img, #container canvas {
        object-fit: contain;
        display: block;
        width: inherit;
        max-width: inherit;
    }

    #container #inner {
        max-width: var(--inner-width);
        max-height: var(--inner-height);
        width: var(--inner-height);
        margin: 0 auto;
        height: var(--inner-width);
    }

    #body {
        flex-direction: column;
    }
}

canvas, img {
    image-rendering: pixelated;
}

.dpad img, .dpad canvas {
    position: absolute;
    image-rendering: pixelated;
}

#inner.dpad {
    background-color: black;
    border-radius: 50%;
    border:outset;
}

#inner.display {
    border: outset;
}

#body {
    display: flex;
}

body {
    overflow: hidden;
    width:100dvw;
    height:100dvh;
    background-color: gray;
    overscroll-behavior: none;
    touch-action: none;
    position: fixed;
}

canvas#hover {
    filter: brightness(50%);
}

.dummy {
    display: fixed;
    top: 0;
    width: 0;
    height: 0;
    border: none;
    border-style: none;
}