/* Universal */

@import url('https://fonts.googleapis.com/css?family=Playfair+Display');

body{
	margin:0;
	font-family:"Playfair Display";
}

/* Navbar */

nav.main-nav{
	width:100%;	
	position: fixed;
 	top: 20px;
  	left: 0;
  	z-index:2;
	background-color:transparent;		
}

nav ul{
	display:flex;
}

.main-nav li{
	list-style:none;
	flex-basis:20%;
	text-align:center;	
}

.main-nav a{
	text-decoration:none;
	color:white;
	padding:1rem 2rem;
	font-size:1.4rem;
	opacity:0.5;
	border-radius:80%;
}

.main-nav a:hover{
	background:black;	
	border:3px solid rgb(204, 102, 0);
	font-weight:bold;
	opacity:1;	
	color:white;
}

/* Showcase 1 - This is Rocket League */

.pimg1{
	min-height:100vh;
	background-image: url('../img/img1.jpg');
	background-position: center;
	background-size:cover;
	background-attachment: fixed;
	position:relative;
	opacity:1;
	border-bottom:1px solid rgb(204, 102, 0);
}

.ptext1{
	font-size: 1.5rem;
	color:white;
	text-transform:uppercase;
	position:absolute;
	top: 34%;
	width:100%;
	text-align:center;
}

.ptext1 h1{
	border-bottom:2px solid white;
	padding-bottom:1rem;
	text-shadow: 1px 3px 0 #969696, 1px 13px 5px rgb(204, 102, 0);
}

button.seeMore{
	background-color: transparent;
	color:grey;	
	font-size:1.5rem;
	padding:0.7rem 1.2rem;
	border:1px solid rgb(102, 153, 255);

}

button.seeMore:hover{
	background-color:black;
	color:rgb(204, 102, 0);
	border: 1px solid white;
;
}

/* Showcase 2 - Overview */

#content1{
	background-image: url('../img/img4.jpg');
	background-position:center;
	background-size:cover;
	border-bottom:1px solid rgb(204, 102, 0);	
	height:70vh;
}

.grid2{
	width:80%;
	margin: 0 auto;
	display:grid;
	grid-template-columns: 1fr 1fr 1fr;
}

#content1 .ctext1{
	color:white;
	grid-column: 3/4;
	text-align:center;
	line-height:1.7rem;
	margin:5vw 0;
	font-weight:bold;
	word-spacing:0.4rem;
}


.ctext1 h2,
.ctext2 h2,
.ptext3 h2{
	color:rgb(204, 102, 0);
	font-size:2.4rem;
	font-weight:bold;
	text-transform: uppercase;	
}

.ctext1 h3,
.ctext2 h3,
.ptext3 h3{
	margin-bottom:4vh;
	color:white;
	font-size:1.5rem;
	text-transform: uppercase;
	font-style: italic;
}

/* Showcase 3 - Out Now */

.pimg2{
	background-image: url('../img/img7.jpg');
	height:20vh;
	background-position:center;
	background-size:cover;
	background-attachment: fixed;
	position:relative;
	border:1px solid black;
	border-bottom: 1px solid rgb(204, 102, 0);	
}

/* Showcase 4 - Features */

#content2{
	background-image: url('../img/img2.png');
	background-size:cover;
	border-bottom: 1px solid rgb(204, 102, 0);
	border-top:1px solid black;	
	height:70vh;
	color:white;
}

.ctext2{
	text-align:center;
}

#content2 p{
	margin:1rem 1rem;
}



.flex5{
	width:80%;
	margin:0 auto;
	display:flex;
	margin-top:3rem;
}

.box{
	flex-basis:18%;
	box-sizing: border-box;
	text-align:center;
	border:1px solid black;
	margin:0 1.5rem;
	background-color:black;
	opacity:0.6;	

}

.box:hover{
	opacity:1;
	border:1px solid white;

}

.box h3{
	margin:0;
	background-color:rgb(204, 102, 0);
	padding:1rem 0;
	margin-bottom:1rem;
	text-transform: uppercase;
	color:white;
}

.ptext2{
	color:white;
	text-align:center;
	font-size:1.3rem;
	font-weight:bold;
	font-style: italic;
	letter-spacing:0.1rem;
}

/* Showcase 5  - Esports */

#pimg4{
	background-image: url('../img/img6.jpg');	
	background-position:center;
	background-size:cover;
	height:100vh;
	background-attachment: fixed;
	border:1px solid black;
	color:white;	
	position:relative;
	text-transform: uppercase;
	border-bottom:1px solid rgb(204, 102, 0);
	font-weight:bold;
}

.esports-teams{
	display: grid;
	grid-template-columns:repeat(3, 1fr);
	text-align: center;
	margin-top:2rem;
	justify-items: center;
}

.esports-teams img{
	height:100px;
	width:100px;
}



#pimg4 .esports-img{
	grid-column:2/3;
	grid-row:1/2;
	justify-self:center;
	align-self:center;
	height:200px;
	width:200px;	
}

.esports-teams h3{
	font-size:2rem;
	color:rgb(204, 102, 0);
	font-style: italic;	
}

.europe{
	grid-column:1/2;	
}

.northamerica{
	grid-column:3/4;
}

.europe .flex-team,
.northamerica .flex-team{
	display:flex;
	flex-wrap:wrap;
	justify-content: space-around;
}

.team{	
	flex-basis:30%;
	box-sizing: border-box;
	margin:0.5rem 2rem;	
}

.team:hover{
	color:rgb(204, 102, 0);
	font-style:italic;
}

/* Showcase 6 - DLC */

#pimg3{
	background: black;	
	background-position:center;
	background-size:cover;	
	border:1px solid black;	
	background-attachment: fixed;
}

.flex4{
	width:80%;
	margin:0 auto;
	display:flex;
	flex-wrap: wrap;
	color:white;
	justify-content:space-around;
}

.ptext3{
	color:white;
	text-align:center;
}

.box2 img{
	height:400px;
	width:300px;
}

.box2{
	flex-basis:20%;	
	box-sizing: border-box;
	text-align:center;
	margin:1rem 2rem;
	opacity:0.7;
}

.box2:hover{
	opacity:1;
	color:rgb(204, 102, 0);
}

/* Footer */

footer{
	text-align:center;
	background-color:black;
	border-top:1px solid rgb(204, 102, 0);
	border-bottom:1px solid black;
	color:white;
}