@charset "utf-8";
/* CSS Document */
/* Sheet specific to the Z1Gaming home page*/

#heroBox {
	height: 600px;
	background: rgba(25,25,25,1.00);
	background-image: url("../assets/VEX_txt_2023_POGLAD.png");
	background-size: cover;
	background-position: 50% 50%;
}
#vexBox {
	height: auto;
	background: rgba(15,15,15,1.00);
}
#vidsBox {
	height: auto;
	background: rgba(15,15,15,1.00);
}
#vexContainer {
	max-width: 30%;
	margin: auto;
}
#vidsContainer {
	max-width: 100%;
	padding-bottom: 100px;
}
#merchBox {
	height: auto;
	background: rgba(25,25,25,1.00);
}
#gameBox {
	height: auto;
	background: rgba(50,50,50,1.00);
}
#gameFlex {
	width: 100%;
	height: auto;
	margin-bottom: 100px;
}

.VEX_Logo {
	width: 100%;
}
.ItemStacker {
	width: 100%;
	margin: 10px auto 10px auto;
	background: rgba(100,0,0,1.0);
	box-shadow: 2px 2px 5px 2px rgba(5,5,5,1.00);
}
.ItemStacker.QEven {
	width: 100%;
	margin: 10px auto 10px auto;
	background: rgba(150,0,0,1.0);
}
.Question {
	text-align: left;
	margin: 10px 0 5px 1em;
}
.Answer {
	margin: 5px 0 10px 3em;
}


.shopButton {
	background: rgba(75,0,0,1.00);
	border: 3px solid rgba(150,150,150,1.00);
	font-size: 18px;
	transition: 0.5s ease-out;
}
.shopButton:hover {
	background: rgba(150,150,150,1.00);
	border: 3px solid rgba(150,150,150,1.00);
	font-size: 18px;
	color: rgba(75,0,0,1.00);
	transition: 0.5s ease-out;
}
#btnInRed {
	width: auto;
	margin: auto;
}

/* Pertaining to the PC Specs Card*/
.specsCardPC {
	width: 75%;
	height: 500px;
	background-image: url("../assets/PC_2025_1.JPEG");
	background-size: cover;
	background-position: center;
	border-style: solid;
	border-width: 5px;
	border-color: rgb(15,15,15);
	transition: 0.5s ease-out;
}
.specsCardPC:hover {
	border-width: 10px;
	border-color: rgb(75,0,0);
	transition: 0.5s ease-out;
}
.specFlex {
	width: 100%;
	height: 100%;
	margin: auto;
	background-color: rgba(15,15,15, 0.5);
	-webkit-backdrop-filter: saturate(180%) blur(5px);
	backdrop-filter: saturate(180%) blur(5px);
	display: flex;
	flex-flow: column;
	justify-content: flex-start;
	overflow: hidden;
	transition: 0.5s ease-in-out;
}
.specsCardPC > .specFlex:hover > #specsTitle {
	padding-top: 20px;
	padding-bottom: 20px;
	color: rgb(150,150,150);
	transition: 0.5s ease-in-out;
}
.specFlex:hover {
	background-color: rgba(5,5,5, 0.6);
	-webkit-backdrop-filter: saturate(180%) blur(10px);
	backdrop-filter: saturate(180%) blur(10px);
	transition: 0.5s ease-in-out;
}
#specsTitle {
	padding-top: 200px;
	padding-bottom: 250px;
	color: rgb(200,200,200);
	transition: 0.5s ease-in-out;
}
.specSheet {
	height: 300px;
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	align-items: center;
	background-color: rgb(75,0,0);
	background: linear-gradient(330deg,rgba(75,0,0,1.00) 65%,rgba(75,0,0,1.00) 95%, rgba(50,50,50,0) 95%);
}
#specs {
	width: 50%;
	margin: auto;
}



/*iPad*/
@media (max-width: 1400px) {
	/*.specsCardPC {
		border-color: rgb(75,0,0);
	}
	#specsTitle {
		padding-top: 20px;
		padding-bottom: 20px;
	}*/
	#specs {
		width: 65%;
		margin: auto;
	}
}

/*iPhone Landscape*/
@media screen and (max-width: 930px) {
	.specsCardPC {
		width: 50%;
		border-color: rgb(75,0,0);
	}
	#specsTitle {
		padding-top: 40px;
		padding-bottom: 40px;
	}
	#specs {
		width: 95%;
		margin: 60px auto auto auto;
	}
	.specsCardPC > .specFlex:hover > #specsTitle {
		padding-top: 40px;
		padding-bottom: 40px;
	}
}

/*iPhone Portrait*/
@media screen and (max-width: 700px) {
	.specsCardPC {
		width: 90%;
		border-color: rgb(75,0,0);
	}
	#specsTitle {
		padding-top: 40px;
		padding-bottom: 40px;
	}
	#specs {
		width: 95%;
		margin: 60px auto auto auto;
		border-color: rgb(75,0,0);
	}
	.specsCardPC > .specFlex:hover > #specsTitle {
		padding-top: 40px;
		padding-bottom: 40px;
	}
}