@font-face { font-family: 'monogram'; src: url('assets/fonts/monogram-extended.woff2'); font-weight: normal; font-style: normal; } body { display: flex; background-color: #222034; margin: 0; width: 100vw; height: 100vh; } /* Scale up canvas image on small screens. Loses pixel perfectness but improves visibility on phones. */ @media (max-width: 960px) or (max-height: 720px) { canvas { display: block; margin: auto auto; image-rendering: pixelated; object-fit: contain; width: 100%; height: 100%; } } @media (min-width: 960px) or (min-height: 720px) { canvas { display: block; margin: auto auto; } } @media (pointer: fine) { #onscreen-controls { display: none; } } /* Onscreen controls for "coarse" pointer devices assumed to be touchscreens on phones/tablets. Inline SVG is used so that we can attach click handlers to individual elements of the controls. */ @media (pointer: coarse) { #onscreen-controls { position: absolute; width: 100%; bottom: 0; display: flex; flex-direction: row; align-items: center; } #onscreen-controls #dpad-container { width: min(40vw,40vh); height: min(40vw,40vh); margin: 5%; } #onscreen-controls #button-container { width: min(25vw,25vh); height: min(25vw,25vh); margin: 5%; margin-left: auto; } }