

#splash-section
{
	position:relative;
	background-image:linear-gradient(to top, black, rgb(44, 6, 92));
	width:100%; min-height:100vh; 
	margin-top:-6rem;
	overflow:hidden;
}

#splash-about-link
{
	background-color:#F17B16; 
	color:#fafbfc; 
	position:absolute; 
	font-size:1.5rem; 
	font-family:orbitron; 
	display:block; margin:auto; 
	bottom:13%; right:10%; 
	padding:20px 40px; 
	border:2px solid #fafbfc;
	border-radius:25px;
	z-index:99;
	transition:0.5s ease;
}

.heading
{
	background-image:linear-gradient(315deg, #ffbb3d, #8a2ebd);
	margin-top:7%;
	margin-bottom:0;
	padding:5%;
	font-family:orbitron;
	font-size:2rem;
	font-weight: bold;
	margin-left:calc(10% - 12px);
	margin-right:calc(10% - 12px); 
	color:#fafbfc;
	border-radius:25px 25px 0 0;
}

#splash
{
	margin:auto;
	width:100%;
}

#splash-v
{
	display:none; 
	margin:auto; 
	width:100%;
}

.content
{
	background-color:#fafbfc;
	width:80%;
	margin:auto;
	border:2px solid lightgray;
}

#news-section > *
{
	margin-left:10px;
}

#news-section
{
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
	padding-top:10px; padding-right:10px;
	margin-left:-10px;
	margin:auto;
	width:calc(80% + 10px);
}

.news
{
	width:calc(33.333333% - 10px);
	overflow:hidden;
	position:relative;
	border-radius:25px 0;
	margin-bottom:10px;
}

.news-img
{
	width:100%;
	border-radius:25px 0;	
}

.news-overlay, .news-overlay-o
{
	background-color:#BD45FF;
	font-family:orbitron;
	overflow:hidden;
	position:absolute;
	top:0; left:0;
	width:100%; height:70%;
	transition:0.2s ease;
	transform:translate(0, 140%);
	z-index:9;
	border-radius:25px 0;
}

.news-overlay-o
{
	background-color:#F1AB16;
}

.news-overlay-heading
{
	padding:3% 5%;
	margin:0;
	color:#fafbfc;
	font-size:1.8rem;
}

.news-overlay-body
{
	font-family:prompt;
	padding:0 5%;
	margin:0;
	color:#fafbfc;
	font-size:1.2rem;
}

#news-overlay-read-more, #news-overlay-read-more-o
{
	font-family:prompt;
	padding:2% 4%;
	margin:3% 5%;
	color:#fafbfc;
	font-size:1rem;
	background-color:#fafbfc;
	color:#BD45FF;
	border-radius:25px;
	display:inline-block;
	font-weight:bold;
	transition:0.2s ease;
}

#news-overlay-read-more-o
{
	color:#F1AB16;
}

#featured-game-section
{
	width:100%;
}

#featured-game
{
	position:relative;
	color:#fafbfc;
}

#featured-game-video
{
	margin:auto; 
	width:100%
}

#featured-game-video-v
{
	margin:auto; 
	width:100%
}

#games-section > *
{
	margin-left:10px;
}

#games-section
{
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
	padding-top:10px; padding-right:10px;
	margin-left:-10px;
	margin:auto;
	width:calc(80% + 10px);
}

.game
{
	width:calc(25% - 10px);
	overflow:hidden;
	position:relative;
	border-radius:25px 0;
	margin-bottom:5px;
}

.game-img
{
	width:100%;
	border-radius:25px 0;	
}

.game-overlay, .game-overlay-o
{
	background-color:#BD45FF;
	font-family:depixel;
	overflow:hidden;
	position:absolute;
	top:0; left:0;
	height:calc(100% - 5px);
	text-align:center;
	transition:0.2s ease;
	transform:translate(0, -100%);
	z-index:9;
	border-radius:25px 0;	
}

.game-overlay-o
{
	background-color:#F1AB16;
}

.game-overlay-text
{
	padding:25% 0;
	margin:0;
	color:#fafbfc;
	font-size:3rem;
}

#more-games
{
	background-color:#BD45FF;
	font-family:depixel;
	text-align:center;
	margin-bottom:10px;
	transition:0.3s ease;
	border-radius:25px 0;
}

#more-games-text
{
	position:absolute;
	padding:25% 10%;
	margin:0;
	color:#fafbfc;
	font-size:3rem;
}

@media screen and (min-width:1024px) {
	
	#splash-about-link:hover
	{
		background-color:#F39D38;
		border-color:#FFF647;
	}

	.news:hover .news-overlay
	{
		transform:translate(0, 50%);
	}
	
	.news:hover .news-overlay-o
	{
		transform:translate(0, 50%);
	}
	
	#news-overlay-read-more:hover
	{
		background-color:#fafbfc;
		font-size:1.05vw;
	}
	
	#news-overlay-read-more-o:hover
	{
		background-color:#fafbfc;
		font-size:1.05vw;
	}

	#featured-game-video
	{
		display:block; 
	}

	#featured-game-video-v
	{
		display:none; 
	}
	
	.game:hover .game-overlay
	{
		transform:translate(0, 0);
	}
	
	.game:hover .game-overlay-o
	{
		transform:translate(0, 0);
	}
	
	#more-games:hover
	{
		background-color:#F1AB16;
	}
	
}

@media screen and (max-width: 1024px) {

	.heading
	{
		margin-left:calc(5% - 11px);
		margin-right:calc(5% - 11px);
		text-align:center;
	}
	
	#splash
	{
		display:none;
	}
	
	#splash-v
	{
		display:block;
	}

	.content
	{
		width:90%;
		border:1px solid lightgray;
	}

	#nav-container
	{
		width:90%; height:100%;
	}

	#news-section
	{
		width:calc(90% + 10px);
		text-align:center;
	}

	.news, .game
	{
		width:100%;
		border-radius:25px;
		margin-bottom:4rem;
	}
	
	.news-img
	{
		border-radius:25px 25px 0 0;
	}

	.news-overlay, .news-overlay-o
	{
		position:relative;
		transform:translate(0, 0);
		border-radius:0 0 25px 25px;
		padding:5% 0;
	}

	#featured-game-video
	{
		display:none; 
	}

	#featured-game-video-v
	{
		display:block; 
	}

	#games-section
	{
		width:calc(90% + 10px);
	}
	
	.game-overlay-text
	{
		padding:10% 0;
	}
	
	#more-games
	{
		background-color:#BD45FF;
		border-radius:25px;
	}
	
	#more-games-text
	{
		position:initial;
	}
	
	.game-img
	{
		border-radius:25px 25px 0 0;
	}

	.game-overlay, .game-overlay-o
	{
		overflow:hidden;
		position:relative;
		width:100%;
		transform:translate(0, 0);
		z-index:9;
		border-radius:0 0 25px 25px;
	}

	.game-overlay-text
	{
		font-size:2rem;
	}
	
	#more-games-text
	{
		font-size:2rem;
	}

}