body {
  margin-top: 25px;
  color: #ddd;
  background-color: #333;
}

.logo {
  float: right;
  border-radius: 62px;
  width: 125px;
}

.ltrs {
  position: relative;
  width: 300px;
  height: 250px;
  margin-left: 20%;
}

.ltr {
  transition: all 0.1s ease;
  position: absolute;
  left: 75px;
  top: 75px;
  margin-left: -5px;
  margin-top: -5px;
  font-size: 68px;
  text-align: center;
  min-width: 75px;
  max-height: 90px;
  border: 3px dashed #999;
  border-radius: 45px;
  line-height: 1.0;
  text-transform: uppercase;
  text-decoration: none !important;
  color: white !important;
}

.ltr.pressed {
  background-color: black; /* #666666; */
  color: #ccc !important;
}

.ltr:hover {
  border-color: white;
}

.ltr:nth-child(1) { transform: rotate(  0deg) translate(0)    rotate(   0deg); background-color: darkgreen }
.ltr:nth-child(2) { transform: rotate( 60deg) translate(90px) rotate( -60deg) }
.ltr:nth-child(3) { transform: rotate(120deg) translate(90px) rotate(-120deg) }
.ltr:nth-child(4) { transform: rotate(180deg) translate(90px) rotate(-180deg) }
.ltr:nth-child(5) { transform: rotate(240deg) translate(90px) rotate(-240deg) }
.ltr:nth-child(6) { transform: rotate(300deg) translate(90px) rotate(-300deg) }
.ltr:nth-child(7) { transform: rotate(  0deg) translate(90px) rotate(   0deg) }

#score, #nfound {
  display: inline-block;
  font-weight: bold;
  color: red;
  background-color: wheat;
  border-radius: 15px;
  text-align: center;
  padding: 0 9px;
}
#score {
  font-size: 150%;
}
#nfound {
  font-size: 125%;
  margin-left: 15px;
}

#found {
  column-width: 150px;
}

#found i {
  font-style: normal;
  color: red;
}

#msg {
  display: inline-block;
}
#msg .alert {
  transition: opacity 4s ease;
  opacity: 1.0;
  padding-top: 4px;
  padding-bottom: 4px;
}

.must {
  display: inline-block;
  line-height: 1.0;
  text-align: center;
  text-transform: uppercase;
  border: 2px dashed #999;
  padding-top: 2px;
  margin-top: -3px;
  width: 24px;
  height: 24px;
  border-radius: 12px;
  font-weight: bold;
}

/* bootstrap overrides */
#cite.card { display: block }
#misc.card { display: block }
a { color: cyan }


/* fun animations */
body {
  transition: transform 1s ease;
}
.flip {
  transform: rotateY(90deg)
}