body{
    margin:0;
    padding:0;
    //background:rgba(0,0,0,0.9);
    //color:whitesmoke;
    background:rgba(255, 246, 247, 0.2);
}

#container{
    position:relative;
    top:10px;
    left:10px;
    width:calc(100% - 10px);
}

.card-container{
    font-size:0;
    display:inline-block;
    position:absolute;
    overflow:hidden;
    margin:10px;
    cursor:pointer;
}

.expression-container{
    width:100%;
    height:100%;
    transition: 0.6s;
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	transform-style: preserve-3d;
	position: relative;
}

.card-container:hover .expression-container{
    -webkit-transform:rotateY(180deg);
    -moz-transform:rotateY(180deg);
    transform:rotateY(180deg);
}

.expression:before,explanation:before{
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

.expression-vertical {
  display: inline-block;
  vertical-align: middle;
}

.expression, .explanation {
	-webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
    width:100%;
    height:100%;
	position: absolute;
	top: 0;
	left: 0;
}

.expression{
    background:#DDF6FD;
	z-index:2;
    -webkit-transform:rotateY(0deg);
    -moz-transform:rotateY(0deg);
	transform:rotateY(0deg);
    text-align:center;
}

.explanation{
    background:#ccf6e8;
    -webkit-transform:rotateY(180deg);
    -moz-transform:rotateY(180deg);
    transform:rotateY(180deg);
}

.expression-padding{
    margin-top:10px;
    margin-left:10px;
    width:calc(100% - 20px);
}

.MJXc-display,.MathJax_Display,.MathJax_MathML,.MathJax_PlainSource_Display,.MJXp-display,.MathJax_SVG_Display{margin-top:20px !important}

#container a{
    text-decoration:none;
    color:whitesmoke;
    background:#16c828;
    padding: 0 5px;
}

#container a:hover{
    text-decoration:underline;
}