/*Cards*/
	.CardBox {display: inline-block;text-align: center;}
	.Card {border: black solid 5px;border-radius: 17px;display: inline-block;text-align: center;z-index: 2;box-sizing: border-box;background-color: white;}/*Card Aspect Ratio Should be 5:7*/
		.CardText {line-height: normal;vertical-align: middle;display: inline-block;top: 50%;position: relative;}
	/*Roles*/
		#RoleBox {width: 50%;z-index: 1;background-color: lightgrey;padding-top: 15px;padding-bottom: 15px;border-radius: 15px;margin: 0;}
			.Role {position: relative;width: 29.9%;height: 17.7vw;margin: 0.5%;line-height: 17.7vw;}
				#Role1 {}
				#Role2 {}
				#Role3 {}
				.RoleText {font-size: 2vw;margin-top: -1vw;}
					#Role1Text {}
					#Role2Text {}
					#Role3Text {}

	/*Items*/
		#ItemBox {width: 95%;z-index: 1;background-color: lightgrey;padding: 15px 20px 15px 20px;margin-top: 2%;margin-bottom: 20px;border-radius: 15px;box-sizing: border-box;}
			.Item {position: relative;width: 23.75%;height: 25vw;margin: 0.5%;line-height: 25vw;}
				#Item1 {}
				#Item2 {}
				#Item3 {}
				#Item4 {}
				#Item5 {}
				#Item6 {}
				#Item7 {}
				#Item8 {}
				.ItemText {font-size: 4.5vw;margin-top: -2.25vw;}
					#Item1Text {}
					#Item2Text {}
					#Item3Text {}
					#Item4Text {}
					#Item5Text {}
					#Item6Text {}
					#Item7Text {}
					#Item8Text {}
/*UI*/
	/*Top Navbar*/
		header {height: 70px;top: 0px;left: 0px;right: 0px;position: fixed;background-color: rgba(0,0,0,0.8);z-index: 3;}
			h1 {text-align: center;color: white;font-size: 30px;z-index: 4;}
			/*Option Boxes*/
				.HeadOptBox {position: absolute;top: 15px;z-index: 4;}
					#ToggleBox {position: absolute;top: 15px;width: 300px;right: 15px;z-index: 4;text-align: right;}
					#HandSizeBox {position: absolute;top: 15px;width: 300px;left: 15px;z-index: 4;text-align: left;}
				.HeadOptBox > span {color: white;font-size: 20px;}
				.HeadOptBox > label {color: white;white-space: nowrap;}
				.HeadOptBox input[type="number"] {width: 40px;}
	/*RuleBox*/
		#RuleBox {position: absolute;top: 75px;width: 23%;height: 20vw;left: 20px;z-index: 1;overflow: auto;text-align: left;}
	/*InfoBox*/
		#InfoBox {position: absolute;top: 75px;width: 23%;height: 20vw;right: 20px;z-index: 1;overflow: auto;text-align: left;}
	/*Footer*/
		footer {text-align: right;font-size: 10px;width: 550px;right: 0px;bottom: 0px;position: fixed;background-color: rgba(202, 202, 202, 0.4);padding: 5px 10px 5px 5px;border-top-left-radius: 20px;z-index: 3;}
			#FooterText {margin: 0;color: #808080;z-index: 4;}
/*Misc*/
	.BoldText {font-weight: 700;}
	body {text-align: center;}
	#HeaderSpacer {height: 70px;}