body, div#player-container, div#player-container iframe {
  font-family: Noto Sans Japanese,Noto Sans,Arial,sans-serif;
  margin: 0px;
  padding: 0px;
  border: none;
  background-color: rgb(53,53,53,0.9);
}

h1 {
  color: #bb4849;
  text-shadow: -1px -1px 0px #111;
}

#player-container {
  height:100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

#player-container div:first-child {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  transform-origin: center center;
  transform: scale( 2, 2 );
}

@media screen and (max-width:600px) {
  #player-container div:first-child {
    transform: scale( 1.5, 1.5 );
  }
  body.time-out #player-container div:first-child {
    transform: scale( 1, 1 ) !important;
  }
}

@media screen and (max-width:450px) {
  #player-container div:first-child {
    transform: scale( 1, 1 );
  }
}

body.time-out #player-container div:first-child {
  transform: scale( 1, 1 ) !important;
}

#player {
  width: 280px;
  height: 216px;
}

#player-container span {
  display: block;
  margin-top: 20px;
  font-size: 60%;
  color: #999;
}

#misc-view {
  margin-top: 2em;
  text-align: center;
  color: #ccc;
}

#player-container span#limit-message {
  font-size: 30%;
  margin-top: 0px;
}

#player-container div.limit-mess {
  color: #ccc;
  transform: scale( 1, 1 );
  width: 70%;
  margin: auto;
  font-size: 4%;
  display: block;
}

body.time-out #player-container div.limit-mess {
  width: 100%;
  padding: 1em;
  font-size: inherit !important;
}

#player-container div.limit-mess a {
  color: #ccc;
  display: inline;
}