#game{ width: 100%; height: 100%; overflow: hidden; background-size: cover; } #game.default-bg{ background-size: calc(100vh / 720 * 512); } #canvas{ position: relative; z-index: 1; width: 100%; height: 100%; } #pause-menu{ display: none; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: rgba(0, 0, 0, 0.75); z-index: 5; } #pause-menu button{ width: 90%; height: 25%; display: block; margin: 0 auto; cursor: pointer; border:.5vmin solid #ae7a26; background: #fff; color: #000; font-family: TnT; font-size: 3.5vmin; border-radius: 1.5vmin; outline: none; } #pause-menu button:hover, #pause-menu .window:not(:hover) button.selected{ color:white; background:#0c6577; border-color:#fa5d3a; } #cursor{ position: fixed; width: 1px; height: 1px; cursor: none; pointer-events: none; z-index: 1; } #touch-drum{ display: none; position: absolute; right: 0; bottom: 0; left: 0; width: 50%; height: 50%; text-align: center; margin: auto; } #touch-drum-img{ width: 100%; } #touch-buttons{ display: none; position: absolute; top: 6.5vh; right: 2vh; opacity: 0.5; z-index: 5; } #touch-buttons img{ width: 12.5vmin; height: 12.5vmin; } .touch-visible #touch-drum, .touch-visible #touch-buttons{ display: block; } .touch-visible .window{ width: 80vmin; height: 53vmin; } .touch-visible #pause-menu .window button{ font-size: 5vmin; } .touch-visible #pause-menu .window button.selected{ color: #000; background: #fff; border-color: #ae7a26; }