/*
IMPORTANT:
	In order to preserve the uniform grid appearance, all cell styles need to have padding, margin and border sizes.
	No built-in (selected, editable, highlight, flashing, invalid, loading, :focus) or user-specified CSS
	classes should alter those!
*/

/* setup the css variables */
:root {
	/* -------------------------------- Fonts -------------------------------- */
		--DefaultFontFamily: Montserrat; 						/* the default font */
		--FontSize: 5vw;																	/* the font size */
		--border-radius: 25em;
	}
	
	html {
		height:100%;
		background: url('images/pixabay-birgl.jpg') fixed center;
		background-size: 300%;
		font-family: var(--DefaultFontFamily);
		font-size: var(--FontSize);
		/*background-color: #880000ff;*/
		color: white;
	}

	body {
		margin:auto;
	}
	
	#batchplayers {
		margin-top:30px;
		text-align: center;
	}
	
	img.picture {
		width: 30vw;
	}
	
	select {
		font-size: var(--FontSize);
		font-weight:normal;
		width: 45%;
	}
	
	#contestants {
		height: 100%;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
	}

	.contestantCard {
		margin: 2.5vw 1vw 0 0vw ;
		/* text-shadow: 1px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000, -1px 0 0 #000;*/
		font-weight: bold;
		-webkit-text-stroke: 2px black;
		position:relative;
		text-align: center;
		
		background:center;
		background-size: contain;
		background-repeat: no-repeat;
	}

	.cardtext {
		text-align: center;
		position: relative;
		margin-top: -50%;
	}

	#All{
		border-width: thick;
		border-color:white;
	}