/*

Name: AndyPlay CSS
Author:  Andy
Version: 1.0

© AndyPlay 2021

*/


#mainContainer {
	width: 100%;
	height: 100vh;
	background-color: grey;
	background-image: url("../content/78072.jpg");
	/*animation: backgroundMove 10s linear infinite; */
}

@media (min-width: 1000px) {
	
	#footerDiv {
		width: 100%;
		background-color: white;
		height: 40px;
		position: absolute;
		bottom: 0;
	}
	
	#loaddiv{
		width: 800px;
		height: 300px;
		background-color: white;
		position: absolute;
		top: 50%;
		left: 50%;
		margin-left: -400px;
		margin-top: -200px;
		display: flex;
		flex-wrap: nowrap;
	}
	
	#gameDiv {
		background-color: white;
		position: absolute;
		top: 5vh;
		left: 5vh;
		right: 5vh;
		height: 80vh;
		padding: 5vh;
		text-align: center;
	}
	
	#handcardsDiv {
		width: -moz-fit-content;
		left: 50%;
		border: 1px solid;
		position: absolute;
		top: calc(80vh - 75px);
		min-width: 200px;
		min-height: 150px;
	}
	
	#pot1Div {
		position: absolute;
		border: 1px solid;
		height: 250px;
		width: 300px;
		top: calc(40vh - 125px);
		left: calc(50% - 150px);
	}
	
	#mateDiv {
		border: 1px solid;
		width: 500px;
		height: 80vh;
		float: left;
	}
	
	.loaddivcolums {
		flex-grow: 1;
		text-align: center;
		top: 30%;
		padding-top: 130px;
	}
	
	/*Verhältnis 2/3 */
	.cardDiv {
		height: 150px;
		width: 100px;
		background-color: black;
		display: inline-block;
		margin-left: -70px;
		background-size: cover;
		border: 1px solid grey;
	}
	
	
	.mateplayerDiv {
		width: 500px;
		height: 200px;
		border: 1px solid;
	}
}


.loadingDiceDiv {
	font-size: 5em;
}
.loadingDiceDiv:after {
	animation: loadingDice 1s linear infinite;
}


@keyframes backgroundMove {
	from {background-position: 0 0;}
	to {background-position: -700px -523px;}
}

@keyframes loadingDice {
	0% {content: "<i class='fas fa-dice-three'></i>";}
	50% {content: "<i class='fas fa-dice-one'></i>";}
	100% {font-size: 1em;}
}