/*********  STYLE SHEET  **************/
/***  local hosted fonts  ***/
@font-face {
  font-family: Eurostile;
  src: url("_fonts/eurostile.woff") format(woff),
   url("_fonts/eurostile.woff2") format(woff2),
	url("_fonts/eurostile.ttf") format(truetype),
	url("_fonts/eurostile.otf") format(opentype)
   ;}

@font-face {
  font-family: EurostileOblique;
  src: url("_fonts/eurostile-oblique.woff") format(woff),
  url("_fonts/eurostile-oblique.woff2") format(woff2),
  url("_fonts/eurostile-oblique.ttf") format(truetype),
  url("_fonts/eurostile-oblique.otf") format(opentype)
  ;}
  
@font-face {
  font-family: EurostileBold;
  src: url("_fonts/eurostile-bold.woff") format(woff),
  	url("_fonts/eurostile-bold.woff2") format(woff2),
	url("_fonts/eurostile-bold.ttf") format(truetype),
    url("_fonts/eurostile-bold.otf") format(opentype)
 ;}

@font-face {
  font-family: EurostileBoldOblique;
  src: url("_fonts/eurostile-bold-oblique.woff") format(woff),
  	url("_fonts/eurostile-bold-oblique.woff2") format(woff2),
  	url("_fonts/eurostile-bold-oblique.ttf") format(truetype),
  	url("_fonts/eurostile-bold-oblique.otf") format(opentype)
  ;}
  
  
@font-face {
	font-family: MysteryQuest;
	src: url("_fonts/MysteryQuest-Regular.woff") format(woff),
		url("_fonts/MysteryQuest-Regular.woff2") format(woff2),
		url("_fonts/MysteryQuest-Regular.ttf") format(truetype),
		url("_fonts/MysteryQuest-Regular.otf") format(opentype)
	;}
	
/********** for Stars use  ✻  */


/* **** START MAIN CSS     ***** */	
  
:root {
	--pink: #e808f7;
	--ltteal: #B1CACF;
    --teal: #3a85ae; 
}

/* reset browser */	
* {
	margin:0;
	padding:0;
	font-family:  Eurostile,"Helvetica Neue", verdana, helvetica, sans-serif;
	font-weight: 400;
	letter-spacing: .09rem;
	box-sizing: border-box;
	
}


/* **** START MAIN CSS STRUCTURE    ***** */	
#flex-layout-parent {display:flex;}	

/* header positioning and styles */

header {  }
/***  fancy wavy box - Source https://css-generators.com/wavy-shapes/ ***/



header h1, header h2 {
	padding-top: 2rem;	
	padding-left: 1rem;

}

header h1{
	color: var(--teal);

	font-weight:300;
	font-size: 3rem;
	padding-bottom: 1.5rem;
}

header h2{
	padding-bottom: .4rem;
	font-size: 95%;
	letter-spacing:.2em;
	color: var(--teal);
	background-color:rgba(255,255,255,.9);
	font-weight: 600;
	}
	
	

h2 {
	font-size: 1.75rem;
	font-weight:500;
	padding-top: 1.5rem;
		line-height: 1.25rem; 
		color:var(--teal);
		font-weight: 600;		
	
} 

h3 {font-size: 1.35rem;
		line-height: 1.25rem; 
		color: var(--teal);

		font-weight: 600;
		
} 




/* MAIN BLOCK & STRUCTURE STYLES */
	body {background-color: var(--teal);
		padding-top: 2rem;
		border-radius: 2rem;
		line-height: 1.5rem;
		background-image: url("../_images/18x18x72_Iridology-bg-tile.jpg"); background-position: left top; background-size: auto; background-repeat: repeat; background-attachment: scroll; 
	}
	 main {width:90%;
		 margin-left: auto;
		 margin-right: auto;
		 background-color: #f0f0f0;
		border-radius: 1rem;
		
	 }
	
	article { padding-bottom: 1rem;
	 border: #333333 solid 1px;
	 }
	 
	 .flex-article {
		 /* line between old nav and content border-left: 1px #f1f1f1 solid; */
		 padding-left: 1rem;
	 }
	
	p {padding: 1rem;}
	
	p, ol,ul {font-size: 1.2rem;}
	



/*  Bullet Points and List Styles    */

ol, ul {padding-left: 3rem;
	margin-right: 4rem;
	
}

ul {list-style: none; }

/* Default bullets style erased */
/* Bullet point parent */


ul.uses li::before {

	/* Unicode for a Sparkle bullet - pre text */
	content: "\273B";
	 
	/* Styles for Indentation*/
    color: var(--teal);
	display: inline-block;
	width: 1.5rem;
	font-size: 1.3rem;
	font-weight: 500;
	background-attachment: scroll;
	vertical-align: middle;
	margin-right:0;
}

/* for Uses List, post text icon */
.uses-sparkle {
	vertical-align: middle;
	width: 2.2rem;
	padding-left: .6rem;
	color: var(--teal);
	font-size: 1.3rem;
	font-weight: 500;
}



ul.uses {
	display:flex; 
	justify-content: space-around;
	padding-top: 1rem;
	padding-bottom: 1rem;

}

ul.uses li {
	padding-top: 1rem;
	padding-bottom: 1rem;
	color: white;
	font-size: 1.1rem;
	font-family: EurostileBold,"Helvetica Neue", verdana, helvetica, sans-serif;
	flex-wrap: wrap;
	font-weight: normal;
	
}




figure {padding: 1rem; 
	border: 1px solid var(--teal);
	margin-left: 2rem;
	margin-bottom: 1rem;
}
figure.align-right {width:340px;margin-right:2rem;}
figure.pad-top {margin-top: 1.5rem;}



/***  CHARACTER STYLES   ***/

b, b.text {color:#444444;
	font-family: EurostileBold;
}
b.head {color:var(--teal);
	font-family: EurostileBold;
}
i {font-family: EurostileOblique;}

b i {font-family: EurostileBoldOblique;}

.small80 {font-size: 85%;}


.ltpink {color: var(--ltteal);}
.green {color: var(--teal);}

.align-right {float: right;}
.align-left {float: left;}

.center { display: block;
	  margin-left: auto;
	  margin-right: auto;
}
.padding_bottom {padding-bottom: 1rem;}


/* link styles */
a:link {color: var(--teal);
	font-family: EurostileBold;
	text-decoration:underline;
}
a:visited{color: #5c667e; }
a:hover{color:#8a9ec0;}
a:active{color: var(--pink);}



footer {
	display: flex;
	background-color:var(--ltteal);
	padding-top: .5em;
	padding-bottom: .5em;	
	border-radius: 0 0 1rem 1rem;
	color: var(--teal);
}






/* ********LARGE SCREENS ********* > 810px
media query stacks uses on small screens */
@media (min-width: 811px) {
 ul.uses li {
  font-size: 1.4rem;	
  }
.uses-sparkle {display: none;
		padding:0;
}
	header img {
width:450px;
height: 113px; />	
}


/** end large screen media query */
}
/* ***** END Large SCREEN     ****** */

	


/* CHATGPT - Media query for ******** MEDIUM SCREENS ********* < 810px
media query stacks uses on smaller screens */
@media (max-width: 810px) {
  ul.uses {

	flex-direction: column;
	align-items: center;
	
  }
  ul.uses li {padding-top: 0;
			  padding-bottom: 0;
			  font-size: 1.4rem;	
			  
  }
  
  h2 {padding: 4rem 0 1rem 0;
	  overflow: wrap;
	  text-align:center;
  }
  h3 {padding: 4rem 0 1rem 0;
	  overflow: wrap;
	  text-align:center;
  }
  
/**  try to get video to shrink for small screens ***/
#WearBunBling_ap {width: 360px; height: 360px;}

  
  /* adjust figure for small screens, center, fill out 'row'  */
 figure.align-right {
	  float: none; /* Remove the float on small screens */
	  width: 80%; /* Make the figure take up the full width of the container */
	  margin: 2rem auto 0; /* Center the figure horizontally */
	}
/* ***** END MEDIUM SCREEN     ****** */	
}



/****** kp adjusted for smallest screens  ********/
@media (max-width: 430px) {

body {
	border-radius: 1rem;	

}
 
.box {  border-radius: 1rem;}

 main {width:100%;
	border-radius: 1rem;
 }
	
h2 {padding: 4rem 0 1rem 0;
	overflow: wrap;
	text-align:center;
}
h3 {padding: 4rem 0 1rem 0;
	overflow: wrap;
	text-align:center;
}

p {padding: 1rem 0;
	margin-right: 2rem;
}	
/** bad practice - but redefining this class to center images instead of some better way. lol 093023        **/
figure.align-right {
	display: block;
	  margin-left: auto;
	  margin-right: auto;
	  max-width: 90%;
}

/**  try to get video to shrink for small & smallest screens ***/
#WearBunBling_ap {width: 360px; height: 360px;}

footer {
	padding: .5em 0 .5em 1em;	
	border-radius: 1rem;
}


  /* adjust figure for smallest screens, center, fill out 'row' dupe from medium screens above */
 figure.align-right {
	  float: none; /* Remove the float on small screens */
	  width: 80%; /* Make the figure take up the full width of the container */
	  margin: 2rem auto 0; /* Center the figure horizontally */
	}
	/******** end smallest screen changes ******/	
	}