/* new css for original website content */
/* default styling for clean slate in all modern browsers */

*, *:before, *:after { box-sizing: inherit; }

html {
	box-sizing: border-box;
	line-height: 1.5rem;
	margin: 0;
	padding:0;
	scroll-behavior: smooth;
	text-underline-offset: 0.2rem;
	}

img { max-width: 100%; height: auto; }

h1, h2, h3, h4, h5, h6 {
	font-family: sans-serif;
	max-width: 70ch;
	text-wrap: balance;
	}

p, span {
	max-width: 70ch;
	margin: auto;
	text-wrap: balance;	
	}

p {
	padding-bottom: 1.5rem;
	}

details {
	display: inline-block;
	width: fit-content;
	}
	
details summary { 
	cursor: pointer;
	}

summary {
	font-size: 1.1rem;
	font-weight: bold;
	padding-bottom: 0.33rem;
	text-align: center;
	}

a {text-underline-offset: 0.2rem; transition: all 0.2s ease;}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */
   
body {
	background-attachment: fixed;
	background-color: #F9C192;	
	background-image: linear-gradient(120deg, #C71585, #86C716, #1686C7); /* Standard syntax */	
	background-size: cover;
	color: #894927; /*#FFE4E1;*/
 	}
 
main {
	display: grid;
	height: 100%;
	margin: auto;
	min-width: 300px;
	text-wrap: balance;
	width: 100%;	
	}

#heading {
 	color: #FFFDCE;
 	font-family: lucien_schoenschriftv_catRg;
 	font-size: 2.5rem;
 	line-height: 3rem;
 	margin: 1rem 0.5rem;
 	padding: 1rem;
 	text-align: left;
 	text-shadow: 2px 1px 0 #2F0000;
 	text-wrap: balance;
 	}

.contentwrap {
	align-items: normal;
 	display: grid;
 	column-gap: 1rem;
 	grid-template-columns: 1fr 3fr;
 	justify-content: center;
 	margin: 0 auto;
 	min-width: 300px;
 	padding: 0.5rem;
 	width: 100%;
 	}
 
.colhead1{
	color: #EACC69;
	font-family: pirulen;
	font-size: 1.25rem;
	text-align: center;
	}

#col1, #col2 {
	align-items: center;
	display: grid;
	justify-content: center;
	margin: 2% 1%;
	min-width: 300px;
	padding: 1rem;
	place-content: center;
	text-align: center;
	}	
 
.toc {
 	background-color: #F5E6EB;
 	border: 0.2rem inset #A48623;
 	border-radius: 1rem;
 	color: #767676;
 	font-family: kontrapunktlight;
 	font-size: 1rem;
 	justify-content: center;
 	line-height: 1.55rem;
 	margin: 0.5rem 1rem 3rem 1rem;
 	min-width: 300px;
 	padding: 1.5rem;
 	text-align: center;
 	width: max-content;
	}

.toc_ul {
	list-style-type:none;
	padding-left:0;	
	}
 
.linksactive {
 
 	}
 
.linksactive a:link {color: #009B00; outline: none; border: 0; font-family: kontrapunktbold; font-size:1.15rem;}
.linksactive a:visited {color: #009B00; outline: none; border: 0; font-family: kontrapunktbold; font-size:1.15rem;}
.linksactive a:active {color: #009B00; outline: none; border: 0;font-family: kontrapunktbold; font-size:1.15rem; text-shadow: none;}
.linksactive a:hover {color: #009B00; font-family: kontrapunktbold; font-size:1.25rem; text-shadow: none;}

.linksinactive a:link {color: #3D0C02; outline: none; border: 0; font-size: 1.1rem;}
.linksinactive a:visited {color: #3D0C02; outline: none; border: 0; font-size: 1.1rem;}
.linksinactive a:active {color: #3D0C02; outline: none; border: 0; font-size: 1.1rem; text-shadow: none;}
.linksinactive a:hover {color: #3D0C02; outline: none; border: 0; font-family: kontrapunktbold; font-size: 1.15rem; text-shadow: none;}

.red {color: #B70000;}

.title-top {
	line-height: 2rem;
	margin: 1rem 0.5rem auto 0.5rem;
	}
	
.author {
	padding-top: 1.25rem;
	font-weight: bold;
	}	

.hymn {
 	align-items: center; /* Centers child vertically */
 	background-color: #FFFAFA;
 	border: 0.2rem inset #296E01;
 	border-radius: 1rem;
 	color: #262626;
 	display: grid;
 	font-family: solveig_demi_boldregular;
 	font-size: 1.2rem;
 	justify-content: center; /* Centers child horizontally */
 	margin: 0 auto;
 	max-width: 98%
 	min-width: 300px;
 	text-align: center;
 	/*width: fit-content;*/
	}		
 
.verses {
 	font-weight: 550;
 	min-width: 300px;
 	padding: 0.5rem 4%;
 	text-align: left;
	}
	
.indent {
	padding-left: 1.5rem;
	}

.indent2 {
	padding-left: 3rem;
	}	

.chorus {
	font-size: 1.07rem;
	font-weight: bold;
	}

.blue {color: #0000FF;}
.red {color: #B70000;}
.green {color: #006C00;}
.black {color: #000000;}		
 
.credits {
 	font-size: 80%;
 	line-height: 1.4rem;
 	min-width: 300px;
 	text-align: left;
 	text-wrap: balance;
	}
 
.credits a {color: #296E01; font-weight: bold; outline: none; border: 0;}

hr.green {
	background-color: #00CD00;
	border: 0.15rem groove #A48623;
	border-radius: 0.3rem;
	height: 0.2rem;
	margin-left: 1%;
	margin-right: 1%;
	}	

hr.purple {
	background-color: #5716C7;
	border: 1px solid #5716C7;
	border-radius: 3px;
	height: 2px;
	margin-left: 1.5%;
	margin-right: 1.5%;
	}
 
audio {
 	align-items: center;
 	background-color: #296E01;
 	border: 5px ridge gold;
 	border-radius: 1.5rem;
 	display: grid;
 	margin: 1rem auto;
 	padding: 0.6rem 0.7rem;
 	place-content: center;
	}
 
.footwrap {
	display: grid;
 	margin: 0 auto;
 	max-width: 100%;
 	width: fit-content;
	}
	
.rights {
 	background-color:#5716C7;
 	border: 3px inset gold;
 	border-radius: 1rem;
 	color:#86C716;
 	display: inline-block;
 	float: none;
 	font-family: kontrapunktlight;
 	font-size: 1rem;
 	font-style: italic;
 	font-weight: bold;
 	margin: 1rem auto;
 	max-width: 100%;
 	padding: 0.4rem 0.9rem;
 	text-align: center;
 	text-wrap: balance;
 	vertical-align: middle;
 	width: fit-content;
	}	

.center {
  	border: none;
  	margin: auto;
  	padding: 10px;
  	text-align: center;
	}

/* ------------------------------------ */

/* for smaller screen sizes */

@media only screen and (max-width: 1024px) {

	.contentwrap {
 		grid-template-columns: 1fr;
 		min-width: 300px;
 	}
}

@media only screen and (max-width: 1024px) {

	.toc {
		width: fit-content;
	}
}