/*Main stuff to center the page, set the max width of the wrapper, set the font, set the repeating background image*/

* {
	margin: 0;
	padding: 0;
	font-family: Verdana, Geneva, Tahoma, sans-serif;
}

body {
	background-color: #2E2E2E;
	background-image: url("repeat.png");
	background-attachment: fixed;
	color: #fff;
}

.wrapper {
	margin: 0 auto;
	max-width: 960px;
}


/*Header and Nav bar--------------------*/


/*This sets the sizing of the header banner and sets the behavior of the nav links*/

header {
	background-color: #000;
}

header img {
	width: 100%;
	height: auto;
}

nav {
	display: flex;
	justify-content: space-evenly;
	flex-wrap: wrap;
}

nav a {
	width: 95px;
	height: 40px;
	line-height: 40px;
	text-align: center;
	font-size: 1.1em;
	text-decoration: none;
	color: #fff;
}

nav a:hover {
	background-color: #870000;
}


/*I don't like when nav links are a solid color when they've been visited.
I wanted it to stay a different color when you were currently on that page instead. I did implement that style on the music page for the download link.*/

.active {
	color: #2E2E2E;
}


/*Home content-------------------------*/


/*set the behavior of the 3 columns, the background colors, set the object (video) size, format the font on the note, and set the sizing of the tour poster.*/

.content {
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;
	min-height: 91vh;
}

.left,
.right {
	display: block;
	text-align: center;
	min-width: 150px;
	height: auto;
	background-color: #2E2E2E96;
	margin-top: 0.5em;
	margin-bottom: 0.5em;
	padding: 0.5em;
}

.left {
	margin-right: 0.5em;
}

.right {
	margin-left: 0.5em;
}

.newsvert img {
	width: 100%;
	height: auto;
}

.middle {
	display: block;
	background-color: #2e2e2e96;
	padding: 0.5em;
	width: 100%;
	min-width: 500px;
	text-align: center;
	margin: 0.5em 0;
}

object {
	max-width: 500px;
	margin: 0 auto;
}

.note {
	max-width: 500px;
	text-align: left;
	margin: 1.5em auto;
	padding: 2em;
	background-color: #870000;
	border-radius: 15px;
}

.note h3 {
	font-family: 'Brush Script MT', cursive;
	font-size: 2em;
}

.note h4 {
	font-style: italic;
}

.note p {
	font-style: italic;
	font-size: 0.9em;
}

#poster {
	max-width: 500px;
	width: 75%;
	height: auto;
	border: 2px solid #870000;
}

.news img {
	max-width: 800px;
	width: 100%;
	height: auto;
}


/*tour page---------------------------*/


/*Set the behavior of the table, displays links as block so they aren't stange rectangles when wrapping. Line through text deco since the tickets are "not on sale." Set cursor to pointer when over link.*/

table {
	margin: 0.2em auto;
	background-color: #000;
	min-width: 350px;
	width: 80%;
	border-spacing: 5px;
	font-size: 1.2em;
}

th {
	padding: 0.5em 0;
	font-weight: bold;
	font-size: 0.9em;
}

th a {
	display: block;
	padding: 0.5em 0;
	text-decoration: line-through;
	color: #870000;
}

th a:hover {
	color: #000;
	background-color: #870000;
	cursor: pointer;
}


/*music page---------------------------*/


/*Set the sizing of the player within the red box, set the red box within the middle box. Set the behavior of the download link to stay black when visited. sets the sizing and flex behaviors of the album art.*/


/*note: .spotify img css is on the music html page*/

audio {
	width: 95%;
}

.player {
	background-color: #870000;
	width: 90%;
	margin: 0 auto;
	border-radius: 15px;
}

.dlink {
	color: #FFF;
	border-radius: 15px;
	padding: 5px;
}

.dlink:hover,
.dlink:visited {
	color: #000;
}

.music {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	max-width: 90%;
	margin: 0 auto;
	margin-top: 0.5em;
}

.album img {
	min-width: 200px;
	width: 30vh;
	height: auto;
	border: 2px solid #870000;
	margin: 0.5em;
}


/*Store page--------------------------*/


/*Set behavior of flex for store products. Set grid and formatting for product info, price, and button. Set raffle image sizing, sign up info formatting, email form. I would idealy not have the form email, but that was a requirement so I had fun making an auto-generated email.*/

.store {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin: 0 auto;
	max-width: 800px;
}

.product {
	display: grid;
	grid-template-columns: auto;
	grid-template-rows: auto;
	min-width: 340px;
	max-width: 390px;
}

.product img {
	min-width: 325px;
	width: 100%;
	height: auto;
}

form {
	padding: 0.5em;
	display: grid;
	justify-items: center;
	background-color: #870000;
}

.productname {
	font-weight: bold;
}

.price {
	font-weight: bold;
}

a img {
	border: 2px solid #870000;
}

.newscontainer {
	background-color: #870000;
	border-radius: 15px;
}

#newsletter {
	display: block;
}

.signup {
	font-size: 0.9em;
}

.nope {
	font-style: italic;
	font-size: 0.5em;
}


/*Cart page - added so the store page links could function instead of doing nothing.*/


/*set style and behavior of cart.html error page.*/

.error {
	margin: 0.5em auto;
	padding: 5em;
	width: 50%;
	font-weight: bold;
	font-size: 1em;
	text-align: center;
	background-color: #870000;
}


/*Footer content---------------------*/

footer {
	background-color: #000;
	padding: 0.5em;
	text-align: center;

}

footer a {
	text-decoration: none;
	color: #fff;
	padding: 0.5em 1.5em;
}

footer a:hover {
	background-color: #870000;
}


/*Media queries---------------------*/


/*If any smaller than 960px, the side bars both wrap underneath the middle content.*/

@media only screen and (max-width: 960px) {
	.content {
		flex-wrap: wrap-reverse;
		justify-content: center;
	}
	.middle {
		order: 1;
		min-width: 375px;
	}
	.left,
	.right {
		margin-left: 0;
		margin-right: 0;
	}
	object {
		width: 90%;
		margin: 0 auto;
	}
	.note {
		width: 70%;
	}
}


/*cell phone specific responsive behavior*/

@media only screen and (max-width: 375px) {
	nav a {
		width: 370px;
		border: 2px solid #870000;
	}
	.product {
		margin: 0.5em 0;
	}
	.content {
		flex-wrap: wrap-reverse;
		justify-content: center;
	}
	.middle {
		order: 1;
		min-width: 355px;
	}
	.left,
	.right {
		margin-left: 0;
		margin-right: 0;
	}
	object {
		width: 90%;
		margin: 0 auto;
	}
	.note {
		width: 70%;
	}
}