@charset "utf-8";
/* CSS Document */
body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            background: #000;
        }
        .container {
            background: rgba(255,255,255,0);
            padding: 20px; width: 100%; box-sizing: border-box; position: fixed; bottom: 0; left: 0;
        }
        .controls {
            padding: 20px 0; position: relative; height: 80px;
        }
.controls2 { max-width: 800px; margin-left: auto; margin-right: auto;}
        select {
			 font-family: "Noto Sans JP", sans-serif;
            padding: 8px 0;
            border-radius: 0px;
             width: 100%; margin-bottom: 1em; background: none; background-color: rgba(0,0,0,.2); border: none; border-bottom:1px solid #00FF00; color: #00FF00; height: 44px; appearance:menulist; font-size: 16px;backdrop-filter: blur(3px); box-sizing: border-box; outline: none;
        }
select:focus {border-bottom:1px solid #00FF00;}
select option { background-color: #000; color: #00FF00;}
        button {
			width: 80px; height: 80px;
            border-radius: 50%;
            border: none;
            background: #000;
            color: white;
            cursor: pointer; position: absolute; top:20px; left: 50%; transform: translateX(-50%) scale(1); background-position: center; background-position: center; background-size: 40px; background-repeat: no-repeat; text-indent: -9999px;
        }
        button:disabled {
            opacity: .5;  transform: translateX(-50%) scale(0); background-repeat: no-repeat;
        }
		#playButton:disabled {  transform: translateX(-50%) scale(1);}
        button:hover:not(:disabled) {
            
        }
		#resetButton { display: none;}
		
		#playButton { background-image: url("../img/play.svg");}
		#pauseButton { background-image: url("../img/pause.svg");}
		
		h1 {font-family: "Audiowide", sans-serif; color: #00FF00; margin: 0; font-size: 8vw; position: fixed; top:5vw; left: 0vw; font-weight: 400; width: 100%; text-align: center;}
h1 span { display: block; text-align: center; color: #00FF00; font-size: 40%; font-weight: normal;font-family: "Noto Sans JP", serif;}
h1 span a { color: #00FF00; text-decoration: none;}
h1 span a:hover { text-decoration: underline;}

@media (orientation: landscape) {
	h1 { font-size: 4vw; }
}

@media screen and (max-height:410px) {
  .container {
    position: static;
}
	h1 {
    position: static;
}
}