style.css

html {
    position: relative;
    min-height: 100%;
}

body {
	background: #00b93e; /*fallback*/
    background-image: url("img/texture.png"), linear-gradient(#004c19, #00b93e, #00b93e, #93DE73);
    background-repeat: repeat, no-repeat;
	font-family: "Source Sans Pro";
	overflow-x: hidden; /**/
	margin: 0px auto 250px auto;
	/*botom margin = footer heigth*/
	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;
	text-shadow: 2px 2px 10px rgba(0,0,0,0.5);
}

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

#horse-img {
	position: absolute;
	z-index: -10;
	width: 500px;
	transform: translateX(770px) translateY(140px);
}

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

p {
	font-size: 1.2em;
}

/* -----
 Footer
-------- */	

.footer {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	height: 170px;
	width: 100%;
    position: absolute;
    bottom: 0;
    left:0;
    overflow: hidden;
}
#footer-copyright {
}

.footer-text {
	margin: 2px;
	font-size: 1em;
}

#imac-logo {
	width: 80px;
	margin: 5px;
}

#imac-2020 {
	font-size: 0.8em;
}


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

.row, .row-fixed{
	/*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;
}

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

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

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

.enter-screen-left {
    animation-name: enterScreenLeft;
    animation-duration: 0.5s;
    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;
}

#rules {
    animation-name: displayRules;
    animation-duration: 0.6s;
    opacity: 1;
}

@keyframes displayRules {
	0% {
		max-height: 1em;
		opacity: 0;
	}
	50% {
		opacity: 0;
	}
	80% {
		max-height: 999px;
	}
	100% {
		opacity: 1;
	}

}

.rule-subtitle, .player-name-result {
	/*player-name-result is used in the results screen*/
	font-style: italic;
	color: white;
	text-shadow: 1px 1px 3px rgba(0,0,0,1);
}

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

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

#deck {
	justify-content: center;
}

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

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

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

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

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

.player-name-result {
	margin-right : 8px;
}

#winner-horse {
	font-size: 1.7em;
	text-align: center;
}


.drink-number {
	color: #B21717;
}

.give-number {
	color: #0e3064;
}

.player-bet-result {
	font-size: 0.8em;
}

#results-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;
	}

}