/*Misc*/
html,
body {
  overflow-x: hidden;
  margin: 0 !important;
}

.title-bar-text {
  font-style: oblique;
}

.hidden {
  visibility: hidden;
}
.hidden-none {
  display: none;
}

.color-red {
  color: red;
}

pre{
  padding:2px!important;
}


/*Desktop*/
#backdrop {
  background-image: url('./imgs/bg.jpg');
  background-size: cover;
  height: 100vh;
  width: 100%;
  z-index: -1;
  position: absolute;
  top: 0;
}

.iconArea {
  width: 80px;
  filter: drop-shadow(1px 1px 1px black);
  text-align: center;
  margin: 20px;
  position: absolute;
}

.iconArea img {
  width: 45px;
  filter: hue-rotate(140deg);
  display: block;
  margin: auto;
}

.iconArea p {
  font-size: 14px;
  margin-top: 7px;
  color: white;
  -webkit-font-smoothing: none;
  font-family: "Pixelated MS Sans Serif", Arial;
}


/*Drawing*/
.drawBtn {
  min-width: 40px;
  margin: 5px 10px 0px 0px;
}

#painterCanvas {
  background-image: url('./imgs/face.png');
  background-size: cover;
  left: 13px;
  position: absolute;
}

#drawingPre {
  height: 301px;
}



/*Audio*/

.key{
  background-color:#000000ee;
  border-color:green;
  border-style:solid;
  float:left;
}
.key_space{
  float:left;
  width:20px;
  height:1px;
}
.white{
  height:100px;
  border-width:2px;
  border-width: 1px;
}
.black{
  height: 56px;
  border-width: 1px;
  margin: 1px;
}
#blackKeys{
  position:relative;
  top:-102px;
}
#whiteKeys{
  position:relative;
}
#kb{
  width:300px;
  height:100px;
  margin-left:14px;
}
#kbPre {
  height: 130px;
  background-color:black;
}
#oscCanvas{
  height:130px;
  width:330px;
  position:fixed;
}
.selectedKey{
  background-color:#00ee00;
}

.audio-barlabel {
  flex: 0 0 60px;
  text-align: right;
  margin-right: 10px;
}

.audio-barleft {
  flex: 0 0 30px;
  text-align: right;
  margin-right: 10px;
  display:block
}

.audio-bar {
  flex: 1;
}

.audio-barright {
  flex: 0 0 30px; 
  margin-left: 10px;
}

.audio-row{
  margin-bottom:15px;
}

.audio-col {
  flex: 1;
  display: flex;
  /*flex-direction: column;*/
  align-items: center;
}

#drumMachine {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.dmRow {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.dmBox {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 35px;
}

.beatCircle{
  color:rgba(255, 255, 255, 0);
}

.highlightBeat{
  color:#00ee00!important;
}

/**Game**/

#gamingPre{
  width:402px;
  height:402px;
}
#gameCanvas{
  position: absolute;
  left: 14px;
  top:34px;

}