:root {
    --preto: #111111;
    --branco: #ffffff;
    --azul: #4096f5;
    --configurar: rgba(30, 30, 30, 1.0);
    --sombra: rgba(0, 0, 0, 0.3);
    --w: min(14.28vw, 10.97vh);
    --h: calc(var(--w) * 6.38);
    --pw: calc(var(--w) * 0.58);
    --ph: calc(var(--h) * 0.63);
    --barra: 4vh;
}

body {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
  background-color: var(--preto);
  margin: 0;
  padding: 0;
}

#area {
  flex: 1;
  display: flex;
  overflow: hidden;
  align-items: flex-end;
}

#piano {
  display: flex;
  flex-direction: row;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
}

#piano_daw {
  display:flex;
  flex-direction:column;
  overflow-y:auto;
  overflow-x:hidden;
  transform:rotate(90deg) scale(0.3);
  transform-origin:top left;
  max-width:30%;
  max-height:30%;
}

.oitava_piano {
  position:relative;
  display: flex;
  flex-direction:row;
  flex-shrink:0;
}

.TeclaBranca {
    width: var(--w);
    height: var(--h);
    background-color: var(--branco);
    margin: 0.1vh;
    border-style: none;
    font-size: 3vh;
    color: var(--preto);
    z-index: 2;
}

.TeclaBranca:active { box-shadow: inset 0px 0px 30px 8px var(--sombra); }
.TeclaBrancaAtivada { box-shadow: inset 0px 0px 30px 8px var(--sombra); }

.Sustenido { position: absolute; top: 0; z-index: 10;}

.Sustenido .TeclaPreta:first-child { margin-left: calc(var(--w) - var(--pw) / 2); }

.TeclaPreta {
    position: relative;
    top: 0;
    width: var(--pw);
    height: var(--ph);
    background-color: var(--preto);
    margin: 0.1vh;
    border-style: none;
    margin-right: calc(var(--w) - var(--pw));
    box-shadow: 0px 0px 30px 8px rgba(0, 0, 0, 0.3);
    font-size: 3vh;
    color: var(--branco);
}

.TeclaPreta.Vao { margin-left: var(--w); }
.TeclaPreta:active { box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0); }
.TeclaPretaAtivada { box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0); }

#configurar {
  width:100%;
  height:var(--barra);
  background-color:var(--branco);
  cursor: pointer;
}

#configurar:hover {
  background-color: var(--azul);
}

#configuracoes {
  position:fixed;
  top:0;
  left:0;
  width:100%;
  z-index: 100;
  display:none;
  width: 80%;
  height: 60%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 99;
  background: var(--configurar);
}

#configuracoes.aberto {
  display:block;
}