@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100&family=Noto+Serif+JP&family=Noto+Serif:ital,wght@0,300;0,400;0,500;0,700;0,900;1,300;1,400;1,500;1,700;1,900&display=swap');
   
        body {
            font-family: "Noto Serif JP";
            color: #595941;
            background-color: #e3e3e3;
			font-size:10px;
        } 
		
		div{
			margin:auto;
			width:50%;
		}
		
		.stuck{
			position:sticky;
			margin:0;
			padding:0;
		}
		
		.verse{
			padding-top:30px;
			padding-bottom:30px;
		}
		
		.verse p{
			margin-top:8px;
			margin-bottom:8px;
			color:#303028;
			font-size:30px;
			font-weight:300;
		}
		
		s{
			text-decoration-style: double;
			color:#d3c8c3;
			user-select: none;
		}

		.song{
			font-size:16px;
			font-weight:900;
			margin-top:30px;
			margin-bottom:30px;
		}
		
		.song .track{
			margin-bottom:2px;
		}
		
		.english{
			font-style:italic;
			color:#595941 !important;
		}
		
		rt {
			color: #595941;
			user-select: none;
		}

		.note{
			padding:8px;
			border-radius: 50%;
			display:inline-block;
			text-align: center;
			width:10px;
			height:10px;
			line-height:8px;
			margin-right:8px;
		}
		
		.musicnote{
			text-indent:-3px
		}
		
		.note1{
			color: #d3c8c3;
			background-color: #db9c42;
		}
		
		.note2{
			color: #d3b690;
			background-color: #757541;
		}
		
		.note3{
			color: #595941;
			background-color: #86aeaf;
		}
		
		.note4{
			color: #db9c42;
			background-color: #d3c8c3;
		}
		
		.note5{
			color: #d3b690;
			background-color: #6e7384;
		}
		
		.note6{
			color: #757541;
			background-color: #d4be96;
		}
		
		.datas{
			color:#e3e3e3;
			background-color:#d3c8c3;
			padding:4px;
		}
		
		.words{
			display:inline-block;
			position:relative;
			height:100%;
			margin:0;
			padding:0;
		}
		
		.lower-elementary {
			background-color:#b0b4b4;
		}
		
		.upper-elementary {
			background-color:#86aeaf;
		}
		
		.lower-intermediate {
			background-color:#d4be96;
		}
		
		.upper-intermediate {
			background-color:#e3a347;
		}
		
		.lower-advanced {
			background-color:#dcb38b;
		}
		
		.upper-advanced {
			background-color:#f7884c;
		}

		.words .tooltiptext {
		  visibility: hidden;
		  width: auto;
		  top: 100%;
		  left: 0%;
		  padding:4px;
		  white-space:nowrap;
		  position: absolute;
		  z-index: 1;
		}

		.words:hover .tooltiptext {
		  visibility: visible;
		}
		
		a:link {
		  color: #757541;
		}
		a:visited {
		  color: #757541;
		}
		a:hover {
		  color: #595941;
		  background-color:#d3c8c3;
		}
		a:active {
  		  color: #595941;
  		  background-color:#d3c8c3;
		}
		
		.switch {
		  position: relative;
		  vertical-align:text-top;
		  margin-top:3px;
		  display: inline-block;
		  width: 40px;
		  height: 20px;
		}

		.switch input {
		  opacity: 0;
		  width: 0;
		  height: 0;
		}

		.slider {
		  position: absolute;
		  cursor: pointer;
		  top: 0;
		  left: 0;
		  right: 0;
		  bottom: 0;
		  background-color: #d3c8c3;
		  -webkit-transition: .4s;
		  transition: .4s;
		}

		.slider:before {
		  position: absolute;
		  content: "";
		  height: 20px;
		  width: 20px;
		  left: 0px;
		  bottom: 0px;
		  background-color: #db9c42;
		  -webkit-transition: .4s;
		  transition: .4s;
		}

		input:checked + .slider {
		  background-color: #d3c8c3;
		}

		input:checked + .slider:before {
		  -webkit-transform: translateX(20px);
		  -ms-transform: translateX(20px);
		  transform: translateX(20px);
		}

		.slider.round {
		  border-radius: 20px;
		}

		.slider.round:before {
		  border-radius: 50%;
		}