body
{
  background-color:black;
  color:white;
}

div
{
  display:inline-block;
  border-radius: 25px;
}

img
{
  margin-top:50px;
}

.flip-card 
{
  background-color: transparent;
  width: 200px;
  height: 200px;
  border: 3px solid transparent; 
  perspective: 1000px;
}

.flip-card-inner 
{
  position: relative;
  width: 100%;
  height: 100%;
  line-height: 1px;
  transition: transform 0.2s;
  transform-style: preserve-3d;
}

.flip-card:hover .flip-card-inner 
{
  transform: rotateY(180deg);
}

.flip-card:hover .flip-card-back
{
  overflow:scroll;
  scrollbar-size: 2px;
  overflow-x: hidden; 
}


.flip-card-front, .flip-card-back 
{
  position: absolute;
  width: 100%; 
  height:100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.flip-card-front 
{
  background-color: #F4F6F7;
  color: black;
  text-align:center;
  transform: translate3d(0, 0, 0);
}

.flip-card-back 
{
  text-align:center;
  background-color: gray;
  color: white;
  transform: rotateY(180deg);
  overflow:hidden;
}

.flip-card-back-text {} 

.letters
{
  height:50px;
  width:50px;
  background-color:white;
  text-align:center;
  vertical-align:middle;
  line-height: 50px;
  border-radius: 25px;
}

.letters:hover 
{
  background-color: RoyalBlue;
}

.loading 
{
  font-size:50px;
  position:absolute;
  width:90%;
  overflow-x:hidden;
  text-align:center;
}

::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: #f1f1f1; }
::-webkit-scrollbar-thumb { background: RoyalBlue; }
::-webkit-scrollbar-thumb:hover { background: #555; }