style.css

body {
	background: #009933; /*fallback*/
    background-image: url("img/texture.png"); /*fallback*/
    background-image: url("img/texture.png"), linear-gradient(#004c19, #009933, #009933, #009933);
    background-repeat: repeat, no-repeat;
	font-family: "Source Sans Pro";
	overflow-x: hidden; /**/
	margin-left: auto;
	margin-right: auto;
	max-width: 768px;
}

#wrapper {
	min-height: 400px;
	margin:30px 20px 60px 20px;
	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;
	z-index: -10;
	width: 500px;
	transform: translateX(750px) translateY(140px);
}

#cards-img {
	position: absolute;
	z-index: -10;
	width: 300px;
	transform: translateX(-330px) translateY(120px);
}

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

.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 !important;
}

/* -------------
 common buttons
---------------- */

.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: #105627;
	box-shadow: inset 0px 0px 10px rgba(0,20,0,1);
	transition: background-color 0.1s, box-shadow 0.1s;
}

.rule-title, .rule-subtitle{
	color : #FFFFFF;
}

.interactive-outer {
	height: 1.8em;
	border-width: 1.2px;
	border-radius: 8px;
	border-color: #aaaaaa;
	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);
	border-color: #717163;
	background-color: #dddddd;
	font-weight: bold;
	color: #1b3864;
	transition: background-color 0.2s, box-shadow 0.2s, font-weight 0.1s;

}

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

.exit-screen-right {
    animation-name: exitScreenRight;
    animation-duration: 0.5s;
    opacity: 0;
}

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


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

@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;
}

.enter-screen-left {
    animation-name: enterScreenLeft;
    animation-duration: 0.5s;
    opacity: 1;
}

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

@keyframes enterScreenLeft {
	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, .col-player-bet {
	width: 11%;
}

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

#goToTopHolder {
	justify-content: flex-end;
}

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

#deck {
	justify-content: center;
}

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

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

.bottom-card, .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;
	}
}

#game-board {
	position: absolute;
	z-index: -2;
	width:100%;
  	margin: 0;
}

.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, #game-buttons, #track-side {
	justify-content: center;
}

#game-commentary h3 {
	margin: 0;	
}


/* ----------------------
 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;
	}

}

/* -----------
 Results screen
-------------- */	

.results-hidden {
	display: block;
	text-align: center;
	color: #FFFFFF;
}

.winner, .other-players {
	font-size: 1.5em;
}

.horseWinner, .player-number {
	color: #FFFF99;
}

.bet-number {
	color: #b30000;
}

.give-number {
	color: #0000b3;
}

.footer {
	text-align: center;
	height: 150px;
}

#imac-img {
	height: 20%;
	left: 20em;
}

#footer-link-to-API, #IMAC2020{
	margin-top: 1px;
	margin-bottom: 0px;
}

#footer-copyright, #footer-link-to-API{
	margin-bottom: 5px;
}

#footer-copyright {
	margin-top: 80px;
}

#IMAC2020 {
	font-size: 0.8em;
}