@charset "utf-8";
/* CSS Document */
/**************************************
 Filename: michalahS.css
 Author: Laurie Callahan
 Create Date: 06 November 2025
 Purpose: Provide styling for the SoulfulJourneys.biz website
 MODIFICATION DATE:
 19 November 2025 (LJC)
**************************************/

/* ============= Special Fonts ============ */
	
	@font-face {
		font-family: 'Material Icons';
		font-style: normal;
		font-weight: 400;
		src: url(https://fonts.gstatic.com/s/materialicons/v80/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format('woff2');
	} .icons {
		font-family: 'Material Icons';
		font-weight: normal;
		font-style: normal;
		font-size: normal;
		line-height: 1;
		color: black;
		letter-spacing: normal;
		text-transform: none;
		display: inline-block;
		white-space: nowrap;
		word-wrap: normal;
		direction: ltr;		
	}
	
	@font-face {
		font-family: harrington;
		font-weight: 600;
		letter-spacing: 1px;
		src: url("../fonts/HarringtonPlain001001-vv54.tff") format("tff");
	}
	
	@font-face {
		font-family: pinyonScript;
		font-weight: 600;
		letter-spacing: 1px;
		src: url("../fonts/Pinyon-Script.ttf.woff") format("woff");
	}
	
/* =========== End Special Fonts ========== */

/* ======= Colors used on all pages ======= */

	.headerBackground {
		color: #000000;							/* black */
		background-color: #FFFFFF;				/* White */
	}
	
	.pageBackground {
		color: #000000;							/* black */
		background-color: #FFFFFF;				/* White */
	}

/* ======= End Colors used on all pages ======= */

/* ======= Styling used on all pages ======= */

	
	body {
		margin: 0;
		padding: 0;
		font-family: "Times New Roman", Times, serif;
		font-style: normal;
		font-size: 15px;
		color: #000000;
		background: #F9E0F4;		/* #F1FAB9 - pale green */  /* #DEF6F1 - blue   #f9e0f4 - pink  */
	}

	h1,h2,h3,h4,h5,h6 {
		font-family: "Times New Roman", Times, serif;
		margin: 0;
		padding: 0;
		font-weight: normal;
		color: #000000;
	}

	h1 {
		font-size: 2.4em;
	} h2 {
		font-size: 2em;
	} h3 {
		font-size: 1.6em;
	}

	p {
		margin-top: 0;
		line-height: 120%;
	}

	a {
		text-decoration: underline;
		color: #000000;
	}
	
	/* mobile device (small screen) */
	@media screen and (max-width:1205px) {
		.calendlyButton {
			font-size: 40px;
			width: 500px;
		}
	}

	/* full-sized screen */
	@media screen and (min-width:1206px) {
		.calendlyButton {
			font-size: 20px;
			width: 200px;
		}
	}

	#logo {
		width: 960px;
		height: 150px;
		margin: 0px auto 30px auto;
		color: #000000;
	} #logo h1 {
		margin: 0;
		padding: 0;
		line-height: 150px;
		letter-spacing: 1px;
		text-align: center;
		font-size: 5em;
		font-style: italic;
	}
		
	.businessCard {
		width: 800px;
		margin: 50px auto;
		display: grid;
		grid-auto-flow: column;
		border: 5px solid #494B3D;
		border-radius: 50px;
		grid-template-rows: 10px 10px 60px 84px 40px 65px 107px;
		grid-template-columns:  364px auto 64px;
		grid-template-areas:
			'Michalah sj space'
			'Michalah sj space'
			'Michalah signature space'
			'Michalah phone space'
			'Michalah phone space'
			'Michalah url space'
			'Michalah logo space';
		
	} .Michalah {
		grid-area: Michalah;
	} .Michalah > img {
		width: 300px;
		border-radius: 45px;
	} .sj {
		font-family: harrington;
		font-size: 39px;
		text-align: center;
	} .space {
		height: 10px;
	} .phone {
		grid-area: phone;
		height: 85px;
		border: 2px solid #494B3D;
		border-radius: 20px;
		padding: 10px 3px 0 3px;
		text-align: center;
		font-size: 25px;
	} .phone .icons, .url .icons {
		position: relative;
		top: 3px;
	} .url {
		grid-area: url;
		font-size: 20px;
		padding-left: 20px;
	} .url .linkText {
		position: relative;
		bottom: 1px;
	} .url a {
		text-decoration: none;
	} .logo {
		grid-area: logo;
		padding-left: 112px;
	} .signature {
		font-size: 30px;
		text-align: center;
	}
	
	.calendlyButton {
		line-height: normal;
		text-align: center;
		background: #000000;
		border-radius: 25px;
		position: fixed;
		top: 10px;
		right: 50px;
		padding: 14px 15px 15px 15px;
	} .calendlyButton:hover {
		box-shadow: 0px 0px 15px 10px #FFFFFF;
	} .calendlyButton a {
		color: #FFFFFF;
		font-weight: bold;
		text-decoration: none;
	} .calendlyButton a:hover {
		text-decoration: none;
	}

	#skills {
		width: 600px;
		margin: 30px auto 10px auto;
		padding: 10px 0px;
		border-top: 1px solid #000000;
		border-bottom: 1px solid #000000;
		color: #000000;
		font-family: "Times New Roman", Times, serif;
		font-size: 39px;
		font-weight: bold;
		letter-spacing: 1px;
	} #skills ul.leaf li {
		margin-bottom: 2%;
	} #skills ul.leaf li:hover {
		border-radius: 20px;
		box-shadow: 0 0 5px 5px #494B3D;   		/* blur the outside edges */
	} #skills ul.leaf li a{
		text-decoration: none;
	}
	
	.lAlign {
		float: left;
	}
	
	.title {
		grid-area: title;
		font-size: 25px;
		font-weight: bold;
	}
	.title2 { 
		grid-area: title2; 
		text-align: center;
		font-size: 25px;
		font-weight: bold;
	}
	.title3 {
		grid-area: title3;
		font-size: 25px;
		font-weight: bold;
	} .desc3 { 
		grid-area: desc3;
		font-size: 20px;
		margin-left: 3%;
	}
	.desc { 
		grid-area: desc;
		font-size: 20px;
		margin-left: 3%;
	} .desc h4 {
		font-family: Calibri;
		font-size: 20px;
		font-weight: bold;		
	}
	
	.cost { 
		grid-area: cost;
		font-size: 20px;
	}
	.vLine {
		grid-area: vLine;
		background: #494B3D;
		width: 5px;
	}
	.hLine {
		grid-area: hLine;
		background: #494B3D;
		height: 5px;
		margin-bottom: 5px;
	}
		
	.healingGrid {
		display: grid;
		grid-auto-flow: column;
		border: 5px solid #494B3D;
		padding: 10px;
		grid-template-areas:
			'title title title vLine title2'
			'desc desc desc vLine cost';
		margin-bottom: 5px;
	}
		
	ul.leaf {
		padding-left: 25px;
		padding-right: 10px;
	} .leaf li {
		margin-bottom: 1%;
		
	} .leaf li span.stage {
		font-family: "Times New Roman", Times, serif;
		font-size: 25px;
		margin: 0 1%;
	} ul.leaf li::marker {
		content: "\2619  ";
		color: #494B3D;
	}
	
	.tabs {
		margin-bottom: 3%;
	}

	main {
		overflow: hidden;
		width: 940px;
		margin: 0px auto;
		padding: 30px 30px;
	} main article {
		float: left;
		width: 900px;
		padding: 10px 20px;
		border: 5px solid #494B3D;
	} main article h3 {
		font-size: 25px;
		font-weight: bold;
		margin-top: 2%;
	} main article h4 {
		font-family: Calibri;
		font-size: 22px;
		margin-left: 3%;
		font-weight: bold;
	} main article p {
		font-size: 20px;
		margin-left: 3%;
	}
	
	a:hover {
		text-decoration: underline;
	}
	
	address {
		font-style: normal;
	}

	.pageContent {
		padding:4px 16px;		/* Provides a border around page content */
	}
	
	.contentPadding {
		padding: 2%;
		padding-right: 4%;
	}
	
	.headerIndent {
		text-align: left;
		margin-left:30px;
	}
		
	p.indent {
		margin-left: 10%;
		font-size: inherit;
	}
	
	.doubleSpace li {
		margin: 2%;
	}
	
	.headerText {
		font-weight: bold;
	}
	
	.centerText {
		text-align: center!important;
	}
	
	.leftText {
		text-align: left;
	}
	
	.border1 {
		border: 1px solid black;
	}
	
	.menuButton {
		display:inline-block;
		padding:6px 16px;
		vertical-align:middle;
		text-align:center;
		text-decoration:none!important;
		white-space:nowrap;
		overflow:hidden;
		cursor:pointer;
	}
	
	.menuButton:hover {
		box-shadow:0 8px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
	}
		
	.disabled {
		opacity: 0.5;
	}
	
	.disabled:hover {
		box-shadow: none;
		font-weight: normal!important;
		cursor: not-allowed;
		pointer-events: none;
	}
	
	/* Menu */
	
	#menu {
		overflow: visible;
		width: 500px;
		padding: 15px 0px;
		margin: 0px auto 30px auto;
		position: relative;
		background: #494B3D;
	} #menu ul {
		margin: 0;
		padding-right: 28px;
		list-style: none;
		line-height: normal;
		text-align: center;
	} #menu li {
		background: #F9E0F4;		/* pink */
		display: inline-block;
		margin-right: 13px;
		border-radius: 20px;
	} #menu a {
		display: block;
		padding: 6px 15px;
		text-decoration: none;
		text-align: center;
		font-family: "Times New Roman", Times, serif;
		font-size: 25px;
		font-weight:400;
		color: #000000;
		border: none;
		border-radius: 20px;
	} #menu a:hover {
		font-weight: bolder;
		box-shadow: 0px 0px 15px 10px #FFFFFF;
	} #menu a.disabled:hover {
		font-weight: normal;
		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;
	} .underline {
		text-decoration: underline;
	} .italic {
		font-style: italic;
	} .strikeThrough {
		text-decoration: line-through;
	} .past {
		color: #919191;			/* Gray */
	} .redBold {
		color: red;
		font-weight: bold;
	} .xSmall {
		font-size: smaller;
	}

	
	.importantText {
		font-size: 20px;
		font-weight: bold;
	}
	
	.infoList h4 {
		margin-bottom: 0;
	} .infoList p {
		margin-top: 0;
		margin-bottom: 0;
		margin-left: 5%;
		margin-right: 2%;
	}
	
	header {
		width: 940px;
		height: 50px;
		margin: 0 auto;
	}
	
	footer {
		clear: both;
		margin-top: 30px;
		display: block;
		color: #FFFFFF;
		background-color: #494B3D;
	} footer span.footerLogo {
		float: right;
		margin: 5px 16px 5px 0;
		background: #FFFFFF;
		padding: 2px;
		border-radius: 10px;
	} footer object.footerLogo {
		height: 20px;
	} footer p.logoHeader {
		color: #494B3D;
		font-size: 12px;
		margin: 0 0 2px 0;
	} footer p.copyRight {
		color: #FFFFFF;
		margin: 16px 0;
		text-align: center;
	}
	
/* ======= End Styling used on all pages ======= */
