#joyDiv { position: absolute; bottom: 0; left: 0; color: whitesmoke; width: 50vh; height: 50vh; z-index: 1488; opacity: 0.6; } .show-gamepad-button { z-index: 1489; position: absolute; right: 3vh; bottom: 3vh; background-size: cover; background-position: center; justify-content: center; align-items: center; background-image: url('../assets/omori_show_button.png'); min-width: 6vh; min-height: 6vh; } .switch-button { z-index: 1489; position: absolute; left: 3vh; bottom: 3vh; background-size: cover; background-position: center; justify-content: center; align-items: center; background-image: url('../assets/omori_switch_button.png'); min-width: 6vh; min-height: 6vh; } .fps-button { position: absolute; left: 5px; top: 5px; width: 90px; height: 40px; z-index: 1489; } .gamepad-buttons { opacity: 0.6; z-index: 1488; position: absolute; bottom: 16px; right: 32px; justify-content: center; align-items: center; display: flex; flex-flow: column nowrap; } .gamepad-buttons-row { display: flex; flex-flow: row nowrap; gap: 9vh; } .gamepad-button { min-width: 18vh; min-height: 18vh; display: flex; position: relative; background-size: cover; background-position: center; width: 100%; height: 100%; } .gamepad-bumper { z-index: 1488; position: absolute; background-size: cover; background-position: center; justify-content: center; align-items: center; min-width: 18vh; min-height: 12vh; } .A { background-image: url('../assets/omori_a_button.png'); } .B { background-image: url('../assets/omori_b_button.png'); top: 4.5vh; } .X { background-image: url('../assets/omori_x_button.png'); top: 4.5vh; } .Y { background-image: url('../assets/omori_y_button.png'); top: 9vh; } .LB { background-image: url('../assets/omori_lb_button.png'); opacity: 0.6; left: 16px; bottom: 56vh; } .RB { background-image: url('../assets/omori_rb_button.png'); opacity: 0.6; right: 16px; bottom: 56vh; } .dpad-buttons { opacity: 0.6; z-index: 1488; position: absolute; bottom: 16px; left: 32px; background-size: cover; background-position: center; justify-content: center; align-items: center; background-image: url('../assets/omori_dpad.png'); display: flex; flex-flow: column nowrap; min-width: 42vh; min-height: 42vh; } .dpad-buttons-row { display: flex; flex-flow: row nowrap; } .dpad-button { min-width: 12vh; min-height: 12vh; display: flex; position: relative; width: 100%; height: 100%; opacity: 0.6; } .up { /* background-color: blue; */ bottom: 7.5vh; right: 6vh; } .left { /* background-color: red; */ right: 7.5vh; top: 6vh; } .right { /* background-color: green; */ left: 7.5vh; bottom: 6vh; } .down { /* background-color: yellow; */ top: 7.5vh; left: 6vh; }