#mainContainer {min-width:300px;max-width:1000px;margin:auto;
		background-color:black;border-radius:1rem;}

#main {display: flex;flex-wrap:wrap;justify-content:space-evenly;align-items:stretch;
	margin:auto;min-height: 100%;width: 100%;max-width:1000px;}
#main-left, #main-right {vertical-align:top;font-size:0.9rem;}

#main-left {max-width:450px;min-width:300px;padding-top:0.5rem;}
#main-left img {width:100%;max-width:100%;height:auto;border-radius:1rem;}
#main-right {min-width: 250px;}

@media screen and (max-width: 550px) {
	#main, #main-left, #main-right  {display:block;width:95%;margin:auto;}
	#main-left img {padding:0;}
}


#gigs {border:none;color: #eee; font-family: sans-serif;
		position:relative;}

#gigs .line {background-color:#000;width:220px;padding:0 2px;
border-bottom: thin solid white;margin:auto;}

/* The containers for each different show; width must be
less or equal to that of the column that holds them. */
#gigs .even, #gigs .odd, #gigs .details_link { padding: 2px; width:220px;text-align: center;
	margin:auto;font-size:0.8rem;}
@media screen and (max-width: 550px) {
	#gigs .even, #gigs .odd, #gigs .details_link {font-size:0.9rem;}
}

/* the background colors for alternating shows. Here, dark grays */
#gigs .odd { background-color: #444;}
#gigs .even { background-color: #222;}

/* colors for the links to the venues' sites and the "details"
link to the main gigs page. If needed, override with a ".details_link a {...}"
set of rules. */
#gigs a:link, #gigs a:visited {color: #9CC;}
#gigs a:hover {color: #FFF}

/* The containers for each element of one listing */
#gigs .date {font-weight: bold;}
#gigs .title {font-style: italic; /*font-weight: bold;*/}
#gigs .venue { font-weight: bold;}
#gigs .details {text-align: right;/*unused*/}

.details_link {text-align:right;padding-top:10px;width:220px;margin:auto;}


.spotify {text-align:center;}