body{
  font-size: 10px;
height: 100%;
  padding-left: 50px;
}

.drag {
float: left;
    position: relative;
    width: 150px;
    height: 150px;

    margin: 5px;
  margin-top: 50px;
}




.flip-container {
    margin: 0px;
    perspective: 1000px;
    display: inline-block;
}
.flip-container:hover .card {
    transform: rotateY(180deg);
}
.card, .front, .back {
    width: 150px;
    height: 150px;
}
.card {
    position: relative;
    transition: 0.5s all;
    transform-style: preserve-3d;
}
.front, .back {
    position: absolute;
    backface-visibility: hidden;
}
.front {
    z-index: 1;
    transform: rotateY(180deg);
}
.back {
    z-index: 2;
    transform: rotateY(0deg);
}
figcaption{text-align: center;
text-transform: uppercase;
  font-size: 10px;
}

footer{ 
  font-family: arial;

padding: 10px;

   position: fixed;
 right: 0;
 height: 100%;
word-spacing: 2px;
  color: black;
  text-align: center;
  writing-mode: vertical-rl;
}
.two{width: 255px;
height: 265px;}