body{
	background-color: #050505;
	color: white;
	font-family: sans-serif;
	max-width: 100%;
	overflow-x: hidden;
	margin: 1.5vw 5vw;
	font-size: 16px;
	line-height: 1.5em;
}

a{
	text-decoration: underline;
	color: white;
	transition: all 0.3s ease 0s;
}

a:hover{
	color: #62dd73;
}

/*CSS for header of pages */
.header{
	display: flex;	
	flex-flow: row wrap;
	justify-content: space-evenly;
	align-items: center;
}

.headImg{
	align-self: baseline;
}

.headLogo{
	max-width:15vw;
	min-width: 300px;
}

.topnav{
	display: flex;
	flex-flow: column wrap;
	justify-content: space-between;
	flex-basis: 70%;
}

.topnavA{
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
	align-items: flex-start;
}

.topnavA a{
	color: white;
	text-decoration: none;
	transition: all 0.3s ease 0s;
}

.homeButton{
	background-color: rgba(76, 175, 80, 0);
	color: white;
	font-size: 1em;
	border: 1px solid white;
	padding: 0.25em;
	margin-bottom: 0.25em;
}

.homeButton:hover{
	border: 2px solid #62dd73;
}

.headInfo{
	text-align: justify; 
	line-height: 1.5em;
}

.headInfo a{
	text-decoration: underline;
}


/*CSS for index*/
.homeLink{
	border: 2px solid white;
	padding: 0.5em;
	margin-bottom: 0.5em;
}

.homeLink h2{
	margin: 0em;
	margin-top: 0.5em;
	margin-bottom: 0.5em;
	text-align: center;
}

.homeLink p{
	margin: 0em;
	padding: 0em;
}

.homeLink:hover h2{
	text-decoration: underline;
}

.aboutFlex{
	display: flex;
	flex-flow: row nowrap;
	align-items: flex-start;
	justify-content: space-around;
	padding: 0em 1em 1em 0em;
}

.aboutLink{
	flex-basis: 70%;
	text-align: left;
	order:2;
}

.pictureLink{
	text-align: center;
	flex-basis: 25%;
	order:1;
	align-self: center;
	margin-top: 1em;
	padding-right: 12px;
	
}

.index-container{
	display:flex;
	flex-flow: row wrap;
	text-align: center;
	justify-content: flex-start;
	align-items: flex-start;
}

.home-left{
	flex-basis: 65%;
	margin: 0.5vw;
	display: flex;
	flex-flow: row wrap;
}

.home-left a{
	text-decoration: none;
}

.home-right{
	flex-basis: 30%;
	margin: 0.5vw;
}



 
/** CSS for people page  **/

.peopleColumn{
	line-height: 1em;
	position: center;
	display: grid;
	grid-column-gap: 10px;
	grid-row-gap: 10px;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.peopleCard{
	position: center;
	background: #171717;
}


.peopleCard:hover{
	border-radius: 0px 10px;
}

.peopleCard:hover .bioImg{
	display:none;
}

.bio{
	display: none;
	line-height: 1.2em;
}

.peopleCard:hover .bio{
	display: block;
}

.bioInfo{
	text-align: left;
	padding: 0% 3%;
}




/** CSS for cybOrch page **/

.album{
	justify-content: space-between;
	display: grid;
	/* grid-column-gap: 3vw; */
	/* grid-row-gap: 10px; */
	grid-template-columns: auto auto;
	grid-template-areas:
	'youtube' 'youtube';
	margin: 0vw 3vw;
}

.youtube{
	width: 40vw;
	border-color: #62dd73;
	border-width: 5px;
	border-style: solid;
	border-radius: 10px;
	padding: 1em;
}
.youtubeDif{
	border: none;
} 

.performanceDiary ul{
	list-style-type: none;
}


.cybOrch-album{
	padding: 1%;
	border-style: solid;
	border-color: white;
	border-width: 1px;
	
}

.embeds{
	display: flex;
	flex-flow: row wrap;
	justify-content: space-evenly;
	align-items: center;
}

.album-embed1{
	flex-basis: 40%;
	height: 400px;
}

.album-embed2{
	flex-basis: 40%;
	height: 400px;
}

.performanceDiary a{
	color: white;
	text-decoration: underline;
	transition: all 0.3s ease 0s;
}

.performanceDiary a:hover{
	color: #62dd73;
}

.performanceDiary h2{
	font-family: monospace;
}



/** CSS for equipment page **/

.equipment-main-container{
	display: flex;
	flex-flow: row wrap;
	justify-content: space-evenly;
}

.NIL_layout{
	flex-basis: 20%;
	margin-top: 1em;
}

.equipment-list{
	flex-basis: 30%;
}

/* cursor hover CSS */
.cursor div{
	position: absolute;
	padding: 8px;
	z-index: 10000;
	pointer-events: none;
	transform: translate(15%, 25%);
}

.cursor div span{
	position: absolute;
	top: 0;
	left: 10px;
	padding: 0px 5px;
	font-size: 16px;
	line-height: 32px;
	color: #ffffff;
	background-color: #242424;
	
	opacity: 0;
	transition: opacity 0.2s;
	
	white-space: nowrap;
}

.cursor div span.visible{
	opacity: 1;
}



/** CSS for Events Page **/

.events-main-container{
	display: flex;
	flex-flow: column nowrap;
	gap: 1em;
}

.events{
	display: flex;
	flex-flow: row nowrap;
	border: 2px solid white;
	padding: 1vw;
}

.events_picture{
	padding-right: 1vw;
	align-self: center;
}

.events_info{
	padding: 0em 1em;
}


/* MEDIA QUERIES */
@media screen and (max-width: 700px){
  body {
	margin: 2vw;
  }
  .header{
	display: flex;	
	flex-flow: column nowrap;
	justify-content: space-evenly;
	align-items: center;
	}
  
}

@media screen and (min-width: 2000px){
	body{
		margin: 1.5vw 12vw
	
	}
	.headLogo{
		max-height: 15em;
	}
	
	

}