japanese-drum-game/public/src/css/songbg.css

#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;
}