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

#heroBox {
	height: 700px;
	background: rgba(25,25,25,1.00);
	background-image: url("../assets/VEX_BG_2024_3 copy.png");
	background-size: cover;
	background-position: 50% 50%;
}
#introBox {
	position: relative;
	width: 100%;
	height: auto;
	background: rgba(5,5,5,1.00);
}
#vidsBox {
	position: relative;
	width: 100%;
	height: auto;
	background: rgba(15,15,15,1.00);
}
#infoContainer {
	max-width: 100%;
}
#vidsContainer {
	max-width: 100%;
}
#merchBox {
	height: auto;
	background: rgba(25,25,25,1.00);
}
#gameBox {
	height: auto;
	background: rgba(150,150,150,1.00);
}

/* Pertains to everything found within the VIDS BOX */
.GradientBox {
	position: relative;
	width: 50%;
	height: auto;
	margin: 80px 0 160px;
	border-style: solid;
	border-width: 1px;
	border-image: linear-gradient(90deg,rgb(75,0,0) 20%,rgb(150,0,0) 25%, rgb(150,0,0) 50%, rgb(95,55,150) 50%,rgb(95,55,150) 75%,rgb(57,29,95) 80%) 1;
	-webkit-transform: translateZ(10);
	transform: translate(0);
	-webkit-transform-style: flat;
	transform-style: preserve-3d;
}

.GradientBox:before {
	content: "";
	position: absolute;
	inset: 5px;
	-webkit-transform: translateX(0);
	-webkit-transform: translateY(15px);
	-webkit-transform: translateZ(-2px);
	transform: translate3d(0, 15px, -1px); 
	background: linear-gradient(90deg,rgb(75,0,0) 20%,rgb(150,0,0) 25%, rgb(150,0,0) 50%, rgb(95,55,150) 50%,rgb(95,55,150) 75%,rgb(57,29,95) 80%);
	filter: blur(20px);
	z-index: -500;
}

#leftRed {
	background: linear-gradient(135deg,rgb(10,10,10) 20%, rgb(20,20,20) 40%, rgb(10,10,10) 80%);
}
#rightRed {
	background: linear-gradient(315deg,rgb(150,0,0) 40%,rgb(100,0,0) 40%, rgb(100,0,0) 45%, rgb(75,0,0) 45%,rgb(75,0,0) 47%, rgb(50,50,50) 47%);
}
.blurbBox {
	width: 90%;
	margin: 100px 1%;
}
#blurbRight {
	margin-left: 49%;
}
.vidsBtn {
	background: rgba(15,15,15,1.00);
	border: 3px solid rgba(150,150,150,1.00);
	color: rgba(150,150,150,1.00);
}
.vidsBtn:hover {
	background: rgba(150,150,150,1.00);
	color: rgba(15,15,15,1.00);
}


/* Pertaining to all items contained within the MERCH BOX */
.gamesBtn {
	background: rgba(25,25,25,1.00);
	border: 3px solid rgba(150,150,150,1.00);
	color: rgba(150,150,150,1.00);
}
.gamesBtn:hover {
	background: rgba(150,150,150,1.00);
	color: rgba(25,25,25,1.00);
}

/* DIVIDERS*/
.diagDeco {
	position: absolute;
	left: 0px;
	width: 100%;
	height: 40px;
	margin: 0;
	border: none;
}
.diagL {
	bottom: 0px;
	background: linear-gradient(45deg, rgba(15,15,15,1.00) 35%, rgba(5,5,5,1.00) 35%);
}
.diagR {
	bottom: 0px;
	background: linear-gradient(315deg, rgba(15,15,15,1.00) 35%, rgba(5,5,5,0) 35%);
}

/*iPad*/
@media (max-width: 1400px) {
	#leftRed {
		width: 75%;
	}
	#rightRed {
		background: linear-gradient(315deg,rgb(150,0,0) 60%,rgb(100,0,0) 60%, rgb(100,0,0) 65%, rgb(75,0,0) 65%,rgb(75,0,0) 67%, rgb(50,50,50) 67%);
	}
	.blurbBox {
		margin: 100px 1%;
	}
	#blurbRight {
		margin-left: 24%;
	}
	
	.merchCard {
		width: 30%;
	}
}

/*iPhone Landscape*/
@media screen and (max-width: 930px) {
	#heroBox {
	background-image: url("../assets/VEX_BG_2024_3_b.png");
	}
	#leftRed {
		width: 95%;
	}
	#rightRed {
		background: linear-gradient(270deg,rgb(150,0,0) 93%,rgb(100,0,0) 93%, rgb(100,0,0) 98%, rgb(75,0,0) 98%,rgb(75,0,0) 100%, rgb(50,50,50) 100%);
	}
	.blurbBox {
		width: 90%;
		margin: 25px 5%;
	}
	#blurbRight {
		margin-left: 6%;
	}
	.merchCard {
		width: 45%;
	}
}

/*iPhone Portrait*/
@media screen and (max-width: 700px) {
	#heroBox {
	background-image: url("../assets/VEX_BG_2024_3_b.png");
	}
	#leftRed {
		width: 95%;
	}
	#rightRed {
		background: linear-gradient(270deg,rgb(150,0,0) 93%,rgb(100,0,0) 93%, rgb(100,0,0) 98%, rgb(75,0,0) 98%,rgb(75,0,0) 100%, rgb(50,50,50) 100%);
	}
	.blurbBox {
		width: 95%;
		margin: 25px 2%;
	}
	#blurbRight {
		margin-left: 3%;
	}
	.merchCard {
		width: 90%;
	}
}