:global(.mono) { filter: url('#green'); } .display { margin: 5px auto; } :global(.full-page) .display { width: 100vw; height: 68.5714vw; /* 384px / 560px * 100% */ max-height: 100vh; max-width: 145.83vh; /* 560px / 384px * 100% */ padding: 0; border: 0; position: fixed; top:0; bottom: 0; left: 0; right: 0; justify-content: center; align-items: center; margin: auto !important; } :global(.full-page) .overscan { margin: initial; padding: 0; width: initial; height: 384px; border: 0; border-radius: 0; height: 100%; display: flex; justify-content: center; align-items: center; } .overscan { margin: auto; position: relative; background-color: black; width: 592px; height: 416px; border: 6px inset #f0edd0; border-radius: 10px; } :global(.full-page) .overscan { margin: initial; padding: 0; width: initial; height: 384px; border: 0; border-radius: 0; height: 100%; display: flex; justify-content: center; align-items: center; } :global(.scanlines):after { display: block; pointer-events: none; background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 1px, rgba(0,0,0,0.5) 1px, rgba(0,0,0,0.5) 2px); content: ''; position: absolute; top: 0; left: 0; bottom: 0; right: 0; } :global(.full-page) :global(.scanlines):after { background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 0.25vh, rgba(0,0,0,0.5) 0.25vh, rgba(0,0,0,0.5) 0.5vh); } .screen { cursor: crosshair; -moz-image-rendering: -moz-crisp-edges; -webkit-image-rendering: -webkit-optimize-contrast; image-rendering: optimizeSpeed; width: 592px; height: 416px; touch-action: manipulation; user-select: none; } .screen.mouseMode { cursor: none; } .screen:-webkit-full-screen { background-color: black; top: 0; left: 0; width: 100vw; height: 100vh; } :global(.full-page) .screen { width: 100%; height: 100%; }