@font-face {
  font-family: typewriter;
  src: url(../misc/atwriter.ttf);
}
html {
  height: 100%;
}
body {
  height: 100%;
  background-color: #a2a2a2;
  font-family: Verdana, sans-serif;
}
.title {
  font-family: typewriter;
  font-size: 3em;
  text-align: center;
  margin-top: 10px;
  color: white;
}
.title p {
  background-color: #8a8a8a;
  border: 3px solid #eaeaea;
  display: inline-block;
  letter-spacing: 0.5em;
  padding: 20px;
  border-radius: 15px;
  text-shadow: 2px 1px 3px black;
  -webkit-text-shadow: 2px 1px 3px black;
  -moz-text-shadow: 2px 1px 3px black;
  box-shadow: 2px 1px 3px black, inset 5px 5px 5px black;
  -webkit-box-shadow: 2px 1px 3px black, inset 5px 5px 5px black;
  -moz-box-shadow: 2px 1px 3px black, inset 5px 5px 5px black;
}
.instructions {
  max-width: 800px;
  margin: 0 auto;
  margin-top: 30px;
  margin-bottom: 20px;
  line-height: 1.5em;
  padding: 10px;
}
.container {
  margin-top: 20px;
  min-width: 600px;
  margin-bottom: 50px;
}
#canvas {
  height: 600px;
  width: 600px;
  margin: 0 auto;
  background-image: url("../images/canvasbk.gif");
  box-shadow: 1px 3px 5px;
  -webkit-box-shadow: 1px 3px 5px;
  -moz-box-shadow: 1px 3px 5px;
  overflow: hidden;
}
.pixel {
  height: 20px;
  width: 20px;
  float: left;
  background-color: black;
}
.clear {
  clear: both;
  height: 10px;
}
#footer {
  width: 100%;
  height: 50px;
  bottom: 0;
  padding-top: 40px;
  margin-bottom: -50px;
  text-align: center;
}
#footer a {
  color: white;
  text-decoration: underline;
}
.keyboard {
  min-width: 476px;
  margin: 20px auto;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.row {
  text-align: center;
}
.key {
  margin: 3px 1px;
  padding: 0px;
  width: 30px;
  height: 30px;
  border: 2px solid #333;
  border-radius: 17px;
  display: inline-block;
  font-size: 1.5em;
  font-family: typewriter;
  line-height: 27px;
  text-align: center;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: -1px 1px 0 black, -2px 2px 0 black, -3px 3px 0 black, -10px 10px 20px rgba(0, 0, 0, 0.45);
  -webkit-box-shadow: -1px 1px 0 black, -2px 2px 0 black, -3px 3px 0 black, -10px 10px 20px rgba(0, 0, 0, 0.45);
  -moz-box-shadow: -1px 1px 0 black, -2px 2px 0 black, -3px 3px 0 black, -10px 10px 20px rgba(0, 0, 0, 0.45);
  -webkit-transition: transform 0.15s ease, box-shadow 0.15s ease;
  -moz-transition: transform 0.15s ease, box-shadow 0.15s ease;
  -o-transition: transform 0.15s ease, box-shadow 0.15s ease;
  -ms-transition: transform 0.15s ease, box-shadow 0.15s ease;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.key:active {
  box-shadow: -1px 1px 0 black, -2px 2px 0 black, -3px 3px 0 black, -5px 5px 15px rgba(0, 0, 0, 0.45);
  -webkit-box-shadow: -1px 1px 0 black, -2px 2px 0 black, -3px 3px 0 black, -5px 5px 15px rgba(0, 0, 0, 0.45);
  -moz-box-shadow: -1px 1px 0 black, -2px 2px 0 black, -3px 3px 0 black, -5px 5px 15px rgba(0, 0, 0, 0.45);
  transform: translate(-3px, 3px);
}
.spacebar {
  width: 175px;
}
.active {
  box-shadow: -1px 1px 0 black, -2px 2px 0 black, -3px 3px 0 black, -5px 5px 15px rgba(0, 0, 0, 0.45);
  -webkit-box-shadow: -1px 1px 0 black, -2px 2px 0 black, -3px 3px 0 black, -5px 5px 15px rgba(0, 0, 0, 0.45);
  -moz-box-shadow: -1px 1px 0 black, -2px 2px 0 black, -3px 3px 0 black, -5px 5px 15px rgba(0, 0, 0, 0.45);
  transform: translate(-3px, 3px);
}
.menu {
  min-width: 620px;
  text-align: center;
  font-family: typewriter;
  margin-top: 10px;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.menu li {
  display: inline-block;
}
.submenu {
  background-color: #8a8a8a;
  border: 3px solid #eaeaea;
  padding: 10px 10px 10px 20px;
  margin-bottom: 10px;
  border-radius: 10px;
  box-shadow: 2px 1px 3px black, inset 3px 3px 3px black;
  -webkit-box-shadow: 2px 1px 3px black, inset 3px 3px 3px black;
  -moz-box-shadow: 2px 1px 3px black, inset 3px 3px 3px black;
}
.submenu p {
  margin-bottom: 10px;
  font-size: 1.25em;
  color: white;
  letter-spacing: 0.5em;
}
.button {
  background-color: #eaeaea;
  letter-spacing: 0.15em;
  padding: 5px;
  border-radius: 41px;
  width: 65px;
  height: 65px;
  border: 4px solid #333;
  line-height: 61px;
  cursor: pointer;
  -webkit-transition: transform 0.15s ease, box-shadow 0.15s ease;
  -moz-transition: transform 0.15s ease, box-shadow 0.15s ease;
  -o-transition: transform 0.15s ease, box-shadow 0.15s ease;
  -ms-transition: transform 0.15s ease, box-shadow 0.15s ease;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  box-shadow: -1px 1px 0 black, -2px 2px 0 black, -3px 3px 0 black, -4px 4px 0 black, -10px 10px 20px rgba(0, 0, 0, 0.45);
  -webkit-box-shadow: -1px 1px 0 black, -2px 2px 0 black, -3px 3px 0 black, -4px 4px 0 black, -10px 10px 20px rgba(0, 0, 0, 0.45);
  -moz-box-shadow: -1px 1px 0 black, -2px 2px 0 black, -3px 3px 0 black, -4px 4px 0 black, -10px 10px 20px rgba(0, 0, 0, 0.45);
}
.button:hover {
  box-shadow: -1px 1px 0 black, -2px 2px 0 black, -3px 3px 0 black, -4px 4px 0 black, -7px 7px 17px rgba(0, 0, 0, 0.45);
  -webkit-box-shadow: -1px 1px 0 black, -2px 2px 0 black, -3px 3px 0 black, -4px 4px 0 black, -7px 7px 17px rgba(0, 0, 0, 0.45);
  -moz-box-shadow: -1px 1px 0 black, -2px 2px 0 black, -3px 3px 0 black, -4px 4px 0 black, -7px 7px 17px rgba(0, 0, 0, 0.45);
  transform: translate(-1px, 1px);
}
.button:active {
  box-shadow: -1px 1px 0 black, -2px 2px 0 black, -3px 3px 0 black, -4px 4px 0 black, -5px 5px 15px rgba(0, 0, 0, 0.45);
  -webkit-box-shadow: -1px 1px 0 black, -2px 2px 0 black, -3px 3px 0 black, -4px 4px 0 black, -5px 5px 15px rgba(0, 0, 0, 0.45);
  -moz-box-shadow: -1px 1px 0 black, -2px 2px 0 black, -3px 3px 0 black, -4px 4px 0 black, -5px 5px 15px rgba(0, 0, 0, 0.45);
  transform: translate(-3px, 3px);
}
.selected {
  background-color: #403f3f !important;
  color: white;
}
#savebox {
  max-width: 1100px;
  margin: 0 auto;
  margin-top: 10px;
  text-align: center;
  background-color: #8a8a8a;
  border: 3px solid #eaeaea;
  border-radius: 10px;
  padding: 10px 10px 10px 20px;
  box-shadow: 2px 1px 3px black, inset 3px 3px 3px black;
  -webkit-box-shadow: 2px 1px 3px black, inset 3px 3px 3px black;
  -moz-box-shadow: 2px 1px 3px black, inset 3px 3px 3px black;
  overflow: auto;
}
#savebox p {
  margin-bottom: 10px;
  font-size: 1.25em;
  color: white;
}
.hidden {
  display: none;
}
/*Text Colors*/
.rtext {
  color: #ff0040;
}
.ctext {
  color: #36c0f4;
}
.ytext {
  color: #ffe339;
}
.gtext {
  color: #64e125;
}
/*Key Classes*/
/*a*/
.k-65 {
  background-color: #f92222;
}
/*b*/
.k-66 {
  background-color: #4a7401;
  color: white;
}
/*c*/
.k-67 {
  background-color: #956a01;
  color: white;
}
/*d*/
.k-68 {
  background-color: #ffba00;
}
/*e*/
.k-69 {
  background-color: #ffd164;
}
/*f*/
.k-70 {
  background-color: #d8d500;
}
/*g*/
.k-71 {
  background-color: #6ec02b;
}
/*h*/
.k-72 {
  background-color: #08c747;
}
/*i*/
.k-73 {
  background-color: #576afa;
}
/*j*/
.k-74 {
  background-color: #3cc0c2;
}
/*k*/
.k-75 {
  background-color: #2331e7;
}
/*l*/
.k-76 {
  background-color: #a200ff;
}
/*m*/
.k-77 {
  background-color: #006c6b;
  color: white;
}
/*n*/
.k-78 {
  background-color: #00511e;
  color: white;
}
/*o*/
.k-79 {
  background-color: #cb75f8;
}
/*p*/
.k-80 {
  background-color: #fd7bff;
}
/*q*/
.k-81 {
  background-color: #fc6f6f;
}
/*r*/
.k-82 {
  background-color: #fdfb41;
}
/*s*/
.k-83 {
  background-color: #ff7800;
}
/*t*/
.k-84 {
  background-color: #72ff00;
}
/*u*/
.k-85 {
  background-color: #46f0f2;
}
/*v*/
.k-86 {
  background-color: #5e5c26;
  color: white;
}
/*w*/
.k-87 {
  background-color: #fea353;
}
/*x*/
.k-88 {
  background-color: #884301;
  color: white;
}
/*y*/
.k-89 {
  background-color: #4ff87f;
}
/*z*/
.k-90 {
  background-color: #910101;
  color: white;
}
/*0*/
.k-48 {
  background-color: #f7c4f9;
}
/*1*/
.k-49 {
  background-color: #af005b;
}
/*2*/
.k-50 {
  background-color: #ff007e;
}
/*3*/
.k-51 {
  background-color: #ff83a9;
}
/*4*/
.k-52 {
  background-color: #ffc6a4;
}
/*5*/
.k-53 {
  background-color: #fffbb3;
}
/*6*/
.k-54 {
  background-color: #bdeba4;
}
/*7*/
.k-55 {
  background-color: #b5e6e8;
}
/*8*/
.k-56 {
  background-color: #b9c4e1;
}
/*9*/
.k-57 {
  background-color: #d4bbe0;
}
/*;*/
.k-186 {
  background-color: #eb34f2;
}
/*=*/
.k-187 {
  background-color: #cacaca;
}
/*,*/
.k-188 {
  background-color: #0b1b6b;
  color: white;
}
/*-*/
.k-189 {
  background-color: white;
}
/*.*/
.k-190 {
  background-color: #4d0b70;
  color: white;
}
/*/*/
.k-191 {
  background-color: #7d097e;
  color: white;
}
/*[*/
.k-219 {
  background-color: #8a8a8a;
}
/*]*/
.k-221 {
  background-color: #403f3f;
}
/*'*/
.k-222 {
  background-color: black;
  color: white;
}
/*spacebar*/
.k-32 {
  background-color: black;
  background-image: url("../images/sparkle.gif");
  background-size: 20px 20px;
  color: white;
}
.gallery {
  text-align: center;
}
.gallery li {
  max-width: 500px;
  display: inline-block;
  margin: 10px;
  text-align: right;
}
.gallery li img {
  box-shadow: 1px 3px 5px;
  -webkit-box-shadow: 1px 3px 5px;
  -moz-box-shadow: 1px 3px 5px;
}
.gallery li div {
  background-color: #8a8a8a;
  border: 3px solid #eaeaea;
  border-radius: 10px;
  padding: 5px 4px 5px 7px;
  box-shadow: 2px 1px 3px black, inset 3px 3px 3px black;
  -webkit-box-shadow: 2px 1px 3px black, inset 3px 3px 3px black;
  -moz-box-shadow: 2px 1px 3px black, inset 3px 3px 3px black;
  font-size: 1em;
  color: white;
}
.gallery img {
  height: auto;
  width: 100%;
}
.button2 {
  margin: 0 auto;
  margin-bottom: 8px;
  background-color: #eaeaea;
  padding: 5px;
  width: 155px;
  height: 25px;
  border: 4px solid #333;
  border-radius: 30px;
  line-height: 25px;
  text-align: center;
  cursor: pointer;
  -webkit-transition: transform 0.15s ease, box-shadow 0.15s ease;
  -moz-transition: transform 0.15s ease, box-shadow 0.15s ease;
  -o-transition: transform 0.15s ease, box-shadow 0.15s ease;
  -ms-transition: transform 0.15s ease, box-shadow 0.15s ease;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  box-shadow: -1px 1px 0 black, -2px 2px 0 black, -3px 3px 0 black, -4px 4px 0 black, -10px 10px 20px rgba(0, 0, 0, 0.45);
  -webkit-box-shadow: -1px 1px 0 black, -2px 2px 0 black, -3px 3px 0 black, -4px 4px 0 black, -10px 10px 20px rgba(0, 0, 0, 0.45);
  -moz-box-shadow: -1px 1px 0 black, -2px 2px 0 black, -3px 3px 0 black, -4px 4px 0 black, -10px 10px 20px rgba(0, 0, 0, 0.45);
}
.button2 a {
  color: black;
}
.button2:hover {
  box-shadow: -1px 1px 0 black, -2px 2px 0 black, -3px 3px 0 black, -4px 4px 0 black, -7px 7px 17px rgba(0, 0, 0, 0.45);
  -webkit-box-shadow: -1px 1px 0 black, -2px 2px 0 black, -3px 3px 0 black, -4px 4px 0 black, -7px 7px 17px rgba(0, 0, 0, 0.45);
  -moz-box-shadow: -1px 1px 0 black, -2px 2px 0 black, -3px 3px 0 black, -4px 4px 0 black, -7px 7px 17px rgba(0, 0, 0, 0.45);
  transform: translate(-1px, 1px);
}
.button2:hover a {
  color: #ff0040;
}
.button2:active {
  box-shadow: -1px 1px 0 black, -2px 2px 0 black, -3px 3px 0 black, -4px 4px 0 black, -5px 5px 15px rgba(0, 0, 0, 0.45);
  -webkit-box-shadow: -1px 1px 0 black, -2px 2px 0 black, -3px 3px 0 black, -4px 4px 0 black, -5px 5px 15px rgba(0, 0, 0, 0.45);
  -moz-box-shadow: -1px 1px 0 black, -2px 2px 0 black, -3px 3px 0 black, -4px 4px 0 black, -5px 5px 15px rgba(0, 0, 0, 0.45);
  transform: translate(-3px, 3px);
}
.buttonmenu {
  text-align: center;
}
.buttonmenu .button2 {
  display: inline-block;
}
.email {
  max-width: 770px;
  margin: 0 auto;
  margin-top: 30px;
  text-align: center;
  background-color: #8a8a8a;
  border: 3px solid #eaeaea;
  border-radius: 10px;
  padding: 10px 10px 10px 20px;
  box-shadow: 2px 1px 3px black, inset 3px 3px 3px black;
  -webkit-box-shadow: 2px 1px 3px black, inset 3px 3px 3px black;
  -moz-box-shadow: 2px 1px 3px black, inset 3px 3px 3px black;
  color: white;
}
.email a {
  text-decoration: underline;
  color: white;
}
.email a:hover {
  color: #f92222;
}
.email h2 {
  font-size: 2em;
  color: white;
  font-family: typewriter;
  text-shadow: 2px 1px 3px black;
  -webkit-text-shadow: 2px 1px 3px black;
  -moz-text-shadow: 2px 1px 3px black;
  margin-bottom: 10px;
}