@charset "utf-8";
/* CSS Document */

.logo {
	margin-bottom: -30px;
	margin-top:-5px;
}

nav ul {
	float: right;
}

nav ul li {
	display: inline;
	float: left;
	margin: -5px 15px 0 0;
	
}
nav ul li a {
	text-decoration: none;
    color: #336699;
    font-size: 1.3em;
}

body {
	max-width: 1080px;
	margin-left: auto;
	margin-right: auto;
	font-family: arial;
}

/* This is changed to flex, from grid, to modify the insides of the cell for this particular container. Insides of the cell being 1D in layout is fine, but this centers the text in the cell and it's the only way I can think of to do this so meh */

.titletext {
	font-size: 1.2em;
	display: flex;
	align-items: center;
	justify-content: center;
}

.hero-box {
	height: 338px;
	background-color: #000000;
	background-image: url(images/banner-image-comic.jpg);
	background-size:cover;
	margin: .5%;
}

h1 {
	color: #FFFFFF;
	font-size: 55px;
	padding-top: 30px;
	padding-left: 50px;
}

		.wrapper{
			/* Notes for those perusing using the console: 1fr = fractions. Instead of percents, which can cause issues with margins, you can use fractions to total the 100% of screen space. 1/2/1 fr splits into 3 sections, with the middle being 2x the size of the two on the outside, for example.
			
			I could also do grid-template-columns: 1fr 1fr 1fr to achieve the same result
			grid-template-columns: 1fr 1fr 1fr
			
			Another command to make the grid all have the same height could be: grid-auto-rows: 100px (example)
			grid-column-gap: 1em;
			grid-row-gap: 1em; 
			or just use grid-gap if you want both
			*/
			
			display:inline-grid;
			grid-template-columns: repeat(2, 1fr);
			grid-gap: 5em;
			
			margin: .5%;
		}
/*
		.nested{
			display:grid;
			grid-template-columns:repeat(3, 1fr);
			grid-auto-rows: 70px;
			grid-gap: 1em;
		}

		.nested div{
			border:#333 1px solid;
			padding: 1em;

}
		
		.wrapper div{
			background: #eee;
			padding: 1em;
		}
		
		.wrapper div:nth-child(odd){
			background: #ddd;
		}
*/

/*Tablet Size*/
@media (max-width: 768px){
	h1 {
		font-size: 30px;
		text-align: left;
		padding-left: 0px;
	}
	nav ul { 
		display: block;
		margin-top: -75px;
		text-align: right;
	}
	nav ul li{
		      
   		width: 100%;
		height: 100%;
		
		
}
	.wrapper {
		width: 49%;
	}
	
}

/*Mobile Phone Size*/
@media (max-width: 400px){
	.logo img {
		width: 40%;
	}
	h1 {
		font-size: 24px;
	}
	nav ul li {
		display: block;
		margin-top: 0px;
		font-size: 15px;
	}
	.wrapper {
		width: 99%;
	}
}