body {
  font-family: 'Open Sans', sans-serif;
  text-align: center;
}

body input {
  height: 20px;
}

body button {
  height: 28px;
}

body span.letter {
  font-family: 'Ubuntu', sans-serif;
  height: 30px;
  width: 30px;
  display: inline-block;
  text-align: center;
  font-size: 25px;
  color: white;
}

body span.letter.red {
  background: #ed3746;
  background: -webkit-gradient(linear, left top, left bottom, from(#ed3746), to(#ed1a2d));
  background: linear-gradient(to bottom, #ed3746 0%, #ed1a2d 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ed3746', endColorstr='#ed1a2d',GradientType=0 );
}

body span.letter.orange {
  background: #d6b855;
  background: -webkit-gradient(linear, left top, left bottom, from(#d6b855), to(#d6a400));
  background: linear-gradient(to bottom, #d6b855 0%, #d6a400 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d6b855', endColorstr='#d6a400',GradientType=0 );
}

body span.letter.blue {
  background: #4094dc;
  background: -webkit-gradient(linear, left top, left bottom, from(#4094dc), to(#0466c7));
  background: linear-gradient(to bottom, #4094dc 0%, #0466c7 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4094dc', endColorstr='#0466c7',GradientType=0 );
}

body span.letter.grey {
  background: #838383;
  background: -webkit-gradient(linear, left top, left bottom, from(#838383), to(#545454));
  background: linear-gradient(to bottom, #838383 0%, #545454 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#838383', endColorstr='#545454',GradientType=0 );
}
/*# sourceMappingURL=index.css.map */