@font-face {
font-family: bariol;
src: url('../font/bariol_regular-webfont.ttf') format('truetype');
}
		html, body{
			background-color:#447d7d;
			min-width:600px;
			font-family:bariol;
			text-align:center;
			overflow-x:hidden;
			-webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none;   /* Chrome/Safari/Opera */
  -khtml-user-select: none;    /* Konqueror */
  -moz-user-select: none;      /* Firefox */
  -ms-user-select: none;       /* Internet Explorer/Edge */
  user-select: none;           /* Non-prefixed version, currently
                                  not supported by any browser */
		}
		h1.yo{
			font-family:bariol;
			color:#f97c00;
			font-style: italic;
			max-height: 100px;
			overflow: hidden;
			text-shadow: 1px 1px 0px #000, 2px 2px 3px #787878;

			/* Set our transitions up. */
			-webkit-transition: max-height 0.8s;
			-moz-transition: max-height 0.8s;
			transition: max-height 0.8s;
		}
		h1.yo img{
			font-family:bariol;
			height:50px;
			margin-bottom:-10px;
		}
		.bottom{
			position: fixed;
		}
		#credit{
			
			bottom:5px;
			color:white;
			font-family:bariol;
			left:5px;
		}
		#credit a:visited { 
    		color: white;
		}
		#credit a:hover { 
    		color: orange;
		}
		#credit a { 
    		color: white;
    		text-decoration: none;
		}
		#alsoLike{
			
			bottom:5px;
			right:5px;
			color:white;
			font-family:bariol;
		}
			#alsoLike a:visited { 
    		color: white;
		}
		#alsoLike a:hover { 
    		color: orange;
		}
		#alsoLike a { 
    		color: white;
    		text-decoration: none;
		}
		
		#winlossratio{
				
			bottom:5px;
			
			color:orange;
			font-family:bariol;
			
			width: 300px;
			height: 30px;
			
			left: 50%;
			margin-left: -150px; /* Negative half of width. */
		}
		
		.winner{
			font-family:bariol;
			font-size: 5em;
			color: #189a1c;
			text-shadow: 1px 1px 0px #000, 2px 2px 3px #444444;
		}
		.loser{
			font-family:bariol;
			font-size: 4.7em;
			color: #961818;
			text-shadow: 1px 1px 0px #000, 2px 2px 3px #4b4b4b;
		}
		#wonTimes{
			font-size: 2em;
			color: #189a1c;
			text-shadow: 1px 1px 0px #000, 2px 2px 3px #444444;
			text-align: left;
			width:40%;
			display: inline-block;
		}
		#lostTimes{
			font-size: 2em;
			color: #961818;
			text-shadow: 1px 1px 0px #000, 2px 2px 3px #4b4b4b;
			text-align: right;
			width:40%;
			display: inline-block;
		}
		#streak{
			
			color: #1e6add;
		
			font-size: 2em;
		
			text-shadow: 1px 1px 0px #000, 2px 2px 3px #444444;
			
			width:100%;
			display: block;
		}
		#instructions{
			font-family:bariol;
			color: #cdcdcd;
			text-shadow: 1px 1px 0px #000, 2px 2px 3px #4b4b4b,1px 1px 5px #fcfcfc,1px 1px 5px #fcfcfc,1px 1px 5px #fcfcfc;
			background-color: rgba(196,60,63,.5);
			right:10%;
			position: absolute;
			top:30px;
			z-index:4;
			border-radius: 25px;
			padding:10px;
		}
		#mulliganbutton {
			z-index: 3;
    background-color: #1e6add; /* Green */
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: block;
    margin: 20px auto 0 auto;
    font-size: 16px;
}
		#gobutton {
			z-index: 3;
			position: relative;
    background-color: #1e6add; /* Green */
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
}
		.wrapper{
			width:90%;
			min-height:500px;
			margin:0px auto 0 auto;
			background-color:#c43c3f;
			
			box-shadow: 0 0 10px #000;
   			border:1px solid #000;
   			border-radius: 25px;
   			padding:25px;
   			text-align:center;
   			transition-duration: 2000ms;
   			background-repeat: no-repeat;
    		background-size: cover;
		}
    
		.wrapper span{
			position: relative;
			margin-left:5px;
			transition-duration: 2000ms;
			display: inline-block;
		}
		
		.translateRight {
			display: inline-block;
			-webkit-transition-duration: 2000ms;
    		transition-duration: 2000ms;
  			transform: translate(450%);
  		}
  		.translateLeft{
  			display: inline-block;
			-webkit-transition-duration: 2000ms;
    		transition-duration: 2000ms;
  			transform: translate(-450%);
  		}
		.wrapper img{
			width:200px;
			border-radius:10px;
			-webkit-transition: opacity 3s ease-in-out;
    		-moz-transition: opacity 3s ease-in-out;
    		-ms-transition: opacity 3s ease-in-out;
    		-o-transition: opacity 3s ease-in-out;
     		opacity: 1;
     		transition-duration: 2000ms;
     		box-shadow: 0 10px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19) !important;
		}
		.wrapper span img{
			animation: wiggle;
			animation-duration: .35s;
		}
		.wrapper p{
			position: relative;
			display: inline;
			font-family: bariol;
			font-size: 2em;
			background-color:#ffdcb9;
			font-weight: bold;
			margin-left:-100px;
			text-shadow: 1px 1px 0px #000, 2px 2px 3px #787878;
			white-space: nowrap;
			transition-duration: 2000ms;
			border-radius: 15px;
    		padding-left: 4px;
    		padding-right: 6px;
    		padding-bottom:2px;
    		box-shadow: 0 10px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19) !important;
    		z-index:1;
		}
		.wrapper p:after {
  			content: ' ';
  			position: absolute;
  			width: 0;
  			height: 0;
  			left: 13px;
  			top: 36px;
  			border: 15px solid;
  			border-color: #ffdcb9 transparent transparent #ffdcb9;
}
		.hiddenCard{
			opacity: 0;
			-webkit-transition: opacity 3s ease-in-out;
    		-moz-transition: opacity 3s ease-in-out;
    		-ms-transition: opacity 3s ease-in-out;
    		-o-transition: opacity 3s ease-in-out;
		}
		#MarvelCard{
			-webkit-transition: opacity 2.5s ease-in-out;
    		-moz-transition: opacity 2.5s ease-in-out;
    		-ms-transition: opacity 2.5s ease-in-out;
    		-o-transition: opacity 2.5s ease-in-out;
    		
			height: 500px;
			position:absolute;
			top:50px;
			left:25%;
			z-index: 3;
		}
		#MarvelCard img{
			margin:0;
			height:100%;
			animation: example;
			animation-duration: 5s;
		}
		#score{
			display: none;
		}
		#score.yip{
			display:block;
			position:fixed;
			bottom: 10px;
			left: 10px;
			font-size: 2.1em;
			color:#ff8000;
			text-shadow: 1px 1px 0px #000, 2px 2px 3px #787878;
			font-style: italic;
			-webkit-transition: opacity .5s ease-in-out;
   			-moz-transition: opacity .5s ease-in-out;
   			-ms-transition: opacity .5s ease-in-out;
   			-o-transition: opacity .5s ease-in-out;	
   			transition: opacity .5s ease-in-out;
		}
		#score.yip:before{
			content:'score:';
		}
		@keyframes example {
    		0%   {opacity:0}
    		100% {opacity:1}
		}
		@keyframes wiggle {
    		0%   {transform: rotate(0deg);}
    		25% {transform: rotate(-3deg);}
    		75% {transform: rotate(3deg);}
    		100% {transform: rotate(0deg);}
		}
		@media screen and (max-height: 800px) {
	.bottom{
		position: static;
	}
	#winlossratio{
		margin:auto;
	}
}