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;}

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

li {width:100%;}

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

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 ;}

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



h2{color:black;}

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;}


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

}

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