@font-face {
	font-family: 'lily-script-one';
	src: url("../fonts/LilyScriptOne-Regular.ttf");
	font-weight: normal;
	font-style: normal;
}

card{
	--font-size-fc:0.8em;
	--font-size-h1-fc:1em;
	--height-fc:150px;
	--width-fc:300px;
	
}

card[height]{
	--height-fc:calc(0px + attr(height));
}

body {
  background: #eee;
}

card {
  position: relative;
  display:inline-block;
  /* overflow:hidden; */
  width: var(--width-fc);
  height: calc(var(--height-fc)*2);
  /* top: 50%; */
  /* left: 50%; */
  
  margin: 5px;
  /* float: left; */
  perspective: 500px;
  border-radius: 5px;
  background-color:#fff;
  box-sizing:border-box;

}

card.flip{
  height: var(--height-fc);
  background-color:grey;
}

card[data-width]{
	content:"width : " attr(data-width);
	width:attr(data-width);
	background-color:attr(data-width);
}

card>input[type="checkbox"]{
	display:none;
}

card>label {
  display:inline-block;
  position: absolute;
  left:0;
  width: 100%;
  height: 100%;
  /* width: 300px; */
  /* height: 300px; */
  transition: transform 1s;
  transform-style: preserve-3d;
  overflow:visible;
}

card.flip:hover{
	transform: scale(1.05);	
	-webkit-transform: scale(1.05);	
	transition: transform .2s ease-in-out;
}

card>input:checked+label {
  transform: rotateY( 180deg ) ;
  -webkit-transform: rotateY( 180deg ) ;
  transition: transform 0.5s;
}

front{
  display:flex;
  align-items: center;
  justify-content: center;
  flex-direction:row;
  font-family: 'lily-script-one';
}

front,
back {
  box-sizing:border-box;
  display:inline;
  /* display:flex; */
  /* align-items: center; */
  /* justify-content: center; */
  /* flex-direction:row; */
  
  position: absolute;
  width: var(--width-fc);
  height: var(--height-fc);
  background: white;
  vertical-align:middle;
  color: #03446A;
  text-align: center;
  font-size: var(--font-size-fc);
  border-radius: 5px;
  backface-visibility: hidden;
  box-shadow: 0 0 15px rgba(0,0,0,0.1);
  padding:10px;
}



back {
  background: #03446A;
  color: white;
}
card>back{
	top:var(--height-fc);
}
card>label>back{
  transform: rotateY( 180deg );
  -webkit-transform: rotateY( 180deg );
}

/* problème avec mathjax (quelle utilité ?) :  */
/*front *, back *{
	/* display:block; */
	/* min-width:100%;	 */
/* } */

/* card .MathJax{ */
	/* min-height:auto!important; */
	/* min-width:auto!important; */
	
/* } */


card img{
	object-fit: contain;
	max-width:100%;
	max-height:100%;
	margin:auto;
	align-items: center;
	
}