/* Defaults and basic layout settings */
* {
	font-family: Cairo,Times New Roman,Palatino,Arial
}

html {
	font-size:62.5%;
}

body {
	background-color: rgb(246,245,242); 
	color:rgb(122, 115, 115);
	text-align:center;
}

h1 {
	margin-bottom: unset;
}

.content-area {
	font-size:1.8rem;
}

.content-area-inner {
	display:flex;
	flex-direction: column;
	align-items: center;
	margin-left: auto;
	margin-right: auto;
}

.main-article {
	flex:1;
	display:flex;
	justify-content: center;
}

.recent-articles {
	flex:100;
}

/* Individual element configuration */

.website-title {
	font-weight:bold; font-size:4rem;
	color:rgb(46, 95, 194);
	padding-top:10rem;
	display:block;
}

.website-title-link, .main-article-link {
	text-decoration: none;
}

.website-introduction {
	font-size:2.5rem; 
	padding-bottom:2rem;
}

.article-image-panel {
	flex:1;
	border-radius: 2rem;
	border-color: red; 
	border-style: solid; 
	border-width:1px;
}

.article-summary-panel {
	border-radius: 10px;
    opacity: 0.8;
	color:rgb(122, 115, 115);
	margin-left: auto;
	margin-right: auto;
	text-align: left;
	padding-left: 5%;
	padding-right: 5%;
	padding-bottom:1rem;
	flex:1;
}

.mobile-article-summary-panel {
	display:none;
	border-radius: 10px;
    opacity: 0.8;
	color:rgb(122, 115, 115);
	margin-left: auto;
	margin-right: auto;
	text-align: left;
	padding-left: 5%;
	padding-right: 5%;
	padding-bottom:1rem;
	flex:1;
	background-color: white;
	opacity: 0.8;
}

.website-title, .article-title {
	color: rgb(46, 95, 194);
	font-weight: bold;
}

.article-title {
	font-size: 2.0rem;
	line-height: 3rem;
	padding-bottom: 1rem;
	display: block;
}

.article-posted-date {
	display:block;
}

.main-article-inner-panel {
	margin-left:auto;
	margin-right:auto;
	height:60rem;
	border-radius: 5rem;
}

/* Main article image */
.main-article .prominent-article-image {
	width:100%;
	border-radius: 50px;
	border-color: red; 
	border-style: solid; 
	border-width:1px;
}

.main-article .article-title {
	font-size: 3rem;
	padding-top: 2rem;
}

.main-article .article-summary-panel {
	background-color: white;
}

.article-category {
	padding-left: 2rem;
	padding-right: 2rem;
	border-radius: 5rem;
}

.article-category-faith {
	background-color: red;
	color:white;
}

.article-category-creation {
	background-color: white;
	color:blue;
}

.article-category-apologetics {
	background-color: #AED581;
	color:white;
}

.recent-articles-inner-panel {
	display:flex;
	flex-direction:column;
	align-items: center;
	margin-left:auto;
	margin-right:auto;
}

.recent-article {
	flex:2;
	width:100%;
}

.recent-article .article-image-panel {
	width: 100%;
	height:40rem;
}

.recent-article .article-title {
	font-size: 2rem;
}

.recent-article .article-heading-1 {
	font-weight: bold;
}

.recent-article-link {
	flex-direction: row;
	text-decoration: none;
	display: flex;
}



.recent-article .article-summary-panel {
	display:flex;
	flex-direction: column;
	justify-content: flex-start;
	text-align: left;
}

.recent-article .recent-article-image {
	border-radius:4rem;
	width:100%;
}

.recent-article .article-summary-panel .article-title,
.recent-article .article-summary-panel .article-posted-date, 
.recent-article .article-summary-panel .article-summary {
	display:block;
}

/* Full article */

.full-article {
    display:block;  
    /* width:100rem; */
    margin-left:auto; 
    margin-right: auto;
}

.full-article-inner-panel {
    display:block;
}

.full-article .article-title-panel {
	display:block;
	border-radius: 3rem;
	overflow-y: clip;
	padding-top: 30rem;
}

.full-article .article-title-panel .article-title-envelope {
	background-color: white;
	height: 12rem;
	opacity: 0.8;
}

.full-article .article-title-panel .article-title-envelope .article-title {
	font-size: 2.5rem;
	clear: both;
}

.full-article .article-category {
	position:relative;
	padding-left: 2rem;
	padding-right: 2rem;
	border-radius: 5rem;
}


/* In article styling */
.article-body {
	display:block;
	text-align:left;
}

.article-introduction {
	font-style: italic;
}

.article-heading-1 {
	font-weight:bold; 
	display:block; 
}

.article-heading-2 {
	font-weight:bold;
	font-style:italic; 
	display:block; 
}

.bulleted {display:list-item;list-style-type:disc; list-style-position:inside}

.bulleted b {padding-right:10px}

.footnote {font-family:"Crimson Text"}

.quotation {color:red}

/* Responsive references */
.responsive-reference {
	position:relative; 
	top:-5px; 
	font-size: 1.2rem; 
	font-weight: bold; 
	text-decoration: underline ; 
	color:blue;
}

.responsive-panel {
	position:absolute;
	right:-50px;
	top:-40px;
	display: none;
	text-align: center;
	border-style:solid; 
	border-width: 2px; 
	border-radius: 5px; 
	border-color:blue; 
	z-index:10; 
	opacity:1; 
	background-color: white; 
	color: blue; 
	font-family: "Crimson Text";
	white-space: nowrap;
}

.responsive-reference:hover .responsive-panel {display:inline-block; cursor: pointer;}

/* Burger menus */

.burger-icon {width:30px;height:30px; background-image: url('Images/Burger2.png'); background-repeat: no-repeat; background-size: contain;}

.burger-icon:hover {cursor: pointer; background-color: rgb(122, 115, 115);}

.burger-icon {position:absolute;top:50px;right:20%;}

.burger-envelope .burger-menu:not(.show) {
	display:none;
}

.burger-envelope .burger-menu.show {
	display:block;
}


.burger-menu {
	background-color: white ;
	border-color: red;
	border-style: solid;
	border-width: 2px;
	border-radius: 50px;
	padding-left: 50px;
	padding-right: 50px;
}

.burger-menu-title {
	font-weight: bold;
	display: block;
	margin-top: 20px;
	margin-bottom: 20px;
	color: rgb(46,95,194);
}

.burger-signatureandloc {display:block}

.burger-signatureandloc {
	text-align:left;
	padding-left: 50%;
}

.burger-signatureandloc .location {padding-left:20px}

.burger-signatureandloc .signature {
	font-family: 'Qwigley',cursive;
	font-weight: bold;
}

.burger-signatureandloc .location {
	font-weight: bold;
}

body.showburgerpopup .close-burger-menu {
	display:block;
	color: red;
	text-align: center;
	border-style: none;
	border-color: darkgrey;
}

body.showburgerpopup .close-burger-menu:hover {
	background-color: darkgrey;
	cursor: pointer;
}

.homepage-link {
	text-decoration: none;
}

.homepage-button {
	display:block;
	border-style: solid;
	border-color: rgb(46,95,194) ;
	border-radius: 10rem;
	color:rgb(46, 95, 194);
	padding-left: 5rem;
	padding-right: 5rem;
	font-size: 3rem;
	margin-top: 5rem;
}

.homepage-link:hover .homepage-button {
	background-color: rgb(46, 95, 194);
	color: white;
}

.previous-and-next {
    display:grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 5rem;
}

.nextpage-link, .previouspage-link {
	text-decoration: none;
}

.nextpage-button, .previouspage-button {
	display:block;
	border-style: solid;
	border-color: rgb(46,95,194) ;
	border-radius: 10rem;
	color:rgb(46, 95, 194);
	padding-left: 5rem;
	padding-right: 5rem;
	font-size: 3rem;
	margin-top: 5rem;
}

.nextpage-link:hover .nextpage-button, 
.previouspage-link:hover .previouspage-button {
	background-color: rgb(46, 95, 194);
	color: white;
}

/* 

*** Size related styling from here ***

*/

.content-area {
	width: 100%;
	font-size: 1.8rem;
}

.content-area-inner {
	width: 80%;
	margin-left:auto;
	margin-right:auto;
	padding-bottom:50px;
}

body.articlepage .content-area-inner {
	width:60%;
}

.article-heading-1 {
	font-size:2rem; 
	margin-top:2rem; 
	margin-bottom: 2rem
}

.main-article {
	width:80%;
	display:block;  
	margin-left:auto; 
	margin-right: auto;
}

.main-article .prominent-article-image {
	width:100%;
}

	.main-article .article-summary-panel {
		position: relative;
		top: 35rem;
		width: 70%;
	}

	.main-article .article-category {
		position: relative;
		top: 3rem;
		float:right;
		margin-right: 4rem;
	}

	.recent-articles {
		width:80%;
		text-align: inherit;
		margin-left:auto; 
		margin-right: auto;
	}

	
	
	.recent-article {
		margin-top: 5rem;
	}

	.recent-article .article-title {
		padding-top: 2rem;;
	}
	
	.recent-article .article-posted-date {
		font-size: 1.5rem;
		line-height: 1.8rem;
	}

	.recent-article .article-category {
		position: relative;
		top: 2rem;
		float: right;
		margin-right:2rem;
	}
	

	.full-article {
		width: 100%;
		font-size: 2rem;
		margin-bottom: 5rem;
	}

	.full-article-inner-panel {
		width:100%;
	}

	.full-article .article-title-panel {
		width: 100%;
	}

	.full-article .article-category {
		float:right;
		margin-right: 2rem;
		top:-27rem;

	}


	.full-article .article-body {
		width:100%;
		padding-top:5rem;
	}

	.responsive-panel {
		padding:5px; 
		font-size: 2rem;
	}

	.burger-envelope {
		width: 100%;
		position: absolute;
		z-index: 10;
		font-size: 2.5rem;
	}

	.burger-menu {
		width: 60%;
		margin-left: auto;
		margin-right: auto;
		margin-top: 10rem;
	}

	.burger-icon {position:absolute;top:2rem;right:20%;}

	body.showburgerpopup .close-burger-menu {
		float: right;
		position: relative;
		top: 2rem;
	}


	.burger-signatureandloc .signature {
		font-size: 3rem;
	}

	.burger-signatureandloc .location {
		font-size: 1.8rem;
	}

	body.showburgerpopup .close-burger-menu {
		font-size: 2.5rem;
		width: 3rem;
		height: 3rem;
		line-height: 3rem;
		border-width: 2px;
		border-radius: 1.5rem;
	}

@media screen and (max-width: 1024px), screen and (max-device-width: 1024px) and (orientation : portrait) {
	.content-area-inner {
		width: 90%!important;
	}

	.recent-article {
		font-size: 1.5rem;
	}

	.recent-article-image, .recent-article-image-placeholder {
		width: 52%;
	}

	.recent-article .article-summary-panel {
		padding-left: 4%;
	}

	.recent-article .article-title {
		padding-top: 1rem;
	}

	.article-heading-1 {
		margin-top:1rem; 
		margin-bottom: 1rem
	}

	.recent-article .article-summary-panel {
		display:none;
	}

	.recent-article .mobile-article-summary-panel {
		display:block;
		position: relative;
		top:15rem;
		width:70%;
	}
}

@media screen and (max-width: 768px), screen and (max-device-width: 768px) and (orientation : portrait) {

	.content-area-inner {
		width: 96%!important;
	}

	.main-article {
		margin-bottom: 50px;
	}

	.main-article .article-summary {
		display:none;
	}

	
	.recent-article {
		text-align: center;
	}

	.recent-article-image, .recent-article-image-placeholder {
		width: 100%;
		background-color: white;
		border-color: red;
		border-style: solid;
		border-width: 1px;
		border-radius: 50px;
	}

	.recent-article .article-summary-panel {
		position: relative;
		background-color: white;
		top: -20rem;
		width: 60%;
		padding-left: 5%;
		padding-right: 5%;
		text-align: center;
	}

	.main-article .article-title, .recent-article .article-title {
		font-size: 3.2rem;
	}

	.main-article .article-posted-date, .recent-article .article-posted-date {
		font-size: 2rem;
		padding-bottom: 2rem;
	}



	.recent-article .article-summary {
		display: none;
	}

	.article-introduction {
		text-align: center;
	}

	.burger-menu {
		width: 96%;
	}

	.burger-icon {right:10%;}

}

@media screen and (max-width: 450px), screen and (max-device-width: 450px) and (orientation : portrait) {

	html {
		font-size:100%;
	}

	.recent-article {
		text-align: center;
	}

	.full-article .article-title-panel {
		width: 100%;
	}

}