/*
      _                                      
  ___| |_ __ _ _ __  __      ____ _ _ __ ___ 
 / __| __/ _` | '__| \ \ /\ / / _` | '__/ __|
 \__ \ || (_| | |     \ V  V / (_| | |  \__ \
 |___/\__\__,_|_|      \_/\_/ \__,_|_|  |___/
 
*/
@import url('https://pro.fontawesome.com/releases/v5.14.0/css/all.css');

:root {
	--blue:			#0090ff;
	--gray: 		#dddddd;
	--black:		#000000;
	--white:		#ffffff;
	--yellow:		#ffd155;
	--shadowbox: 0px 5px 5px rgba(0,0,0, 0.2);
} 
	
body { color: #000000; --font-family: arial, helvetica, sans-serif; background-image: url('img/bg.gif'); background-color: rgb(226, 203, 177); }
header.m-5 	{ margin-top: 200px !important; }
footer			{ border-top: 1px solid #000; margin-top: 1em; padding-top: 1em; }
h1, h2, h3, h4		{ font-family: sans-serif; font-weight: bold; --font-size: 1.0rem; } 
hr 					{ border-top: 1px solid rgba(0, 0, 0, .7); }

nav .row { background-image: url('/img/but-bg.png'); background-repeat: repeat-x; background-size: contain; }
nav .row .but-1 { padding: 0px; }
nav .row .but-1 img { width: 33.33%; }

content { }		
content article img { max-width: 100%; border-radius: 5px; } 
content article.post { margin-bottom: 2em; }

content a:hover img { filter: brightness(0.6); }

/*
content article.post .post-image-2 {
	border-radius: 10px 0px 0px 2px; corner-shape: bevel; 
	width: 100%;
	height: 100px;
  overflow: hidden; 
  border-top: 5px ridge #8dacb8;
  border-left: 14px ridge #8dacb8;
  border-bottom: 5px ridge #8dacb8;
}
content article.post .post-image-2 img {
	width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
*/
content article.post .post-image {
	--width: 40%;
	display: inline-block;
	float: left;
	padding: 0 1em 0.5em 0;
}
content article.post .post-image img {
	border-radius: 6px;
	border: 2px solid #fff;
	min-width: 100%;
	min-height: 8em;
	object-fit: cover;
	object-position: center;
	background: #ddd url('/img/image-replacer.jpg');
	background-size: cover;
	background-position: center; 
}
content .video-wrapper { border: 3px solid #fff; border-radius: 10px; }
content .video-wrapper iframe { border-radius: 7px; }
content iframe { max-width: 100%; }

.pagination-header				{ font-size: 1.5rem; font-weight: 600; }
.pagination-header .arrow	{ font-size: 1.9rem; text-decoration: none; }

.pagination	{ font-size: 1.2rem; display: inline-block; height: 6em; overflow: auto; }
.pagination	a { margin-right: 5px; }

@media (max-width: 640px) {
	body { background-size: 210% !important; background-position-y: 0px !important; }
	h1, h2, h3, h4		{ font-size: 1.2rem; }
	#logo img { max-width: 80%; }
	header.m-5 { margin-top: 100px !important; }
	content article.post { margin-bottom: 1em; }
	.pagination-header { font-size: 1.5rem; }
	.pagination	{ font-size: 1.3rem; } 
}

/* ========= scroll-to-top ========= */
.scrollToTopButton		{ display: none; opacity:1.0; width:40px; height:40px; position:fixed; right: 30px; bottom: 30px; cursor:pointer; 
											text-align:center; color:#fff; text-transform:uppercase; background-color:var(--bs-link-color); font-size: 24px; font-family: "Tahoma"; 
											padding: 0px 11px 0px; border-radius: 6px; line-height: 1.4em; z-index: 999; 
											border: 2px solid #fff; 
											transition: box-shadow 300ms cubic-bezier(0.215, 0.61, 0.355, 1); }
.scrollToTopButton:hover	{ background-color:var(--yellow); box-shadow: var(--shadowbox); }
.scrollToTopButton:focus, .scrollToTopButton:active 
											{ outline: 0; box-shadow: 0 0 0 3px rgba(255,255,255,.25); }
.scrollToTopButton .fa { margin-right: 0px; }