html {
  height: 100%;
}

body {
  height: 100%;
  margin: 0;
  background-color: #0f0f17;
  display: flex;
  color: #fff;
  overflow: hidden;
  user-select: none;
  white-space: nowrap;
}

.material-icons {
  font-size: 32px;
  cursor: pointer;
  opacity: .75;
}

.material-icons:hover, .key-mode-opt>span {
  opacity: 1;
}

#game-container {
  margin: auto;
  image-rendering: pixelated;
  background: #000;
  box-shadow: 0 0 2px #000;
}

canvas {
  position: absolute;
}

#options-icon, #info-icon, #focus-icon {
  position: absolute;
  left: 0;
  top: 0;
  width: 32px;
  height: 32px;
  margin: 7px;
  display: flex;
  z-index: 5;
}

#info-icon {
  left: auto;
  right: 0;
}

#focus-warning {
  position: absolute;
  left: 46px;
  top: 0;
  display: flex;
  align-items: center;
  color: #f80;
  z-index: 5;
}

#focus-icon {
  position: relative;
  opacity: 1;
}

#info-container {
  position: absolute;
  right: 0;
  top: 0;
  padding: 32px 16px 8px;
  background-color: #224;
  border-radius: 0 0 8px 8px;
  box-shadow: 0 0 2px #000;
  z-index: 4;
  display: flex; 
  flex-direction: column;
  align-items: center;
}

#info-container a {
  color: #fff;
}

#info-container a:hover {
  text-decoration:none
}

#options-container {
  position: absolute;
  left: 0;
  top: 0;
  padding: 32px 0 8px;
  background-color: #224;
  border-radius: 0 0 8px 8px;
  box-shadow: 0 0 2px #000;
  z-index: 4;
  display: flex; 
  flex-direction: column;
  align-items: center;
}

fieldset {
  display: flex;
  margin: 8px 16px;
  border-radius: 0 0 8px 8px;
  width: -moz-available;
  width: -webkit-fill-available;
  border: 2px solid #fff;
}

#se-volume-container, #bgm-volume-container {
  margin: 0 auto;
  height: 32px;
  display: flex;
}

#se-volume-icon, #bgm-volume-icon {
  width: 32px;
  height: 32px;
}

#volume {
  cursor: pointer;
  margin: auto 4px;
}

#screen-display-container {
  width: inherit;
  display: flex;
  justify-content: space-evenly;
}

.screen-opt {
  margin: 2px 4px;
  background-color: #fff;
  color: #224;
  border: 2px solid #fff;
  border-radius: 4px;
  cursor: pointer;
}

.screen-opt:hover {
  background-color: #224;
  color: #fff;
}

.screen-opt.active {
  background-color: #448;
  color: #fff;
}

#key-config-container {
  width: inherit;
  display: flex;
  flex-direction: column;
}

#key-config-container label {
  padding: 4px;
  margin: 4px;
}

#key-reset {
  margin: 8px auto 0;
}

#key-mode-container {
  display: flex;
}

.key-mode-opt {
  width: 50%;
  padding: 2px;
  background-color: #fff;
  color: #224;
  border: 2px solid #fff;
  cursor: pointer;
}

.key-mode-opt:hover {
  background-color: #224;
  color: #fff;
}

.key-mode-opt.active {
  background-color: #448;
  border-bottom: none;
  color: #fff;
}

.key-mode-opt:disabled {
  background-color: #558;
  color: #aac;
}

#key-keyboard-container, #key-gamepad-container {
  width: 300px;
  display: flex;
  background-color: #448;
  border: 2px solid #fff;
  border-top: none;
  border-radius: 0 0 8px 8px;
  padding: 8px;
}

#key-keyboard-container {
  flex-direction: column;
}

#key-keyboard-container>div {
  display: flex;
  justify-content: space-between;
}

.key-config {
  width: 128px;
  margin: 4px;
  padding: 4px;
  background: none;
  color: #fff;
  border: none;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  outline: 0;
}

.key-config:hover, .key-config.active {
  border-bottom: 2px solid #fff;
}

#key-gamepad-container label {
  /* margin: 8px 0; */
  padding: 0;
}

#key-gamepad-radio {
  width: 80px;
}