* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html {
	height: 100%;
}

body {
	font-family: sans-serif;
	font-size: 1.2rem;
	min-height: 100%;
}

canvas {
	position: relative;
	border: 2px solid #d3d3d3;
	background-color: #f1f1f1;
	top: 2%;
}
.grid-container > * {
	box-shadow: -1px 1px 7px 0px rgba(0, 0, 0, 0.75);
	border-radius: 4px;
	padding: 10px;
	text-align: center;
}

.header {
	grid-area: header;
	background-color: gray;
}

.navbar {
	grid-area: navbar;
	background-color: gray;
}
.main {
	grid-area: main;
}
.sidebar {
	grid-area: sidebar;
	background-color: gray;
}
.footer {
	grid-area: footer;
	background-color: gray;
}
.seti {
	display: flex;
    align-items: start;
	justify-content: center;
}
.grid-container{
	display: grid;
	gap: 10px;
	grid-template:
		"header"  100px
		"navbar"  50px
		"main"    auto
		"sidebar" 80px
		"footer"  90px;
}

@media (min-width: 640px) {
	.grid-container{
	  grid-template:
	    "header  header" 100px
		"navbar  navbar" 50px
		"sidebar main"   auto
		"footer  footer" 100px /
		120px auto;
	}
}

@media (min-width: 900px) {
	.grid-container{
	  grid-template:
	    "header  header header"  100px
		"navbar  main   sidebar" auto
		"footer  footer footer"  100px /
		150px    auto   150px;
	}
	canvas {
		width: 700px;
	}
}

.im {
	opacity: 0;
}
.imag{
	position: absolute;
	width: 6%;
	left: 35%;
	top: 30%;
}

ul {
  height:auto;
  width:auto;
  border-radius:1em;
  padding-top: 1em;
  /*background:linear-gradient(to bottom right,rgba(0,0,0,0.3),rgba(0,0,0,0)),url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/187/vwood.png);
  box-shadow:0 0 50px rgba(0,0,0,0.5) inset,0 1px rgba(212,152,125,0.2) inset,0 5px 15px rgba(0,0,0,0.5)*/
}

li {
  margin:0;
  padding: 0;
  list-style:none;
  position:relative;
  float:left;
}

ul .white {
  height:9em;
  width:2.8em;
  z-index:1;
  border-left:1px solid #bbb;
  border-bottom:1px solid #bbb;
  border-radius:0 0 5px 5px;
  box-shadow:-1px 0 0 rgba(255,255,255,0.8) inset,0 0 5px #ccc inset,0 0 3px rgba(0,0,0,0.2);
  background:linear-gradient(to bottom,#eee 0%,#fff 100%)
}

ul .c:active {
  border-top:1px solid #777;
  border-left:1px solid #999;
  border-bottom:1px solid #999;
  box-shadow:2px 0 3px rgba(63,220,5,0.1) inset,-5px 5px 20px rgba(63,220,5,0.2) inset,0 0 3px rgba(63,220,5,0.2);
  background:red;
}
ul .d:active {
  border-top:1px solid #777;
  border-left:1px solid #999;
  border-bottom:1px solid #999;
  box-shadow:2px 0 3px rgba(63,220,5,0.1) inset,-5px 5px 20px rgba(63,220,5,0.2) inset,0 0 3px rgba(63,220,5,0.2);
  background:limegreen;
}
ul .e:active {
  border-top:1px solid #777;
  border-left:1px solid #999;
  border-bottom:1px solid #999;
  box-shadow:2px 0 3px rgba(63,220,5,0.1) inset,-5px 5px 20px rgba(63,220,5,0.2) inset,0 0 3px rgba(63,220,5,0.2);
  background:dodgerblue;
}
ul .f:active {
  border-top:1px solid #777;
  border-left:1px solid #999;
  border-bottom:1px solid #999;
  box-shadow:2px 0 3px rgba(63,220,5,0.1) inset,-5px 5px 20px rgba(63,220,5,0.2) inset,0 0 3px rgba(63,220,5,0.2);
  background:mediumslateblue;
}
ul .g:active {
  border-top:1px solid #777;
  border-left:1px solid #999;
  border-bottom:1px solid #999;
  box-shadow:2px 0 3px rgba(63,220,5,0.1) inset,-5px 5px 20px rgba(63,220,5,0.2) inset,0 0 3px rgba(63,220,5,0.2);
  background:rgb(255, 240, 0, 1.0);
}
ul .a:active {
  border-top:1px solid #777;
  border-left:1px solid #999;
  border-bottom:1px solid #999;
  box-shadow:2px 0 3px rgba(63,220,5,0.1) inset,-5px 5px 20px rgba(63,220,5,0.2) inset,0 0 3px rgba(63,220,5,0.2);
  background:gainsboro;
}
ul .b:active {
  border-top:1px solid #777;
  border-left:1px solid #999;
  border-bottom:1px solid #999;
  box-shadow:2px 0 3px rgba(63,220,5,0.1) inset,-5px 5px 20px rgba(63,220,5,0.2) inset,0 0 3px rgba(63,220,5,0.2);
  background:gainsboro;
}
ul .cc:active {
  border-top:1px solid #777;
  border-left:1px solid #999;
  border-bottom:1px solid #999;
  box-shadow:2px 0 3px rgba(63,220,5,0.1) inset,-5px 5px 20px rgba(63,220,5,0.2) inset,0 0 3px rgba(63,220,5,0.2);
  background:gainsboro;
}
.black {
  height:5.1em;
  width:1.5em;
  margin:0 0 0 -0.8em;
  z-index:2;
  border:1px solid #000;
  border-radius:0 0 3px 3px;
  box-shadow:-1px -1px 2px rgba(255,255,255,0.2) inset,0 -5px 2px 3px rgba(0,0,0,0.6) inset,0 2px 4px rgba(0,0,0,0.5);
  background:linear-gradient(45deg,#222 0%,#555 100%);
}
.black:active {
  box-shadow:-1px -1px 2px rgba(255,255,255,0.2) inset,0 -2px 2px 3px rgba(0,0,0,0.6) inset,0 1px 2px rgba(0,0,0,0.5);
  background:darkslategray;
}
.a,.g,.d,.c,.e,.b {
  margin:0 0 0 -0.7em
}
ul li:first-child {
  border-radius:5px 0 5px 5px
}
ul li:last-child {
  border-radius:0 5px 5px 5px
}