/*General rules*/
html {
	/*Colors*/
	background-color: #111;

	/*Box model*/
	padding: 0px;

	/*Appearance*/
	overflow: hidden;
}

body {
	/*Colors*/
	background-color: midnightblue;
	color: white;

	/*Sizing*/
	/*The width will be proportional to the smaller dimension*/
	min-width: 100vmin;
	max-width: 100vmin;
	aspect-ratio: 1;
	/* Height equals width */

	/*Box model*/
	margin: 0px auto;
	padding: 0px;
}

h1 {
	/*Colors*/
	background-color: black;

	/*Sizing*/
	width: 100%;
	max-height: 30%;
	font-size: 3.5em;

	/*Box model*/
	margin: 0px;

	/*Alignment*/
	text-align: center;
}

/*Menu*/
#menu {
	width: 100%;
	height: 100%;
}
#menu *{
	overflow: hidden;
}

#menu>.container {
	/*Sizing*/
	width: 100%;
	height: inherit;
	max-height: 70%;

	/*Display*/
	display: flex;
	flex-direction: column;

	/*Alignment*/
	justify-content: space-evenly;
	align-items: center;
}

/*Select*/
#numCards {
	/*Colors*/
	background-color: transparent;
	color: lightblue;

	/*Sizing*/
	font-size: 4em;

	/*Box model*/
	border: none;
	outline: none;

	/*Alignment*/
	text-align: center;

}

#numCards>option {
	/*Colors*/
	background-color: midnightblue;
}

/* Start button */
#start {
	/*Colors*/
	background-color: lightblue;

	/*Sizing*/
	font-size: 2.5em;
	min-height: 25vmin;
	max-height: 50vmin;
	aspect-ratio: 2;

	/*Box model*/
	border-radius: 15vmin;
	/* Rounded border */
}

#start:hover {
	/* light effect on hover */
	box-shadow: lightblue 0px 0px 20px;
}

/*Hidden*/
.hidden {
	display: none !important;
}