/*
TODO:
- add icons to mouse and keyboard buttons
- add more icons to the buttons
*/

/* BASIC SETUP */

body {
  text-align:center;
  /* font-family: Lato, Arial, Helvetica, sans-serif; */
  font-family: Lato, Arial, Helvetica, sans-serif;
  font-size: 20px;
  text-transform: uppercase;
}
input, select, textarea, button{font-family:inherit;}

h1 {
  color: #d2aa0c;
  font-size: 150%;
  font-family: 'Press Start 2P', cursive;
}

p {
  font-size: 100%;
  text-transform: none;
}

#debug-text {
  display: none;
}

.wrapper {
  position: relative;
  width: 100%;
}

.container {
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  width: 800px;
  height: 600px;
}

.button-wrapper {
  display: flex;
  justify-content: center;
}

/* BUTTONS */
button {
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  color: #ecf0f1;
  background: none;
  border: none;
  font-size: 200%;
  text-transform: uppercase;
  font-weight: 300;
  width: auto;
  cursor: pointer;
}
.button {
  -webkit-transition: background-color 0.3s, color 0.3s;
  transition: background-color 0.3s, color 0.3s;
  font-size: 200%;
}

.button:hover { font-weight: 600; }
.button:hover i { margin-right: 20px; }

button:focus {
  outline: none;
}

i {
  color: #f1c40f;
  display: inline-block;
  margin-right: 15px;
  font-size: 120%;
  line-height: 1;
  vertical-align: text-top;
  margin-top: -1px;
  -webkit-transition: margin 0.3s;
  transition: margin 0.3s;
}

i img {
  /* width: 100%; */
  margin-top: 5px;
}

#btn-1p { top: 150px; }
#btn-2p { top: 250px; }

#btn-mouse {
  display: none;
  top: 200px;
  text-align: left;
}
#btn-keyboard {
  display: none;
  top: 300px;
  text-align: left;
}

#btn-reset {
  display: none;
  bottom: 30px;
}

#btn-volume {
  top: 0px;
  left: 770px;
}
#btn-volume i {
  margin-right: 0px;
  transition: none;
}

.ion-ios-volume-high:before {
  content: none;
}

.input-group {
  position: absolute;
  top: 350px;
  font-size: 150%;
}

label {
  font-size: 100%;
}
.label-theme {
  color: #ecf0f1;
  padding-right: 10px;
}

select {
  width: auto;
  height: 37px;
  border: none;
  border-bottom: 1px dashed #bdc3c7;
  text-align: center;
  font-size: 100%;
  background: none;
  outline: none;
  color: #ecf0f1;
  /* background-color: transparent; */
}

option {
  color: #222;
}

.ion-ios-loop-strong {
  font-size: 100%;
  margin-top: 4px;
}

/* canvas {
  display: inline-block;
}
p {
  display: inline-block;
} */