root: {  
--text-color: DarkBlue;
  --back-color: Azure;
  }

/*@media (prefers-dark-interface) {  
	root: 
	{   
	--text-color: Azure;
	   --back-color: DarkBlue;  
	} 
}*/

body 
{
  font-family: Arial, Helvetica, sans-serif;
  background-color: white;
  color: darkgray;
}
a{
border-radius:25px;
text-decoration: none;
}
.navigationbutton
{
color:white;
}
.popupmenu
{
background-color:white;
}
.popupitem
{
color:darkgray;
}
.message
{
border-radius:15px;
 margin:5px;
 border: 1px solid #00CFFF;
}

h1{
/*font-family: Cursive, Fantasy;*/
font-family: Arial, Helvetica, sans-serif;
font-size:4vw;
color: white;
font-weight:bolder;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: #00CFFF;
text-shadow: 0px 0px 0vw white,0px 0px 2vw white,0px 0px 0vw white,0px 0px 0vw #553300,0px 0px 0vw #553300;
text-decoration: none;
}
h6/**Secondary text on Banner**/
{
font-family: Arial, Helvetica, sans-serif;
font-size:2vw;
color: white;
font-weight:bolder;
text-shadow: 0px 0px 0vw white,0px 0px 1vw white,0px 0px 0vw white,0px 0px 0vw #553300,0px 0px 0vw #553300;
-webkit-text-stroke-width: 0.1vw;
-webkit-text-stroke-color: #FFFFFF;
}

h4/**Titles for web pages**/
{
font-family: Arial, Helvetica, sans-serif;
font-size:14pt;
color: #AAAAAA;
font-weight:bolder;
/**-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: gray;**/
/*text-shadow: 0px 0px 0vw #00CFFF,0px 0px 1vw #00CFFF,0px 0px 0vw white,0px 0px 0vw #00CFFF,0px 0px 0vw #00CFFF;*/
}

@media (prefers-color-scheme: dark) 
{
	root: 
	{   
	--text-color: Azure;
	--back-color: DarkBlue;  
	} 
	body { 
	color: white;
 	background-color:black;
 	}
 	a{
	color:white;
	}
	.navigationbutton
	{
	color:black;
	}
	.popupmenu
	{
	background-color:black;
	}
	.popupitem
	{
	color:darkgray;
	}
	.footer, .main
	{
	background-color:black;
	}
	.message
	{
	color:white;
	border: 1px solid #00CFFF;
	}
	
	h1
	{
	color: black;
	text-shadow: 0px 0px 0vw black,0px 0px 2vw black,0px 0px 0vw black,0px 0px 0vw #000000,0px 0px 0vw #000000;
	}
	h6
	{
	color: black;
	text-shadow: 0px 0px 0vw black,0px 0px 1vw black,0px 0px 0vw black,0px 0px 0vw #000000,0px 0px 0vw #000000;
	-webkit-text-stroke-color: #000000;
	}
	h4/**Titles for web pages**/
	{
	color: #FFFFFF;
	/*-webkit-text-stroke-width: 1px;
	-webkit-text-stroke-color: white;*/
	/*text-shadow: 0px 0px 0vw #00CFFF,0px 0px 1vw #00CFFF,0px 0px 0vw white,0px 0px 0vw #00CFFF,0px 0px 0vw #00CFFF;*/
	}

}







/*body { 
color: var(--text-color);
 background: var(--back-color)
 }*/



h2{/*** For titles of Blue Book Messages**/
font-family: Arial, Helvetica, sans-serif;
font-size:13pt;
color: #00CFFF;
font-weight:bolder;
text-shadow: 0px 0px 0vw white,0px 0px 2vw white,0px 0px 0vw white,0px 0px 0vw #553300,0px 0px 0vw #553300;
}

h3{
font-family: Arial, Helvetica, sans-serif;
font-size:2vw;
color: #00CFFF;
font-weight:bolder;
/*-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: gray;*/
}

h5{/*For secondary Title*/
font-family: Arial, Helvetica, sans-serif;
font-size:12pt;
font-weight:bolder;
/*text-shadow: 0px 0px 0vw white,0px 0px 2vw white,0px 0px 0vw white,0px 0px 0vw #553300,0px 0px 0vw #553300;*/
}






.blessedmotherlogo
{
	border-radius: 15px;
	display:inline-block;
	width: 100%;
	max-width:155px;
	max-height:205px;
	/*min-height:75px;
	max-width:150px;
  	max-height:228px;*/
	height:auto;
}

b
{
text-align:left!important;
display: inline-block;

}

blockquote
{
text-align:left!important;
display: inline-block;

}
p
{
text-align:left!important;
display: inline-block;

}
ol
{
text-align:left!important;
display: inline-block;

}
.footnote
{
text-align:left!important;
font-size:10px;
}
.sacredheartimage
{
	text-align:left!important;
	display:block;
	width: 20%;
  	max-width: 200px;
  	height: auto;
	margin-left: auto;
  	margin-right: auto;
	border-radius:10px;
}
.bookcover
{
	text-align:left!important;
	width: 25%;
  	height: auto;
	margin-left: 5px;
  	margin-right: 5px;
	border-radius:10px;
}
.bluebookcover
{
	text-align:left!important;
	width: 100%;
  	height: auto;
	margin-left: 5px;
  	margin-right: 5px;
	border-radius:10px;
}
.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

.footer, .main{
font-family: Arial, Helvetica, sans-serif;
/*color: gray;*/
/*background-color:white;*/
border: 2px solid #00CFFF;
border-radius:25px;
width:95%;
margin:5px;
}

.jesus
{
border-radius:15px;
 margin:5px;
}
.rita
{
border-radius:15px;
 margin:5px;
}
.bibleverse
{
font-weight:bolder;
color: #00CFFF;
}
.biblequote
{
text-align:left!important;
font-weight:bolder;
color: #00CFFF;
}
.misconception
{
padding:5px;
}

.demons
{
padding:5px;
}
.mercyquote
{
font-weight:bold;
padding:5px;
}