*
{
  font-family: Future;
}

body {
  background-color:black;
  margin: 0;
  padding: 0;
  font-family: Play;
  font-weight: 300;
}
html, body {
  height: 100%;
}
#demo {
  display:table;
  width:100%;
  height:100%;
}
#field {
  position:relative;
  display:table-cell;
  height: 100%;
  	overflow:hidden;
  text-align: center;
  vertical-align: middle;
}
#box {
  color: black;
  font-size:24px;
  padding: 10px 16px;
  border: 2px solid black;
  background: #9af600;
  background: linear-gradient(to bottom, #9af600 0%,#71B200 100%);
  display:inline-block;
  border-radius: 10px;
}
#field p {
  position: absolute;
  color: #999;
  top: 0px;
  padding: 0px 20px;
  text-align: left;
  z-index: -1000;
}
#controls {
  position:absolute;
  color: #999;
  width: 100%;
  bottom: 20px;
  text-align: center;
}

button {
  margin: 2px;
}

button {
  font-size:16px;
  display:inline-block;
  border-radius: 8px;  
  padding: 10px 16px;  
}


button.blue {
  color: rgba(168, 207, 243, 0.72);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.65), 0 -1px 0 rgba(0, 0, 0, 0.30);  
  background: #0000f5;
  background: linear-gradient(to bottom, #003de2 0%, #02096b 100%);
}
button.blue:active {
  color: rgba(168, 207, 243, 0.72);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.65), 0 -1px 0 rgba(0, 0, 0, 0.30);
  border: 2px solid rgb(3, 44, 57);
  background: #8787ea;
  background: linear-gradient(to bottom, #aceaff 1.32%, #064255 100%);
}
button.blue:hover {
  color: rgba(143, 250, 223, 1);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.65), 0 -1px 0 rgba(0, 0, 0, 0.30);  
  background: #081637;
  background: linear-gradient(to bottom, #214f5f 1.32%, #02141a 100%);
}


button.turquoise {
  color: rgba(255, 180, 4, 1);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.65), 0 -1px 0 rgba(0, 0, 0, 0.30);
  background: #566475;
  background: linear-gradient(to bottom, #576576 1.32%, #21262d 100%);
}
button.turquoise:active {
  color: rgba(235, 216, 231, 1);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.65), 0 -1px 0 rgba(0, 0, 0, 0.30);
  background: #35c5f0;
  background: linear-gradient(to bottom, #aceaff 1.32%, #064255 100%);
}
button.turquoise:hover {
  color: rgba(193, 226, 161, 1);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.65), 0 -1px 0 rgba(0, 0, 0, 0.30);
  background: #35c5f0;
  background: linear-gradient(to bottom, #aceaff 1.32%, #064255 100%);
}

button.yellow {
  color: rgba(32, 34, 2, 1);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.65), 0 -1px 0 rgba(0, 0, 0, 0.30);
  background: #f6ee4b;
  background: linear-gradient(to bottom, #717657 1.32%, #2c2d21 100%);
}
button.yellow:active {
  color: rgba(234, 230, 198, 1);
  text-shadow: 0 1px 0 rgba(91, 91, 84, 0.65), 0 -1px 0 rgba(255, 255, 255, .30);
  background: #e2f70d;
  background: linear-gradient(to bottom, #f6ffac 1.32%, #dff035 100%);
}
button.yellow:hover {
  color: rgba(239, 238, 228, 1);
  text-shadow: 0 1px 0 rgba(98, 100, 82, 0.65), 0 -1px 0 rgba(0, 0, 0, 0.30);
  background: #ccc305;
  background: linear-gradient(to bottom, #fff8ac 1.32%, #535505 100%);
}