#home	{
	max-width:900px;
	margin-left:auto;
	margin-right:auto;
    position:relative;
}

#home {max-width:100%}
body {max-width:100%;width:auto;}

#donateDiv {
	float:right;
	a {
		text-decoration:none;
		background:white;
		color:var(--dark-bg); 
		padding:8px;
	}
}

/* the big picture on the main page */
#boychoirPic {
	width:100%;
	margin:0;
}
/* logo floats above big picture */
/* there are actually 2 logos, one black and one white, offset by 2 pixels to create a shadow effect */
.logoContainer	{
	height:100%;
	width:100%;
	display:flex;
	position:absolute;
	top:0;
	left:0;
	flex-direction:column;
	justify-content:center;
	align-items:center;
	max-width:1400px;
	pointer-events:none;

	img {
		width: 70%;
	}

	+ .logoContainer {
		transform:translate(2px, 2px);
	}
}

/* large link on home page */
.homeRightButton {
	float:right;
	clear:right;
	margin:20px;
	background-color:var(--light-bg);
	border:solid thin white;
	padding: 5px 20px;
	text-align:center;
	font-weight:bold;
	text-decoration:none;
	z-index:2;
	&:first-child {
		margin-top:1em;
	}
}
/* descriptive text on home page is big */
.bigtext {
	font-size:clamp(1rem, -1rem + 5.333vw, 2rem);
	min-height:1vh;
	line-height:150%;
	white-space:nowrap; 
	display:flex;
	justify-content:space-between;
	align-items:flex-start;
	flex-wrap:wrap;
}
/* checkmarks as bullets */
ul.features {
	list-style-type:none;

	li:before {
		font-family: "Font Awesome 5 Free";
		content: '\f00c';
		font-size:75%;
		color:white;
		margin: 0 0.2em 0 -1.2em;
	}
}



/* unused but save for later use */
@keyframes pulse	{
	from {opacity:.1} 
	to {opacity:.3}
}
@keyframes bigpulse	{
	from {opacity:.1} 
	to {opacity:.9}
}

#concert	{
    display:flex;
	cursor:pointer;
    background:black;
    overflow:hidden;
    
	img {
		width:246px;
		max-width:40vw;
	}
	div	{
		text-align: center;
		z-index:4;
		/* animation: pulse 2s linear infinite alternate; */
	}

	@media (min-width:600px) {
		position:absolute;
		right:5px;
		top:45px;
		z-index:5;
	}
}