.mainimg { /* styling for my main image to adjust the height and width */
	  width: 100%;
  height: 70vh;
  object-fit: contain; /* no cropping */
  background-color: #0c0c0c;
}

nav {	color: white; /* styling for my navigation bar */
		text-align: center;
		font-weight: bold;
		font-size: 100%;
		word-spacing: 200px; /* spaces the words out inside the navigation bar */
		line-height: 50px;
		font-family: Verdana, Arial, Helvetica, sans-serif;
		width: 100%;
	}

a {text-decoration: none;	/* removes the underline for all links*/
	color: black;
}



body { /* styling for my body that adjusts the font and background color */
		margin: 0;
		font-family: Verdana, Arial, Helvetica, sans-serif;
		background-color: white;
		box-sizing: border-box;
	}

.row1, .row2, .row3 { /* styling for all my rows, and it adjusts the margin and width */
	width: 80%;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 15px;
	margin-top: 15px;
}

body h1, body h2 { /* aligns the headers in my body to the center of the page */
	text-align: center;
}

.row1 .col {
	width: 50%;
	float : left;
	box-sizing: border-box;


}

.row1, .row2, .row3 { /* border and box shadow styling for all my rows */
	border: black;
	color: white;
	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
	background-color: black;
	border-radius: 15px;
	padding: 15px;
}
.row2 .col {
	width: 50%;
	float: left;
	box-sizing: border-box;
	
}


.row1:after, .row2:after, .row3:after { /* clears the float for all my rows  */
	clear : both;
	content: "";
	display: table;
}

.xbox, .playstation { /* floats my images to the right of the text */
	float: right;
	padding: 5px;

}

.gamingpc, .Nintendo {
	zoom: 150%;
}

.row3 .col {
	width: 50%;
	float : left;
	box-sizing: border-box;


}


.row1 .col, .row2 .col, .row3 .col { /* all rows and columns are aligned in the center */
	text-align: center;
}
.overwatch {
	zoom: 25%;
}
.esportsleague {
	zoom: 20%;
}

footer {background-color: black; /* footer styling */
		line-height: 40px;
		width:100%;
		color: white;

		}