body {background-image:url("repeathero.jpg");
			background-repeat:repeat;
			background-size:50%;
			font-family:Optima, sans-serif ;}

nav {background-color:rgb(219, 7, 7);
		font-weight:bold;
		grid-column:2/4;
		grid-row:2/3;
		display:block;}

nav ul {width:100%;
	display:flex;
	flex-wrap:nowrap;
	list-style-type:none;}

li {width:100%;}

ul li {width:100%;
		list-style-type:none;
		display:flex;
		flex-wrap:nowrap;}

nav a{color:rgb(0,0,0);
		text-decoration:none;
		padding:5px;
		text-align:center;
		display:inline-block;
		}

nav a:hover {background-color:rgba(204, 186, 186,90%);
				transition:background-color 1s;}

main{background-color:rgb(204, 186, 186);
		grid-column:2/4;
		grid-row:3/4;
		padding-left:10px;
		padding-right:10px;
		padding-top:5px;
		padding-bottom:5px;
		font-family:Optima, sans-serif ;}

section{float: left;
			text-align:center;
			width: 100%;
			padding-right: 1rem;}

footer{color:red;
		text-align:center;}

form { display: grid;
		grid-template-rows: auto;
		grid-template-columns:100px 1fr ;
		grid-gap:.75rem;
		width:50%; }



h2{color:black;
	text-align:center;}


p{color:black;}

#homehero {background-image:url('homehero.jpg');
			height:300px;
			background-size:cover;
			background-repeat:no-repeat;
			background-position:center;
			grid-column:2/4;
			grid-row:1/2;}

#singerhero { float:right;
				height:auto;
				width:25%;
				margin-top:2px;
				padding:20px;
				border-style:outset;
				border-color:black; }

#guitarhero {float:right;
				height:auto;
				width:25%;
				margin-top:2px;
				padding:20px;
				border-style:outset;
				border-color:black;}

#wrapper {display:grid;
			grid-auto-rows:minmax(0px, auto);
			grid-template-columns: minmax(0px, 1fr) repeat(2, minmax(0, 480px)) minmax(0px, 1fr);
			grid-gap:5px;
			margin:10px;
			padding:10px;}

#miltonhero{float:right;
			height:auto;
			width:25%;
			margin-top:2px;
			padding:20px;
			}


@media only screen and (max-width:992px){
	#wrapper{grid-template-columns: minmax(0px, 1fr) repeat(2, minmax(0, 384px)) minmax(0px, 1fr);}
	form{width:75%;}
}

@media only screen and (max-width:768px){
	#wrapper{width:100%;}
	#singerhero{
				align-content:center;}
	#guitarhero{
				align-content:center;}
}