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

@font-face {
    font-family: 'TnT';
    src: url('../../assets/fonts/TnT.ttf') format('truetype');
}

@font-face {
    font-family: 'Kozuka';
    src: url('../../assets/fonts/KozGoPro-Bold.otf') format('truetype');
}

html, body{
	padding: 0;
	margin: 0;
	width:100%;
	height: 100%;
	background: black;
	color:white;
    user-select: none;
}

#screen{
	width:100%;
	height:100%;
	margin:0;
	padding:0;
	background: url('/assets/img/bg-pattern-1.png');
}

#assets{
	display:none;
}

.window{
    font-size: 14pt;
    width: 30%;
    height: 30%;
    padding: 30px;
    color: black;
    background: rgba(255, 220, 47, 0.95);
    border: 7px outset #f4ae00;
    position:relative;
    box-shadow: 2px 2px 10px black;
    top: 35%;
    left: 35%;
    
}

.stroke-main {
    font-weight: 300;
}

.result-title {
    margin-top: 9px !important;
    margin-left: 5px !important;
    z-index: 1;
}

.result-song, .game-song {
    position: absolute;
    right: 0;
    font-size: 5vmin;
    margin: 30px 30px 0px 0px;
    color: white;
    float: right;
    z-index: 1;
    font-weight: 300;
}

.stroke-main:before {
    content: attr(alt);
    left: 0;
    z-index: -1;
    position: absolute;
    -webkit-text-stroke: 0.3em #fb3c0c;
}

.stroke-main:after {
    content: attr(alt);
    left: 0;
    z-index: -2;
    position: absolute;
    -webkit-text-stroke: 0.5em #000;
}

.stroke-sub:before {
    content: attr(alt);
    position: absolute;
    -webkit-text-stroke: 0.25em #000;
    left: 0;
    z-index: -1;
}

.songsel-title {
    position: absolute;
    z-index: 1;
    font-size: 7vmin;
    margin: 20px;
}

.click-to-continue:before {
    width: 100%;
}


.don {
  background-position-y: 0;
  position: absolute;
  top: 0px;
}

.alpha-title .song-title-char {
    transform: scale(1.3, 1);
    font-size: 80%;
    line-height: 22px;
}

.song-title-apos {
    padding-left: 4px;
}

.song-title-char[alt="ぁ"],.song-title-char[alt="ぃ"],.song-title-char[alt="ぅ"],.song-title-char[alt="ぇ"],.song-title-char[alt="ぉ"],
.song-title-char[alt="ゃ"],.song-title-char[alt="ゅ"],.song-title-char[alt="ょ"],.song-title-char[alt="っ"],
.song-title-char[alt="ァ"],.song-title-char[alt="ィ"],.song-title-char[alt="ゥ"],.song-title-char[alt="ェ"],.song-title-char[alt="ォ"],
.song-title-char[alt="ャ"],.song-title-char[alt="ュ"],.song-title-char[alt="ョ"],.song-title-char[alt="ッ"]
{
    margin-top: -6px;
}

.song-title-char[alt="ー"], .song-title-char[alt="-"] {
    transform: rotate(95deg);
    font-size: 90%;
}