@import url(webfont.css);
@import url(keyframes.css);
@import url(card-styling.css);

*{
	outline:none;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	-webkit-tap-highlight-color: transparent; /* For some Androids */
}

html, body{
	margin:0px;padding:0px;
	width:100%;
	height:100%;
}

body{
	-webkit-transition:0.2s;
	-moz-transition:0.2s;
	-ms-transition:0.2s;
	-o-transition:0.2s;
	transition:0.2s;

	background:hsl(220, 50%, 50%);
	/*background-color:rgb(13,116,61);*/

	text-align:center;
	font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;
	text-align:center;
	cursor:pointer;

	-webkit-perspective:1000px;
	-moz-perspective:1000px;
	-ms-perspective:1000px;
	-o-perspective:1000px;
	perspective:1000px;

	background-image:url('../img/bg.png');
	background-size:200px 200px;
	background-position:center center;

	-webkit-user-select:none;
	-moz-user-select:none;
	-ms-user-select:none;
	-o-user-select:none;
	user-select:none;

	/*-webkit-animation: moveBG 20s linear infinite;
	animation: moveBG 20s linear infinite;*/
}

body.intro #intro{
	opacity:1;
}

body.intro #deck .dummy .card{
	opacity:0;
}

body.intro header{
	opacity:0;
}

/*vertical align hack*/
body:before{
	content:'';
	height:100%;
	display:inline-block;
	vertical-align:middle;
}

body button{
	-webkit-text-stroke: 0px #000;
	background: #FFF;
	border: none;
	color: #000;
	font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-size: 18px;
	padding: 15px;
	border-radius: 3px;
	font-weight: bold;
	cursor:pointer;
	line-height:20px;

	overflow:hidden;
	position:relative;
}

body button emoji{
	font-weight:normal;
}

body button:after{
	-webkit-transition:opacity 0.2s, width 0.2s 0.2s, height 0.2s 0.2s;
	-moz-transition:opacity 0.2s, width 0.2s 0.2s, height 0.2s 0.2s;
	-ms-transition:opacity 0.2s, width 0.2s 0.2s, height 0.2s 0.2s;
	-o-transition:opacity 0.2s, width 0.2s 0.2s, height 0.2s 0.2s;
	transition:opacity 0.2s, width 0.2s 0.2s, height 0.2s 0.2s;

	content:'';
	
	position:absolute;
	top:50%;
	left:50%;

	-webkit-transform:translateX(-50%) translateY(-50%);
	-moz-transform:translateX(-50%) translateY(-50%);
	-ms-transform:translateX(-50%) translateY(-50%);
	-o-transform:translateX(-50%) translateY(-50%);
	transform:translateX(-50%) translateY(-50%);
	
	width:0px;
	height:0px;
	border-radius:50%;

	background:rgba(0,0,0,0.1);

	opacity: 0;
}

body button:active:after{
	-webkit-transition:width 0.2s, height 0.2s, opacity 0s;
	-moz-transition:width 0.2s, height 0.2s, opacity 0s;
	-ms-transition:width 0.2s, height 0.2s, opacity 0s;
	-o-transition:width 0.2s, height 0.2s, opacity 0s;
	transition:width 0.2s, height 0.2s, opacity 0s;

	opacity:1;

	content:'';
	
	width:400px;
	height:400px;

	-webkit-transform:translateX(-50%) translateY(-50%);
	-moz-transform:translateX(-50%) translateY(-50%);
	-ms-transform:translateX(-50%) translateY(-50%);
	-o-transform:translateX(-50%) translateY(-50%);
	transform:translateX(-50%) translateY(-50%);
}

canvas{
	display:none;
	position:fixed;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	background:transparent;
}

#deck{
	-webkit-transition:0.2s;
	-moz-transition:0.2s;
	-ms-transition:0.2s;
	-o-transition:0.2s;
	transition:0.2s;

	position:relative;
	width:220px;
	height:320px;
	display:inline-block;
	vertical-align:middle;
}

.card_wrapper{
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	/*z-index:1;*/
}

.card{
	position:relative;
	float:left;
	width:100%;
	height:100%;
	border-radius:10px;
	box-shadow:0px 3px 10px rgba(0,0,0,0.3);
	font-weight:bold;

	-webkit-transition:1s;
	-moz-transition:1s;
	-ms-transition:1s;
	-o-transition:1s;
	transition:1s;

	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	-mstransform-style: preserve-3d;
	-otransform-style: preserve-3d;
	transform-style: preserve-3d;
}

.card_wrapper.drawn .card{
	-webkit-animation:drawCard 1s 1;
	-moz-animation:drawCard 1s 1;
	-ms-animation:drawCard 1s 1;
	-o-animation:drawCard 1s 1;
	animation:drawCard 1s 1;
	/*-webkit-animation-fill-mode:forwards;*/
	/*animation-fill-mode:forwards;*/
}

.card_wrapper.thrown .card{
	-webkit-animation:throwCard 0.2s 1;
	-moz-animation:throwCard 0.2s 1;
	-ms-animation:throwCard 0.2s 1;
	-o-animation:throwCard 0.2s 1;
	animation:throwCard 0.2s 1;

	-webkit-animation-fill-mode:forwards;
	-moz-animation-fill-mode:forwards;
	-ms-animation-fill-mode:forwards;
	-o-animation-fill-mode:forwards;
	animation-fill-mode:forwards;
}

.card_wrapper.dummy{
	/*z-index:0;*/
}

.card_wrapper.dummy .card{
	-webkit-transform:rotateY(180deg) translateZ(200px);
	-moz-transform:rotateY(180deg) translateZ(200px);
	-ms-transform:rotateY(180deg) translateZ(200px);
	-o-transform:rotateY(180deg) translateZ(200px);
	transform:rotateY(180deg) translateZ(200px);
}

.card .front{
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	border-radius:10px;
	z-index:2;

	background:#F5F5F5;

	-webkit-backface-visibility:hidden;
	-moz-backface-visibility:hidden;
	-ms-backface-visibility:hidden;
	-o-backface-visibility:hidden;
	backface-visibility:hidden;

	-webkit-transform:rotateY(0deg);
	-moz-transform:rotateY(0deg);
	-ms-transform:rotateY(0deg);
	-o-transform:rotateY(0deg);
	transform:rotateY(0deg);
}

.card .front .animation{
	position:absolute;
	top:50%;
	left:50%;
	width:160px;
	height:160px;

	margin-top:-80px;
	margin-left:-80px;

	border-radius:50%;

	background-position:center center;
	background-repeat:no-repeat;
	background-size:auto 100%;
}

.card .back{
	content:'';
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	border-radius:10px;
	z-index:1;

	background:#F5F5F5;

	background-image:url(../img/card_freeman.svg);
	background-position:center center;
	background-repeat:no-repeat;
	background-size:100% auto;

	-webkit-backface-visibility:hidden;
	-moz-backface-visibility:hidden;
	-ms-backface-visibility:hidden;
	-o-backface-visibility:hidden;
	backface-visibility:hidden;

	-webkit-transform:rotateY(180deg);
	-moz-transform:rotateY(180deg);
	-ms-transform:rotateY(180deg);
	-o-transform:rotateY(180deg);
	transform:rotateY(180deg);

}

.card .writing{
	position:absolute;
	top:15px;left:15px;
	text-align:left;
	font-size:16px;
	text-transform:uppercase;

	line-height:32px;
}
.card .writing.flipped{
	top:auto;left:auto;
	bottom:15px;right:15px;

	-webkit-transform:rotate(180deg);
	-moz-transform:rotate(180deg);
	-ms-transform:rotate(180deg);
	-o-transform:rotate(180deg);
	transform:rotate(180deg);
}

.card .writing .number{
	font-size:32px;
	float:left;
	margin-right:10px;
}

.card .writing:after{
	position:absolute;
	top:32px;left:0px;
	font-size:32px;
}

#message{
	position:fixed;
	top:0px;
	left:0px;
	width:100%;
	height:100%;

	font-style:italic;

	text-shadow:0px 0px 40px #000;

	-webkit-transform:translateZ(150px);
	-moz-transform:translateZ(150px);
	-ms-transform:translateZ(150px);
	-o-transform:translateZ(150px);
	transform:translateZ(150px);

	-webkit-animation: messageFlyin 1.5s linear 1;
	-moz-animation: messageFlyin 1.5s linear 1;
	-ms-animation: messageFlyin 1.5s linear 1;
	-o-animation: messageFlyin 1.5s linear 1;
	animation: messageFlyin 1.5s linear 1;

	-webkit-animation-fill-mode:forwards;
	-moz-animation-fill-mode:forwards;
	-ms-animation-fill-mode:forwards;
	-o-animation-fill-mode:forwards;
	animation-fill-mode:forwards;

	display:none;
}

#message.no_animation{
	-webkit-animation: none;
	-moz-animation: none;
	-ms-animation: none;
	-o-animation: none;
	animation: none;

	display:block;
}

#message .wrapper{
	height:100%;

	-webkit-animation: shakeText 0.05s linear alternate infinite;
	-moz-animation: shakeText 0.05s linear alternate infinite;
	-ms-animation: shakeText 0.05s linear alternate infinite;
	-o-animation: shakeText 0.05s linear alternate infinite;
	animation: shakeText 0.05s linear alternate infinite;
}

#message .wrapper:before{
	content:'';
	height:100%;
	display:inline-block;
	vertical-align:middle;
}

#message .wrapper div{
	display:inline-block;
	vertical-align:middle;
	font-weight:bold;
	font-size:44px;
	line-height:60px;
	color:#FFF;
	-webkit-text-stroke:2px #000;
	width:260px;
}

#message .wrapper div button{
	margin-top: 30px;
}

#message .wrapper:after{
	content:'';
	height:100%;
	display:inline-block;
	vertical-align:middle;
}

#intro{
	position:fixed;
	top:0px;
	left: 50%;
	margin-left: -140px;
	width: 280px;
	height:100%;

	text-align:left;

	color:#FFF;
}

#intro.thrown{
	-webkit-animation:throwCard 0.2s 1;
	-moz-animation:throwCard 0.2s 1;
	-ms-animation:throwCard 0.2s 1;
	-o-animation:throwCard 0.2s 1;
	animation:throwCard 0.2s 1;

	-webkit-animation-fill-mode:forwards;
	-moz-animation-fill-mode:forwards;
	-ms-animation-fill-mode:forwards;
	-o-animation-fill-mode:forwards;
	animation-fill-mode:forwards;
}

#intro:before{
	content:'';
	height:100%;
	display:inline-block;
	vertical-align:middle;
}

#intro div{
	display:inline-block;
	vertical-align:middle;
	width:270px;
}

#intro div h1{
	font-size:32px;
	margin:0px;
}

#intro div p{
	font-size:18px;
	line-height:26px;
	width:280px;
	margin:0px;
	margin-top:20px;
}

#intro div p button span{
	font-size:12px;
	text-transform:uppercase;
	display:inline-block;
	height:100%;
	color:#888;
	vertical-align: middle;
	/*margin-left:10px;*/
	padding-left:15px;
}

header{
	-webkit-transition:0.2s;
	-moz-transition:0.2s;
	-ms-transition:0.2s;
	-o-transition:0.2s;
	transition:0.2s;

	position:fixed;
	top:10px;
	left:0px;
	width:100%;
	height:60px;

	color:#FFF;
	font-weight:bold;
	font-size:18px;
	line-height:60px;
}

footer{
	position:fixed;
	bottom:0px;
	left:0px;
	width:100%;
	height:60px;

	color:#FFF;
	font-weight:bold;
	font-size:18px;
	line-height:60px;
}

footer a{
	color:#FFF;
}