body, main, ul, li, h1, h2, p {
 margin: 0;
 padding: 0;
 border: 0;
 outline: 0;
 color: oldlace;
 text-align: center;
 text-decoration: inherit;
 vertical-align: inherit;
 box-sizing: border-box;
 background: transparent;
 font-family: 'Sansita One', cursive;
 font-size: 14px;
}

.group:after {
  content: "";
  display: block;
  clear: both;
}

html {
  width: 100%;
  height: 100vh;
  background-image: url("./wallpaper.jpg");
}

#main, .wrapper {
  height: 100%;
}
.keyboard, .song {
  padding: 4% 1%;
  width: 92%;
  height: 33vh;
  margin: 2% auto;
  background: linear-gradient(#bfd3df, #7BA3BD, #46708c);
  box-shadow: inset 3px 3px 2px #223c46;
  position: relative;
}

.octave {
  width: 100%;
  height: 18%;
  top: 65%;
  position: absolute;
}

.label {
  text-align: left;
  margin: 1.5% 0;
  bottom: -55%;
  left: 20%;
  position: absolute;
}

.black .label {
  top: -158%;
  left: 12%
}

h1 {
  display: block;
  margin-left: -6%;
  margin-top: -4%;
  font-size: 60px;
  padding: 1%;
  text-shadow: 4px 4px 7px #BF7F00, -4px -4px 7px #BF7F00;
  font-family: 'Niconne', cursive;
}

.key {
  padding: 0;
  float: left;
  display: block;
  border-radius: 0 3% 3% 3%;
  height: 100%;
  width: 2.7%;
  border: 2.33px outset #f9e2b7;
  border-top: none;
  position: relative;
  background: #fdf5e6;
  top: 0;
  font-size: 16px;
}

.key:before {
  border-top: 2.33px outset #f9e2b7;
  border-left: 2.33px outset #f9e2b7;
  border-right: 2.33px outset #f9e2b7;
  border-bottom: none;
  height: 140%;
  border-radius: 3% 3% 0 3%;
  top: -142%;
  display: block;
  width: 59%;
  z-index: 0;
  position: absolute;
  background: #fdf5e6;
  content: "";
}

.black:before {
  display: block;
  top: -108%;
  height: 140%;
  width: 50%;
  border-right: 2.66px outset #000;
  border-top: 1.66px outset #000;
  border-left: 2.66px outset #333;
  border-bottom: 1.66px outset #1a1a1a;
  z-index: 2;
  background: #1a1a1a;
}

.C, .C:before, .F, .F:before {
  border-left: none;
}
.C:before, .F:before {
  left: 0%;
  width: 60%;
}

.B, .D {
  width: 2.8%;
}

.B:before, .E:before {
  width: 62%;
  right: -7%;
}

.D:before {
  left: 12%;
}

.A:before {
  left: 14%;
}

.G:before {
  left: 5.5%;
}

.black {
  background: transparent;
  border: none;
  display: block;
  box-shadow: none;
  margin: -1.49%;
  top: 0%;
}

.C-sharp:before, .F-sharp:before {
  right: 24%;
}

.A-sharp:before {
  right: 1.5%;
}

.G-sharp:before, .D-sharp:before {
  right: 12%;
}

.black-active:before {
  border: 2.66px inset black;
  box-shadow: inset 1px 1px 1px black;
}

.active {
  border: 1.66px inset #f9e2b7;
}

.key:hover .label, .active .label, .black-active .label {
  text-shadow: 3px 3px 8px #BF7F00, -3px -3px 8px #BF7F00;
}

.active:before {
  border-left: 2.9px inset #f9e2b7;
  border-right: 1.66px inset #f9e2b7;
  border-top: 1.66px inset #f9e2b7;
}

.song {
  padding: 4px 0;
  width: 94%;
}

.song-menu {
  list-style: none;
  text-align: left;
  height: 100%;
  width: 14%;
  padding: 2%;
  float: left;
  display: block;
  border-right: 1px solid oldlace;
}

.song-title {
  height: 20%;
  text-align: left;
  padding: 5% 0 2% 0;
  border-bottom: 1px solid oldlace;
  cursor: pointer;
}

.song-title:hover {
  text-shadow: 3px 3px 8px #BF7F00, -3px -3px 8px #BF7F00;
}

.active-title {
  color: #1a1a1a;
  border-color: #BF7F00;
}

.song-text {
  height: 75%;
  width: 75%;
  padding: 2%;
  float: right;
  display: block;
  overflow-y: hidden;
}

.song-text > p {
  letter-spacing: 6px;
  text-align: center;
  width: 66%;
  text-transform: uppercase;
  font-style: normal;
  font-size: 22px;
  color: #1a1a1a;
}