#songbg, #songbg>*, #song-stage{ position: absolute; right: 0; bottom: 0; left: 0; width: 100%; } #songbg{ max-width: calc(100vh / 9 * 32); height: 50.1%; background-color: #000; } #songbg>*{ top: 0; } #songbg, #songbg>*{ background-size: cover; background-position: center; } #song-stage{ height: calc(44 / 720 * 100vh); background-position: center bottom; background-repeat-y: no-repeat; } .portrait #songbg{ height: 63.4%; max-height: calc(50% + 24vw); } .touchp2 #songbg{ height: calc(50% - 5.5vw); } .multiplayer.portrait #songbg{ height: calc(50% - 37vw); min-height: calc(29% + 1px); } .multiplayer:not(.touchp2):not(.portrait) #songbg, .multiplayer:not(.touchp2):not(.portrait) #song-stage{ display: none; } .game-paused *{ animation-play-state: paused !important; } @keyframes songbg-strobe{ 0%{opacity: 1} 25%{opacity: 0} 50%{opacity: 0.66} 75%{opacity: 0} } @keyframes songbg-pulse{ 0%{opacity: 1} 50%{opacity: 0} } .songbg-1 #layer2, .songbg-2 #layer2, .songbg-3 #layer2{ animation: 0.4s linear songbg-strobe infinite; mix-blend-mode: difference; } .songbg-4 #layer2{ animation: 0.4s linear songbg-pulse infinite; mix-blend-mode: difference; } .songbg-5 #layer2{ animation: 1s linear songbg-pulse infinite; mix-blend-mode: color-dodge; } .songbg-strobe #layer2{ animation: 0.4s linear songbg-strobe infinite; } .songbg-pulse #layer2{ animation: 0.4s linear songbg-pulse infinite; } .songbg-slowfade #layer2{ animation: 2s cubic-bezier(0.68, -0.55, 0.27, 1.55) songbg-pulse infinite; } .touch-visible #layer2{ display: none; background-image: none; animation: none; }