@charset "utf-8";
/* CSS Document */
/**************************************
 Filename: teutonicHealing.css
 Author: Laurie Callahan
 Create Date: 24 July 2025
 Purpose: Provide styling for the harmoniousEnergies.org website
 MODIFICATION DATE:
 12 December 2025 (LJC)
**************************************/

	@media screen and (max-width: 1074px) {
		.multi-column-grid {
			width: 100%;
			grid-template-columns: 1fr;
		}
	}
	
	@media screen and (min-width: 1075px) {
		.multi-column-grid {
			grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
			max-width: 1320px;
			width: 100%;
		} #regForm {
			width: 31rem;
		}
	}

/* ============= Special Fonts ============ */

	@font-face {
		font-family: 'Bookman Old Style';
		src: url('../fonts/bookman old style.ttf');
	} .official {
		font-family: 'Bookman Old Style',Verdana,sans-serif;
	}
	
/* =========== End Special Fonts ========== */

/* ======= Colors used on all pages ======= */

	.headerBackground {
		color: #f3f4ec;							/* Green Cream */
		background-image: url('../images/banner.jpg');
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
		width: 100vw;
		background-color: #343d2a;				/* Hunter Green */
	}
	
	.pageBackground {
		color: #000000;							/* black */
		background-color: #f3f4ec;				/* Cream Green */
	}
	
	.grid-item {
		
	} .grid-item-border {
		border: 1px dotted #343d2a;				/* Hunter Green */
	} .grid-item .data-header {
		color: #f3f4ec;							/* Cream Green */
		background: #343d2a;					/* Hunter Green */
	} .grid-item .subtitle {
	} .grid-item .details {
		color: #000000;							/* black */
		background-color: #f3f4ec;				/* Green Cream */
	}
	
/* ======= End Colors used on all pages ======= */

/* ======= CSS Responsive Card Display ====== */

	.single-column-grid {
		display: grid;
		grid-template-columns: 1fr;
		width: 100%;
		gap: 1rem;
		margin: 0 auto;
	}
	
	.multi-column-grid {
		display: grid;
		gap: 1rem;
		margin: 0 auto;
	}
	
	.testimonials {
		max-width: 45rem;
	}
	
	.blog {
		max-width: 45rem;
	} .blog .data-body {
		margin-bottom: 0;
	} .blog .details .infoLink {
		width: 7.5rem;
	} div.contentContainer {
		padding: 0.5rem;
		border-radius: 4px;
	} div.contentContainer .contentBorder {
		border: 1px dotted #343d2a;
		height: 100%;
	} div.contentContainer header {
		padding: 0.7rem 0.5rem 0.7rem 2rem;
		color: #f3f4ec;							/* Cream Green */
		background: #343d2a;					/* Hunter Green */
		box-shadow: 0 0 5px 5px  #343d2a;
	} div.contentContainer header h1 {
		margin: 0 auto;
		padding: 0;
		font-size: 2rem;
		text-align: center;
	} .selAllNone {
		display: flex;
		align-items: flex-start;
		height: 2rem;
		margin: 1rem 1rem 2rem 1rem;
		width: 70%;
		border: none;
	} .selAllNone .image1Container {
		width: 24rem;
	} .selAllNone img {
		cursor: pointer;
		background-color: #8eab93;
		margin-right: 1rem;
		padding: 1rem;
		border: none;
		float: left;
	} .selAllNone img + div {
		width: 15rem;				/* changing this messes up the mobile formatting */
		overflow: hidden;
	} .selAllNone label {
		padding: 0.1rem 0.4rem 0.1rem 0.4rem;
		cursor: pointer;
		display: block;
	} .selAllNone input {
		display: none;
	} .blogFilterContainer .data-header h4 {
		margin: 0;
	} .blogFilterContainer .data-body {
		margin-left: 1rem;
		width: fit-content;
		height: 10rem;
		padding: 1rem;
		overflow-y:auto;
	} .blogFilterContainer label {
		margin: 0;
		padding: 0.1rem 0 0 0.5rem;
		cursor: pointer;
		display: block;
	} .blogFilterContainer input {
		display: inline-block;
		margin: 0.1rem 0 0 0;
	} .blogFilterContainer label:hover, .blogFilterContainer label:focus, .selAllNone label:hover, .selAllNone label:focus {
		background-color: #8eab93;
		border-radius: 20px;
		box-shadow: 0px 2px 6px rgba(0,0,0,0.2);
	} #getAllArticles {
		margin: 0 auto;
		width: 8rem;
	}

	.books {
		width: 85%;
	}.books .data-body img {
		float: left;
		max-width: 200px;
		margin: 0 1rem 1rem 0;
	} .books .data-body .details p {
		padding: 0.5rem 0 0 0;
	} .books .data-body .details::after {
		content: "";
		display: block;
		clear: both;
	} .books .data-body .details iframe {
		height: 75rem;
		width: 100%;
	}

	header .header-grid {
		display: grid;
		grid-template-rows: auto auto;
		padding: 1rem;
	}
	
	header .logo-row {
		display: grid;
		grid-template-columns: 1fr 1fr;
		height: 20rem;
	}
	
	.grid-item {
		padding: 0.5rem;
		border-radius: 4px;
	} .grid-item-border {
		height: 100%;
	} .grid-item .data-header {
		padding: 0.7rem 0.5rem 0.7rem 2rem;
		box-shadow: 0 0 5px 5px #343d2a;		/* Hunter Green */
	} .blog .grid-item .data-header {
		display: grid;
		grid-template-areas:
			"header date"
			"header author";
		grid-template-columns: auto 11rem;
	} .grid-item .data-header h1 {
		margin: 0 auto;
		padding: 0;
		font-size: 2rem;
		text-align: center;
	} .grid-item .data-header h2 {
		grid-area: header;
		margin: 0;
		padding: 0;
	} .grid-item .data-header h3 {
		grid-area: header;
		margin: 0 auto;
		padding: 0;
		text-align: center;
	} .grid-item .data-header h4 {
		grid-area: header;
		margin: 0;
		padding: 0;
	} .blog .grid-item .data-header .blogAuthor {
		grid-area: author;
		align-self: start;
		font-style: italic;
		margin: 0 1rem;
	} .blog .grid-item .data-header time {
		grid-area: date;
		align-self: end;
		margin: 0 1rem;
	} .blogArticle .grid-item .data-header {
		display: grid;
		grid-template-areas:
			"author date";
		grid-template-columns: 1fr 1fr;
	} .grid-item .data-body {
		padding: 0px 5px 15px 5px;
		margin: 1rem;
	} .grid-item .data-body .subtitle {
		text-overflow: ellipsis;
	} .grid-item .data-body img#greg {
		float: right;
		max-width: 300px;
		margin: 0 0 1rem 1rem;
	} .grid-item .details {
		padding: 0;
	} .long {
		grid-row: span 2;
	} .grid-item .video {
		display: flex;
		align-items: center;
	} .grid-item .details iframe, dl iframe {
		margin: 0 auto;
		width: 560px;
	}

/* ======= End CSS Responsive Card Display ====== */


/* ======= Styling used on all pages ======= */
			
	body{
		margin: 0;
		font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
		font-size:15px;
		line-height:1.5;
	}
	
	main {
		margin: 0 1rem;
	}

	h1,h2,h3,h4,h5,h6 {
		font-weight:400;
	} 

	.logo {
		justify-self: start;
	} .logo img {
		width: 50%;
	} .emptySpace {			/* empty space to the right of the logo */
	}
	
	img#yggdrasil {
		margin: 1rem auto;
	} div.details:has(> img#yggdrasil) {
		text-align: center;
	}
	
	.slideContainer {
		margin-top: 10px;
	} .dotContainer {
		margin-bottom: 35px;
	}
	
	.decorativePicture {
		width: 500px;
		border-radius: 4px;
		box-shadow: inset 0 0 5px 20px #f3f4ec;				/* Green Cream */
		margin: 20px auto;
	}
				
	p.indent {
		margin: 3%;
	}
	
	.disabled {
		cursor: not-allowed;
		opacity: 0.3;
	}
	
	.disabled:hover {
		box-shadow: none;
	}
	
	.shadowBorder {
		box-shadow: 0 2px 4px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12)!important;
	}
	
	.bold {
		font-weight: bold;
	} .italic {
		font-style: italic;
	} .underline {
		text-decoration: underline;
	} .strikeThrough {
		text-decoration: line-through;
	} .past {
		color: #edf5ed;			/* Gray */
	} .redBold {
		color: red;
		font-weight: bold;
	} .xSmall {
		font-size: 0.5em;
	}

	.noStyle {
		list-style-type: none;
	} ul.noStyle {
		margin-bottom: 12px;
	} ul.noStyle li.infoLink {
		display: flex;
		flex-shrink: 0;
		flex-grow: 0;
		width: 65%;
		margin-top: 20px;
	} ul.noStyle li.infoLink img {
		width: 30px;
		margin-right: 10px;
		text-align: center;
	} ul.noStyle li.infoLink a {
		text-align: left;
		text-decoration: none;
		padding-top: 3px;
	} ul.noStyle::after {
		clear: both;
	}
	
	div.twoColumns {
		display: flex;
		margin-top: 14px;
		height: 263px;
	} div.twoColumns ul {
		width: 50%;
		margin-top: 0;
	} div.twoColumns ul li {
		margin-bottom: 15px;
	}
	
	.infoLink {
		color: #f3f4ec;
		background: #343d2a;					/* Hunter Green */
		width: 90%;
		margin: 1rem 0.5rem;
		padding: 10px 15px;
		border-radius: 20px;
		text-decoration: none;
	} .infoLink:hover {
		border-radius: 20px;
		box-shadow: 0 0 5px 5px #343d2a;		/* Hunter Green */
	} .infoLink a {
		color: #edf5ed;
		text-decoration: none;		
	}
	
	footer {
		clear: both;
		margin: 20px 0 0 0;
		background-color: #343d2a;			/* Hunter Green */
		display: block;
		padding:0.01em 16px;
		border-radius: 4px;
		box-shadow: 0 0 5px 5px #343d2a;   /* blur the outside edges Hunter Green */
	} footer span.footerLogo {
		float: right;
		margin: 5px 16px 5px 0;
		background: #edf5ed;
		padding: 2px;
		border-radius: 10px;
	} footer object.footerLogo {
		height: 20px;
	} footer p.logoHeader {
		color: #434343;
		font-size: 10px;
		margin: 0 0 2px 0;
	} footer p.copyRight {
		margin: 16px 0;
		color: #f3f4ec;						/* Cream Green */
		text-align: center;
	}

/* ======= End Styling used on all pages ======= */

/* ==================== Menu =================== */

	#menu {
		overflow: visible;
		width: 80%;
		padding: 15px 0px;
		margin: 1rem auto 2rem auto;
		position: relative;
	} #menu ul {
		margin: 0;
		padding-right: 28px;
		list-style: none;
		line-height: normal;
		text-align: center;
	} #menu li {
		background: #343d2a;				/* Hunter Green */
		display: inline-block;
		margin: 0.5rem;
		border-radius: 20px;
	} #menu a {
		display: block;
		padding: 6px 15px;
		text-decoration: none;
		text-align: center;
		font-size: 16px;
		font-weight:400;
		color: #FFFFFF;
		border: none;
		border-radius: 20px;
	} #menu a:hover {
		font-weight: bolder;				/* light blue glow */
		box-shadow:0 8px 16px 0 rgba(115,149,220,0.2),0 6px 20px 0 rgba(115,149,220,0.19);
	} #menu a.disabled:hover {
		font-weight: normal;
	} #menu .payPalButton input {
		position: absolute;
		top: 9px;
		right: 38px;
		height: 37px;
		margin: 6px 15px;
		border-radius: 20px;
	} #menu .payPalButton input:hover {
		font-weight: bolder;				/* bright yellow glow */
		box-shadow:0 0 16px 10px rgba(247,247,1,0.2),0 0 20px 10px rgba(247,247,1,0.19);
	}

/* ================= End Menu ================== */


/* ================== Marquee ================== */
	.marquee {
		position: relative;
		overflow: hidden;
		height: 20px;
		margin: 0;
		padding: 0;
		padding-bottom: 1.5%
	} .marquee span {
		font-family: "Merriweather";
		color: #F7F701;						/* Yellow */
		font-size: larger;
		font-weight: bold;
		position: absolute;
		width: 100%;
		height: 100%;
		margin: 0;
		line-height: 40px;
		text-align: left;
		vertical-align: top;
		transform: translateX(100%);
		animation: scroll-left 25s linear infinite;
		animation-play-state: running;
	} .marquee span:hover {
		animation-play-state: paused;
	} .marquee span img {
		vertical-align: text-bottom;
	} @keyframes scroll-left {
		0% {
			transform: translateX(100%);
		}
		100% {
			transform: translateX(-100%);
		}
	}
/* ================ End Marquee ================ */