#top h2 {
	position: relative;
	top: 20px;
	font-family:Ciao;
	font-size:2em;
	font-weight: normal;
	color: #362B20;
	text-align: center;
}

#top h1 {
	position: relative;
	top: 0px;
	font-family:Ciao;
	font-size:6em;
	font-weight: normal;
	color: #362B20;
	text-align: center;
}

#top h3 {
	letter-spacing:3px;
	position: relative;
	top: -40px;
	font-family:Ciao;
	font-size:1.5em;
	font-weight: normal;
	color: #362B20;
	text-align: center;
}

#aboutme {
	position: absolute;
	left: 50px;
	width: 60px;
	height: 60px;
	background: url(../images/iconone.png);
	background-size: 100% 100%;
}



img {
    background: red;
}

#top {
    position: absolute;
    top: 50px;
    background: #B5916C;
    height: 60vh;
}

#bottom {
    position: absolute;
    bottom: 0;
    background: #B5916C;
    height: 40vh;
}

#top, #bottom {
    width: 100vw; /* vw means viewport-width */
}

#bottom {
	font-size: 0;
	display: flex;
}

#keys {
	margin: auto;
	left: -48px;
	height: 100%;
/* 	background: yellow; */
	position: relative;
}


#bottom .white {
	display: inline-block;
	width: 60px;
	height: 90%;
  	background-color: #F4F4F4;
  	border: 1px solid #626262;
  	position: relative;
  	left: 30px;
	-moz-border-radius: 0 0 15px 15px;
	border-radius: 0 0 15px 15px; 
	background-image: -webkit-gradient(center bottom , #FFFFFF 90%, #CCCCCC 100%);
	-webkit-box-shadow: 0 -10px 2px 0px #838383 none, 0 -60px 40px 10px #EEEEEE inset;
	
	background-image: -moz-linear-gradient(center bottom , #FFFFFF 90%, #CCCCCC 100%);
	-moz-box-shadow: 0 -10px 2px 0px #838383 inset, 0 -60px 40px 10px #EEEEEE inset;
	
	background-image: -gradient(center bottom , #FFFFFF 90%, #CCCCCC 100%);
	box-shadow: 0 -10px 2px 0px #838383 inset, 0 -60px 40px 10px #EEEEEE inset;
}

.black {
	width: 35px;
	height: 160px;
 	background-color: #000000;
  	border-bottom: 2px solid #000;
  	border-left: 2px solid #000;
  	border-right: 2px solid #000;
  	position: absolute;
	-moz-border-radius: 0 0 5px 5px;
	border-radius: 0 0 5px 5px; 
	border-top: 0px;
	-moz-box-shadow: 0 -9px 10px 9px #303030 inset, 0 -15px #F7F7F7 inset;
	-webkit-box-shadow: 0 -9px 10px 9px #303030 inset, 0 -15px #F7F7F7 inset;
	box-shadow: 0 -9px 10px 9px #303030 inset, 0 -15px #F7F7F7 inset;
	top: 0px;
}

#b1 {
	left: 69px;
}

#b2 {
	left: 135px;
}

#b3 {
	left: 254px;
}
#b4 {
	left: 321px;
}
#b5 {
	left: 382px;
}
#b6 {
	left: 507px;
}
#b7 {
	left: 569px;
}
#b8 {
	left: 692px;
}
#b9 {
	left: 755px;
}
#b10 {
	left: 817px;
}
#b11 {
	left: 940px;
}
#b12 {
	left: 1004px;
}
#b13 {
	left: 1126px;
}
#b14 {
	left: 1189px;
}
#b15 {
	left: 1252px;
}

#image{
	margin-left: auto;
	margin-right: auto;
	top: -30px;
	width:1000px;
	height:500px;
	position: relative;
	background-size: 100% 100%;
	display:none;
}

#A:active {
  	background-color: #FFFACD;
	background-image: -webkit-gradient(center bottom , #FFFFFF 90%, #CCCCCC 100%);
	-webkit-box-shadow: 0 -5px 20px -3px #272927 inset;

	background-image: -moz-linear-gradient(center bottom , #FFFFFF 90%, #CCCCCC 100%);
	-moz-box-shadow: 0 -5px 2px 0px #838383 inset,0 -3px 20px -3px #272927 inset;
	
	background-image: -gradient(center bottom , #FFFFFF 90%, #CCCCCC 100%);
	box-shadow: 0 -5px 20px -3px #272927 inset;
}

#B:active {
  	background-color: #FFFF94;
	background-image: -webkit-gradient(center bottom , #FFFFFF 90%, #CCCCCC 100%);
	-webkit-box-shadow: 0 -5px 20px -3px #272927 inset;

	background-image: -moz-linear-gradient(center bottom , #FFFFFF 90%, #CCCCCC 100%);
	-moz-box-shadow: 0 -5px 2px 0px #838383 inset,0 -3px 20px -3px #272927 inset;
	
	background-image: -gradient(center bottom , #FFFFFF 90%, #CCCCCC 100%);
	box-shadow: 0 -5px 20px -3px #272927 inset;
}

#C:active {
  	background-color: #FFE954;
	background-image: -webkit-gradient(center bottom , #FFFFFF 90%, #CCCCCC 100%);
	-webkit-box-shadow: 0 -5px 20px -3px #272927 inset;

	background-image: -moz-linear-gradient(center bottom , #FFFFFF 90%, #CCCCCC 100%);
	-moz-box-shadow: 0 -5px 2px 0px #838383 inset,0 -3px 20px -3px #272927 inset;
	
	background-image: -gradient(center bottom , #FFFFFF 90%, #CCCCCC 100%);
	box-shadow: 0 -5px 20px -3px #272927 inset;
}
#D:active {
  	background-color: #99CCFF;
	background-image: -webkit-gradient(center bottom , #FFFFFF 90%, #CCCCCC 100%);
	-webkit-box-shadow: 0 -5px 20px -3px #272927 inset;

	background-image: -moz-linear-gradient(center bottom , #FFFFFF 90%, #CCCCCC 100%);
	-moz-box-shadow: 0 -5px 2px 0px #838383 inset,0 -3px 20px -3px #272927 inset;
	
	background-image: -gradient(center bottom , #FFFFFF 90%, #CCCCCC 100%);
	box-shadow: 0 -5px 20px -3px #272927 inset;
}

#E:active {
  	background-color: #6699FF;
	background-image: -webkit-gradient(center bottom , #FFFFFF 90%, #CCCCCC 100%);
	-webkit-box-shadow: 0 -5px 20px -3px #272927 inset;

	background-image: -moz-linear-gradient(center bottom , #FFFFFF 90%, #CCCCCC 100%);
	-moz-box-shadow: 0 -5px 2px 0px #838383 inset,0 -3px 20px -3px #272927 inset;
	
	background-image: -gradient(center bottom , #FFFFFF 90%, #CCCCCC 100%);
	box-shadow: 0 -5px 20px -3px #272927 inset;
}

#F:active {
  	background-color: #FFE066;
	background-image: -webkit-gradient(center bottom , #FFFFFF 90%, #CCCCCC 100%);
	-webkit-box-shadow: 0 -5px 20px -3px #272927 inset;

	background-image: -moz-linear-gradient(center bottom , #FFFFFF 90%, #CCCCCC 100%);
	-moz-box-shadow: 0 -5px 2px 0px #838383 inset,0 -3px 20px -3px #272927 inset;
	
	background-image: -gradient(center bottom , #FFFFFF 90%, #CCCCCC 100%);
	box-shadow: 0 -5px 20px -3px #272927 inset;
}
#G:active {
  	background-color: #FFE0FF;
	background-image: -webkit-gradient(center bottom , #FFFFFF 90%, #CCCCCC 100%);
	-webkit-box-shadow: 0 -5px 20px -3px #272927 inset;

	background-image: -moz-linear-gradient(center bottom , #FFFFFF 90%, #CCCCCC 100%);
	-moz-box-shadow: 0 -5px 2px 0px #838383 inset,0 -3px 20px -3px #272927 inset;
	
	background-image: -gradient(center bottom , #FFFFFF 90%, #CCCCCC 100%);
	box-shadow: 0 -5px 20px -3px #272927 inset;
}

#H:active {
  	background-color: #FFA3E0;
	background-image: -webkit-gradient(center bottom , #FFFFFF 90%, #CCCCCC 100%);
	-webkit-box-shadow: 0 -5px 20px -3px #272927 inset;

	background-image: -moz-linear-gradient(center bottom , #FFFFFF 90%, #CCCCCC 100%);
	-moz-box-shadow: 0 -5px 2px 0px #838383 inset,0 -3px 20px -3px #272927 inset;
	
	background-image: -gradient(center bottom , #FFFFFF 90%, #CCCCCC 100%);
	box-shadow: 0 -5px 20px -3px #272927 inset;
}

#I:active {
  	background-color: #FF85AD;
	background-image: -webkit-gradient(center bottom , #FFFFFF 90%, #CCCCCC 100%);
	-webkit-box-shadow: 0 -5px 20px -3px #272927 inset;

	background-image: -moz-linear-gradient(center bottom , #FFFFFF 90%, #CCCCCC 100%);
	-moz-box-shadow: 0 -5px 2px 0px #838383 inset,0 -3px 20px -3px #272927 inset;
	
	background-image: -gradient(center bottom , #FFFFFF 90%, #CCCCCC 100%);
	box-shadow: 0 -5px 20px -3px #272927 inset;
}
#J:active {
  	background-color: #ADD6AD;
	background-image: -webkit-gradient(center bottom , #FFFFFF 90%, #CCCCCC 100%);
	-webkit-box-shadow: 0 -5px 20px -3px #272927 inset;

	background-image: -moz-linear-gradient(center bottom , #FFFFFF 90%, #CCCCCC 100%);
	-moz-box-shadow: 0 -5px 2px 0px #838383 inset,0 -3px 20px -3px #272927 inset;
	
	background-image: -gradient(center bottom , #FFFFFF 90%, #CCCCCC 100%);
	box-shadow: 0 -5px 20px -3px #272927 inset;
}

#K:active {
  	background-color: #4DB8FF;
	background-image: -webkit-gradient(center bottom , #FFFFFF 90%, #CCCCCC 100%);
	-webkit-box-shadow: 0 -5px 20px -3px #272927 inset;

	background-image: -moz-linear-gradient(center bottom , #FFFFFF 90%, #CCCCCC 100%);
	-moz-box-shadow: 0 -5px 2px 0px #838383 inset,0 -3px 20px -3px #272927 inset;
	
	background-image: -gradient(center bottom , #FFFFFF 90%, #CCCCCC 100%);
	box-shadow: 0 -5px 20px -3px #272927 inset;
}

#L:active {
  	background-color: #4775FF;
	background-image: -webkit-gradient(center bottom , #FFFFFF 90%, #CCCCCC 100%);
	-webkit-box-shadow: 0 -5px 20px -3px #272927 inset;

	background-image: -moz-linear-gradient(center bottom , #FFFFFF 90%, #CCCCCC 100%);
	-moz-box-shadow: 0 -5px 2px 0px #838383 inset,0 -3px 20px -3px #272927 inset;
	
	background-image: -gradient(center bottom , #FFFFFF 90%, #CCCCCC 100%);
	box-shadow: 0 -5px 20px -3px #272927 inset;
}
#M:active {
  	background-color: #FFD119;
	background-image: -webkit-gradient(center bottom , #FFFFFF 90%, #CCCCCC 100%);
	-webkit-box-shadow: 0 -5px 20px -3px #272927 inset;

	background-image: -moz-linear-gradient(center bottom , #FFFFFF 90%, #CCCCCC 100%);
	-moz-box-shadow: 0 -5px 2px 0px #838383 inset,0 -3px 20px -3px #272927 inset;
	
	background-image: -gradient(center bottom , #FFFFFF 90%, #CCCCCC 100%);
	box-shadow: 0 -5px 20px -3px #272927 inset;
}

#N:active {
  	background-color: #4775FF;
	background-image: -webkit-gradient(center bottom , #FFFFFF 90%, #CCCCCC 100%);
	-webkit-box-shadow: 0 -5px 20px -3px #272927 inset;

	background-image: -moz-linear-gradient(center bottom , #FFFFFF 90%, #CCCCCC 100%);
	-moz-box-shadow: 0 -5px 2px 0px #838383 inset,0 -3px 20px -3px #272927 inset;
	
	background-image: -gradient(center bottom , #FFFFFF 90%, #CCCCCC 100%);
	box-shadow: 0 -5px 20px -3px #272927 inset;
}

#O:active {
  	background-color: #70B870;
	background-image: -webkit-gradient(center bottom , #FFFFFF 90%, #CCCCCC 100%);
	-webkit-box-shadow: 0 -5px 20px -3px #272927 inset;

	background-image: -moz-linear-gradient(center bottom , #FFFFFF 90%, #CCCCCC 100%);
	-moz-box-shadow: 0 -5px 2px 0px #838383 inset,0 -3px 20px -3px #272927 inset;
	
	background-image: -gradient(center bottom , #FFFFFF 90%, #CCCCCC 100%);
	box-shadow: 0 -5px 20px -3px #272927 inset;
}
#P:active {
  	background-color: #4E814E;
	background-image: -webkit-gradient(center bottom , #FFFFFF 90%, #CCCCCC 100%);
	-webkit-box-shadow: 0 -5px 20px -3px #272927 inset;

	background-image: -moz-linear-gradient(center bottom , #FFFFFF 90%, #CCCCCC 100%);
	-moz-box-shadow: 0 -5px 2px 0px #838383 inset,0 -3px 20px -3px #272927 inset;
	
	background-image: -gradient(center bottom , #FFFFFF 90%, #CCCCCC 100%);
	box-shadow: 0 -5px 20px -3px #272927 inset;
}

#Q:active {
  	background-color: #FF75A3;
	background-image: -webkit-gradient(center bottom , #FFFFFF 90%, #CCCCCC 100%);
	-webkit-box-shadow: 0 -5px 20px -3px #272927 inset;

	background-image: -moz-linear-gradient(center bottom , #FFFFFF 90%, #CCCCCC 100%);
	-moz-box-shadow: 0 -5px 2px 0px #838383 inset,0 -3px 20px -3px #272927 inset;
	
	background-image: -gradient(center bottom , #FFFFFF 90%, #CCCCCC 100%);
	box-shadow: 0 -5px 20px -3px #272927 inset;
}

#R:active {
  	background-color: #FF47A3;
	background-image: -webkit-gradient(center bottom , #FFFFFF 90%, #CCCCCC 100%);
	-webkit-box-shadow: 0 -5px 20px -3px #272927 inset;

	background-image: -moz-linear-gradient(center bottom , #FFFFFF 90%, #CCCCCC 100%);
	-moz-box-shadow: 0 -5px 2px 0px #838383 inset,0 -3px 20px -3px #272927 inset;
	
	background-image: -gradient(center bottom , #FFFFFF 90%, #CCCCCC 100%);
	box-shadow: 0 -5px 20px -3px #272927 inset;
}
#S:active {
  	background-color: #85A3C2;
	background-image: -webkit-gradient(center bottom , #FFFFFF 90%, #CCCCCC 100%);
	-webkit-box-shadow: 0 -5px 20px -3px #272927 inset;

	background-image: -moz-linear-gradient(center bottom , #FFFFFF 90%, #CCCCCC 100%);
	-moz-box-shadow: 0 -5px 2px 0px #838383 inset,0 -3px 20px -3px #272927 inset;
	
	background-image: -gradient(center bottom , #FFFFFF 90%, #CCCCCC 100%);
	box-shadow: 0 -5px 20px -3px #272927 inset;
}

#T:active {
  	background-color: #336699;
	background-image: -webkit-gradient(center bottom , #FFFFFF 90%, #CCCCCC 100%);
	-webkit-box-shadow: 0 -5px 20px -3px #272927 inset;

	background-image: -moz-linear-gradient(center bottom , #FFFFFF 90%, #CCCCCC 100%);
	-moz-box-shadow: 0 -5px 2px 0px #838383 inset,0 -3px 20px -3px #272927 inset;
	
	background-image: -gradient(center bottom , #FFFFFF 90%, #CCCCCC 100%);
	box-shadow: 0 -5px 20px -3px #272927 inset;
}

#U:active {
  	background-color: #5CAD5C;
	background-image: -webkit-gradient(center bottom , #FFFFFF 90%, #CCCCCC 100%);
	-webkit-box-shadow: 0 -5px 20px -3px #272927 inset;

	background-image: -moz-linear-gradient(center bottom , #FFFFFF 90%, #CCCCCC 100%);
	-moz-box-shadow: 0 -5px 2px 0px #838383 inset,0 -3px 20px -3px #272927 inset;
	
	background-image: -gradient(center bottom , #FFFFFF 90%, #CCCCCC 100%);
	box-shadow: 0 -5px 20px -3px #272927 inset;
}