style.css

body {
	background: #009933;
	font-family: "Source Sans Pro";
	overflow-x: hidden;
	margin-left: auto;
	margin-right: auto;
	max-width: 768px;
}

#wrapper {
	min-height: 400px;
	margin:50px 20px 20px 50px;
	margin-left: 20px;
	margin-right: 20px;
	margin-bottom: 50px;
	display: flex;
	flex-direction: column;
}

#site-title {
	text-align: center;
	font-size: 3em;
	font-style: italic;
	color: white;
	margin: 0;
}

#site-description {
	text-align: center;
	font-family: inherit;
}

#horse-img {
	position: absolute;
	width: 40em;
	left: 60em;
	top: 7em;
	z-index: -1;
}

/* ------------
 common layout
--------------- */

.row {
	display: flex;
	flex-direction: row;
}

.row-fixed {
	/*will not turn into a column in mobile*/
	display: flex;
	flex-direction: row;
}

.column {
	display: flex;
	flex-direction: column;
}

.ver-margin {
	margin: 0.5em 0 0.5em 0;
}

.hor-margin {
	margin: 0 2% 0 2%;
}

.separator-wide {
	width: 100%;
	margin: 1em auto 1em auto;
	border-bottom: 3px solid rgba(0,0,0,0.5);
}

.hidden {
	display: none;
}


/* -------------
 common buttons
---------------- */
#button-top {
	margin-left: 30em;
	margin-right: 0;
}

.interactive-inner {
	/*background-color: #FFFF99;*/
	height: 1.8em;
	border-width: 1.2px;
	border-radius: 5px;
	border-color:  rgba(0,0,0,0.5);
	padding: 0px 6px 0px 6px;
	background-color: #007326;
	box-shadow: inset 0px 0px 10px rgba(0,0,0,0.5);
	font-family: "Source sans pro", monospace;
	color: #FFFF99;
}

.interactive-inner:hover {
	background-color: #00802a;
	box-shadow: inset 0px 0px 10px rgba(0,50,0,1);
}

.interactive-outer {
	height: 1.8em;
	border-width: 1.2px;
	border-radius: 8px;
	padding: 0px 12px 0px 12px;
	background-color: white;
	box-shadow: 1px 1px 8px rgba(0,0,0,0.8);
	font-family: "Source sans pro", monospace;
	font-size: 1.2em;
}

.interactive-outer:hover {
	box-shadow: 1.5px 2px 12px rgba(0,0,0,1);
	background-color: #ddddbb;

}
.interactive-outer:active {
	box-shadow: inset 0px 0px 5px rgba(0,50,0,1);
	background-color: #ddddbb;
}

.exit-screen-left {
    animation-name: exitScreenLeft;
    animation-duration: 0.5s;
    opacity: 0;
}

@keyframes exitScreenLeft {
	0% {
		transform: scale(1);
		opacity: 1;
	}
	100% { 
		transform: scale(0.9) translateX(-500px);
		opacity: 0;
	}
}

.enter-screen-right {
    animation-name: enterScreenRight;
    animation-duration: 0.5s;
    opacity: 1;
}

@keyframes enterScreenRight {
	0% {
		transform: scale(0.9) translateX(500px);
		opacity: 0;	
	}
	
	100% { 
		transform: scale(1);
		opacity: 1;
	}
}


/* ---------
 Menu stuff
------------ */

.field-title {
	margin-bottom : 0.5em;
	margin-top : 0;
}

#player-number-holder {
	justify-content: flex-start;	
}

.row-player-number {
	width:70%;
}

#player-number {
	width: 3em;
}

.player-row	 {
	justify-content: space-between;
    animation-name: dropLine;
    animation-duration: 0.7s;
}

@keyframes dropLine {
	0% { 
		transform: scale(1.1) translateY(30px) rotateX(-90deg) skewX(-30deg);
		opacity: 0;
	}
	100% {
		transform: scale(1);
		opacity: 1;
	}
}

.pick-line {
	animation-name: pickLine;
    animation-duration: 0.7s;	
    opacity: 0;
}

@keyframes pickLine {
	0% {
		transform: scale(1);
		opacity: 1;
	}
	100% { 
		transform: scale(1.1) translateY(30px) rotateX(70deg) skewX(20deg);
		opacity: 0;
	}
}


.col-player-id {
	width: 16%;
	justify-content: flex-end;
	padding-bottom: 0.3em;
	font-size: 1.2em;
	font-family: "Source sans pro" monospace;
}

.player-id {
	margin: 0;
	text-align: right;
}

.col-player-name {
	width: 46%;
}
.col-player-horse {
	width: 11%;
}
.col-player-bet {
	width: 11%;
}

#menu-buttons {
	justify-content: center;
}


/* ---------
 Game stuff
------------ */

#deck {
	justify-content: center;
}

.deck-card-holder {
	width: 20%;
}

.deck-card {
	transform-origin: 0% 0%;
	transform: rotate(90deg) translateY(-100%);
}

.bottom-card {
	position: absolute;
	z-index: -1;
}

.top-card {
	position: absolute;
	z-index: 1;
}

.drop-deck-card {
    animation-name: dropDeckCard;
    animation-duration: 0.4s;
}

@keyframes dropDeckCard {
	0% { 
		transform: scale(1.2) 
				   rotate(90deg) 
				   translateY(-70%) 
				   translateX(30px)
				   rotateY(-90deg)
				   skewY(15deg);
		opacity: 0;
	}

	70% {
		opacity: 1;
	}

	100% {	
		transform: rotate(90deg) translateY(-100%);
		opacity: 1;
	}
}

.pick-deck-card {
    animation-name: pickDeckCard;
    animation-duration: 0.4s;
}

@keyframes pickDeckCard {
	0% { 		
		transform: rotate(90deg) translateY(-100%);
		opacity: 1;
	}

	30% {
		opacity: 1;
	}

	100% {	
	transform: scale(1.3) 
				   rotate(90deg) 
				   translateY(-100%) 
				   translateX(30px)
				   rotateY(90deg)
				   skewY(-11deg);
		opacity: 0;
	}
}

#track-side {
	justify-content: center;
}

.card-holder {
	width: 14.29%;
}

.card {
	transform-origin: 0% 0%;
	transform: rotate(90deg) translateY(-100%);
}

.drop-track-card {
    animation-name: dropTrackCard;
    animation-duration: 0.4s;
}

@keyframes dropTrackCard {
	0% { 
		transform: scale(1.2) 
				   rotate(90deg) 
				   translateY(-100%) 
				   translateX(30px)
				   rotateY(-90deg)
				   skewY(5deg);
		opacity: 0;
	}

	70% {
		opacity: 1;
	}

	100% {	
		transform: rotate(90deg) translateY(-100%);
		opacity: 1;
	}
}

.pick-track-card {
    animation-name: pickTrackCard;
    animation-duration: 0.4s;
    opacity: 0;
}

@keyframes pickTrackCard {
	0% { 		
		transform: rotate(90deg) translateY(-100%);
		opacity: 1;
	}

	30% {
		opacity: 1;
	}

	100% {	
	transform: scale(1.3) 
				   rotate(90deg) 
				   translateY(-100%) 
				   translateX(30px)
				   rotateY(90deg)
				   skewY(-4deg);
		opacity: 0;
	}
}

.track {
	justify-content: flex-start;
}

/*
.card {
	transform-origin: 0% 0%;
	transform: rotate(90deg) translateY(-100%);
}
*/

.move-card-right {
    animation-name: moveCardRight;
    animation-duration: 0.4s;
}

@keyframes moveCardRight {
	0% { 		
		transform: translateX(-100%);
	}
	100% {	
		transform: translateX(0%);
	}
}

.move-card-left {
    animation-name: moveCardLeft;
    animation-duration: 0.4s;
}

@keyframes moveCardLeft {
	0% { 		
		transform: translateX(100%);
	}
	100% {	
		transform: translateX(0%);
	}
}


#game-commentary {
	justify-content: center;
}

#game-commentary h3 {
	margin: 0;	
}

#game-buttons {
	justify-content: center;
}


/* ----------------------
 Desktop only properties
------------------------- */

@media screen and (min-width: 768px) {
	.desktop-hidden {
		display: none;
	}
}

/* -----------------
 RESPONSIVE ASPECTS
-------------------- */

@media screen and (max-width: 768px) {
	/* ------------
 	 common layout
	--------------- */
	.row {
		flex-direction: column;
		align-items: center;
	}
	
	.hor-margin {
		margin-top: 0.3em;
		margin-bottom:0.3em;
	}

	.mobile-hidden {
		display: none;
	}

	/* ---------
 	 Menu stuff
	------------ */

	.col-player-id {
		width: 100%;
		justify-content: center;
		margin-top: 1em;
	}

	.player-id {
		text-align: center;
	}
	
	.col-player-name {
		width: 100%;
	}
	.col-player-horse {
		width: 100%;
	}
	.col-player-bet {
		width: 100%;
	}

	#menu-buttons {
		flex-direction: row;
		flex-wrap: wrap;
	}
}