@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700);
* {
  list-style: none;
  margin: 0;
  padding: 0;
  outline: 0;
  transition:display 1s;
}

html {
  font-size: 4vw;
}

body {
  position:absolute;
  display:block;
  clear:both;
  height:calc(90% + 22vw);
  width: 100.001%;
  margin:0px auto -500px;
  padding:0em 0em 0em 0em;
  background: #999;
  
}
.container{
  position:relative;
  box-shadow: 0em 1em 3em 0em #000 inset, 0em 10em 4em 0em rgba(230, 120, 50, 0.4) inset;
  min-height:100%;
  
}
h1 {
  position:relative;
  display:block;
  clear:both;
  font-size:calc(200% + 4vh), 6em;
  text-align: center;
  font-family: Poiret One;
  font-variant: small-caps;
  padding-top: 3vh;
}

p {
  font-size:60%;
  text-align: center;
  font-family: 'Open Sans', sans serif;
  font-weight: 300;
}

ul {
  width: 23.1em;
  margin: 0em auto;
  margin-top: 4vh;
  /* transition:width 300ms;*/
}

ul:after {
  content: '';
  height: 0;
  display: block;
  clear: both;
}

li {
  position: relative;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  cursor: pointer;
  height: 5em;
  width: 1em;
  display: block;
  float: left;
  box-shadow: 
    0em 0.2em 0.9em -0.2em #000, 
    0em -0.2em 0.1em -0.2em rgba(255, 255, 255, 0.5) inset, 
    0em -0.2em 0.4em -0.2em #000 inset, 
    .3em -0.2em 0.4em -0.3em rgba(0, 0, 0, 0.7) inset, 
    -0.3em -0.2em 0.4em -0.3em rgba(0, 0, 0, 0.3) inset;
  text-align: center;
  border-radius: 0.2em 0.2em 0.2em 0.2em;
  overflow: hidden;
  z-index: 2;
  transition: box-shadow 200ms;
}
/*li:active{
  margin-top:0.1em;
}*/

li:after {
  content: '';
  position: absolute;
  z-index: 2;
  height: 100%;
  width: 100%;
  display: block;
}

li:before {
  content: '';
  z-index: -69;
  height: 100%;
  width: 100%;
  display: block;
  position: absolute;
  box-shadow: 
    0.1em 0.1em 0.3em rgba(0,0,0,0.7) inset,
    0.075em 0.05em 0.05em rgba(0,0,0,0.4) inset;
}

li.white:before {
  background: 
    linear-gradient(60deg, 
      rgba(256, 256, 256, 0.0) 0%, 
      rgba(256, 256, 256, 0.2) 20%, 
      rgba(256, 256, 256, 1) 50%, 
      rgba(256, 256, 256, 0.5) 80%, 
      rgba(256, 256, 256, 0.0) 100%
    ), linear-gradient(100deg, 
      rgba(256, 256, 256, 0.0) 0%, 
      rgba(256, 256, 256, 0.3) 20%, 
      rgba(256, 256, 256, 0.5) 50%, 
      rgba(256, 256, 256, 0.3) 80%, 
      rgba(256, 256, 256, 0.0) 100%
    );
}

li .text {
  font-family: 'Open Sans', sans serif;
  font-weight: 600;
  position: absolute;
  bottom: 0.5em;
  height: 1em;
  width: 100%;
  z-index: 0;
}

.text:after {
  content: ' ';
  height: 100%;
  width: 100%;
  display: block;
  position: absolute;
  z-index: 8;
  clear: both;
}

.black {
  width: 0.7em;
  background-color: rgba(20, 20, 20, 1);
  height: 3em;
  margin-left: -0.35em;
  margin-right: -0.35em;
  margin-top: -0.1em;
  position: relative;
  z-index: 5;
  box-shadow: 
    -0.025em 0.075em 0.075em 0em, 
    -0.05em -0.05em 0.3em -0.05em rgba(0, 0, 0, 0.8) inset, 
    0.05em -0.1em 0.3em -0.05em rgba(255, 255, 255, 0.8) inset;
}

.black * {
  font-size: 0.5em;
  color: rgba(256, 256, 256, 0.5);
  text-shadow: 
    0.0em 0.0em 0.1em #fff, 
    0.05em 0.05em 0.25em #000, 
    0.05em 0.05em 0.25em #000;
  margin-bottom: 0.3em;
  opacity:0.5;
}

.white * {
  font-size: 0.7em;
  margin-bottom: 0.3em;
  color: rgba(256, 256, 256, 0.7);
  text-shadow: 
    0.0em 0.0em 0.1em #fff, 
    0.05em 0.05em 0.25em #000, 
    0.05em 0.05em 0.25em #000;
  opacity:0.5;
}

.typed {
  transition: all 300ms;
}

li:active,
.typed {
  transition: box-shadow 20ms;
  position: relative;
  box-shadow: 
    0em 0em 0.5em rgba(50, 150, 256, 0.9), 
    0em 0em 1em rgba(30, 96, 220, 0.9) inset, 
    0em 0em 0.5em rgba(256, 256, 256, 0.9) inset, 
    0em 0em 0.7em rgba(30, 96, 220, 0.9) inset;
  z-index: 3;
}

[data-keycode='46'].text:after {
  overflow: visible;
  content: ' ';
}

/*
[data-keycode='46']:after,
[data-keycode='59']:after,
[data-keycode='112']:after {
  content: ' ';
  height: 100%;
  width: 100%;
  position: absolute;
  display: block;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0), rgba(255, 0, 0, 0.1) 40%, rgba(255, 0, 0, 0.2) 60%, rgba(255, 0, 0, 0.3) 85%, rgba(255, 0, 0, 0.15) 100%);
  z-index: 2;
}
*/

.clearfix:after {
  content: '';
  height: 0;
  display: block;
  clear: both;
}

h2.switch-to {
  display: block;
  margin: 1em auto -1.4em;
  padding: 0;
  text-align: center;
  font-family: Poiret One;
  font-weight: 400;
  font-variant: small-caps;
  font-size: 0.8em;
}

#switch-chars {
  transition: background 600ms;
  height: 3em;
  width: 15%;
  display: block;
  position: absolute;
  left: 42.5%;
  margin: 3em auto;
  padding: 0;
  font-family:'Open Sans';
  font-size: 2vw;
  background: linear-gradient(135deg, rgba(190, 150, 130, 0.6) 10%, rgba(230, 250, 240, 0.3) 40%, rgba(180, 130, 110, 0.6) 90%);
  border-radius: 0.5em;
  border: 1em solid sameColor;
  overflow: hidden;
}
#switch-chars:hover:before {
  left: 0;
}

#switch-chars:active {
  background: linear-gradient(130deg, rgba(230, 250, 240, 0.3) 10%, rgba(190, 150, 130, 0.9) 40%, rgba(230, 250, 240, 0.3) 90%);
}

#switch-chars:active:before {
  transition: left 200ms;
  left: -200%;
}

#switch-chars:before {
  transition: left 500ms;
  content: '';
  position: absolute;
  height: 6em;
  width: 400%;
  left: -400%;
  margin-top: -2em;
  background: linear-gradient(120deg, rgba(230, 250, 240, 0.0) 30%, rgba(256, 256, 256, 0.7) 50%, rgba(230, 250, 240, 0.0) 70%);
}

#switch-chars:after {
  content: '';
  height: 100%;
  width: 100%;
  position: absolute;
  display: block;
  top: 0;
  z-index: 2;
}

.to-keys,
.to-notes {
  position: relative;
  z-index: 1;
}

.keys,
.to-notes {
  display: block;
}

.notes,
.to-keys {
  display: none;
}




audio{
  display:none;
}