body{
  padding: 0;
  margin: 0;
  user-select: none;
  overflow: hidden}
#piano{
  width: 100vw;
  height: 100vh;
  background: red
}
#piano-header{
  height: 40%;
  background: black;
  text-align: center;
}
#ui{
  display: flex;
  width: 100%;
  height: 95%;
  flex-flow: row wrap;
  justify-content: space-between;
  align-items: flex-end;
}
#tag{
  margin: 0;
  line-height: 4vh;
  color:white;
  font-family: serif;
  font-weight: bold;
  font-size: 4vw;}
#check{color: gray}
#check.true{color: red}
#list{
  font-size: 5vh;
  font-weight: bold;
  font-family: sans-serif;
  color: white;
}
#search, #changer{
  font-size: 3vh;
  border: 1px solid gray;
}
#eight{display: flex}
#eight button, #counter{
  width: 3.5vw;
  height: 3.5vw;
  margin: 0;
  font-size: 4vh;
  line-height: 3.5vw;
  vertical-align: bottom;
  font-family: sans-serif;
  border: 1px solid gray;
  display: inline-block;
}
#counter{
  background: white;
  width: 8vw;
  height: 3.35vw;
}
#message{
  margin: 0;
  position: fixed;
  z-index: 1;
  width: 100vw;
  font-size: 2vw;
  font-family: monospace;
  top: -12vh;
  transition: 0.4s;
  color: #00A;
  background: #AAF;
}
#message.show{top: 0}
button:active{
  background: #DDF;
  color: #009
}
#keys{
  width: 100%;
  height: 60%;
  display: flex;
  flex-flow: row wrap;
  background: lightgray;
}
.key{ 
  text-align: center;
  align-content: end;
  width: calc(100% / 15);
  font-size: 4vw;
  font-family: serif}
.white{
  background: white;
  outline: 1px solid black;
  position: relative;
}
.black.active{
  background: #006;
  color: #eee;
}
.black{
  background: black;
  position: absolute;
  height: 60%;
  width: 60%;
  color: white;
  right: -30%;
  top: 0;
  z-index: 2
}
.white.active{
  background: #ccf;
  color: #113
}

@media (orientation: portrait){
  #piano-header{height: 30%}
  #keys{height: 70%}
  .key{
    width: calc(100% / 7);
    height: 40%;
    font-size: 8vw;
  }
  #l{
    width: 100%;
    height: 20%
  }
  .black{
    width: 80%;
    height: 60%;
    right: -40%
  }
  #list{
    order: 0;
    width: 100%
  }
  #fs{
    order: 1;
    width: 40%
  }
  #tag{
    font-size: 7vw
  }
  #eight{
    order: 2;
    width: 30%
  }
  #eight button{
    width: 6vw;
    height: 6vw;
  }
  #counter{
    width: 14vw;
    height: 5.85vw;
    line-height: 5.85vw
  }
  #message{
    font-size: 4vw
  }
}