:root {
  --titles: rgb(249, 255, 249);
  --titles2: rgb(183, 199, 186);
  --maintext: rgb(255, 255, 255);
  --secondarytext: hsl(152, 45%, 83%);
  --pcontent: #a9c4b7;
  --primarybg: hsl(0, 0%, 6%);
  --secondarybg: rgb(6, 54, 5);
  --thirdbg: #1e291e;
  --links: hsl(0, 0%, 98%);
  --links2: hsl(88, 74%, 63%);
  --links-focus: #b3e6b8;
  --links-hover: rgb(191, 190, 221);
  --links-hover2: #4c729e;
  --bullets: hwb(119 11% 57%);
  --bullets2: #06b370;
  --images: hsl(153, 7%, 27%);
  --userlog: #587063;
}


/* 1) Body setup */

body {
    background-attachment: fixed;
    background-image: url(../images/body.jpg);
    margin: 0 auto;
    background-color: var(--primarybg);
    font-family: 'Play', sans-serif;
    font-size: 17px;
    color: var(--maintext);
    padding-left: 10px;
    padding-right: 10px;
}

.head-section {
    background-image: url(../images/hdr/header.jpg);
    clear: both;
}

#headerlogo2 {
  /*header logo*/
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0px;
  margin: 0 auto;
  max-width: 100%;
  z-index: 999;
}

#headerlogo2 img {
  object-fit: contain;
  max-height: 100px;
  max-width: 100%;
}

.custom-logo {
  min-height: inherit;
}

.visitors {
  align-items: center;
}

/* --- TAB SHORTCUT --- */

#skip {
  position: relative;
  z-index: 99;
}

.tab-shortcut {
  position: absolute;
  top: -999px;
  padding: 20px;
}

.tab-shortcut:hover {
  position: absolute;
  top: -999px;
  background: var(--secondarybg) !important;
  padding: 20px;
}

.tab-shortcut:focus {
  top: 0;
  background: var(--secondarybg) !important;
  text-decoration: none;
}

/* --- LINKS --- */

a,
a:visited {
    /*text-decoration: none;*/
    text-decoration: underline !important;
}

a:hover,
a:focus {
    color: var(--links-hover);
    text-decoration: underline !important;
    /*text-decoration: none;*/
    background-color: transparent !important;
}

/* SOCIAL BAR */

.social {
  height: 60px;
	background:
	radial-gradient(rgb(68, 64, 29) 15%, transparent 25%) 0 0,
	radial-gradient(grey 15%, transparent 25%) 5px 15px,
	radial-gradient(rgba(255, 255, 255, 0.178) 15%, transparent 20%) 0 1px,
	radial-gradient(rgba(255, 255, 255, 0.178) 15%, transparent 20%) 4px 5px; 
	background-color:rgb(29, 12, 12);
	background-size:8px 8px;
	border: 4px ridge #181818;
	font-size: 14px;
	font-weight: 200;
	color: #f7f0f0;
	letter-spacing: 1px;
	animation: block-title 4s ease-out infinite;
	animation-direction:alternate;
	text-shadow: 0px 0px 1px #f5f5f5, 0px 0px 3px #ba1509;
	-moz-box-shadow: inset 0px 10px 20px rgba(0, 0, 0, 0.88), inset 0px -10px 20px rgba(0, 0, 0, 0.88);
  -webkit-box-shadow: inset 0px 10px 20px rgba(0, 0, 0, 0.88), inset 0px -10px 20px rgba(0, 0, 0, 0.88);
	box-shadow: inset 0px 10px 20px rgba(0, 0, 0, 0.88), inset 0px -10px 20px rgba(0, 0, 0, 0.88);
  padding: 2px;
}

#socialbar {
  float: right;
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 507px;
  height: 54px;
  margin: 0 auto;
  padding-bottom: 7px;
}

.socialicon-wrap {
  display: flex;
  justify-content: right;
  flex-direction: row;
  align-items: center;
  padding: 3px 6px 0 0;
  width: 100%;
  gap: 2px;
}

.socialicon-fb {
  width: 50px;
  height: 50px;
  background-image: url(../images/social/fb.png);
}

.socialicon-fb:hover {
  width: 50px;
  height: 50px;
  background-image: url(../images/social/fb-a.png);
}

.socialicon-tw {
  width: 50px;
  height: 50px;
  background-image: url(../images/social/tw.png);
}

.socialicon-tw:hover {
  width: 50px;
  height: 50px;
  background-image: url(../images/social/tw-a.png);
}

.socialicon-lin {
  width: 50px;
  height: 50px;
  background-image: url(../images/social/in.png);
}

.socialicon-lin:hover {
  width: 50px;
  height: 50px;
  background-image: url(../images/social/in-a.png);
}

.socialicon-ig {
  width: 50px;
  height: 50px;
  background-image: url(../images/social/ig.png);
}

.socialicon-ig:hover {
  width: 50px;
  height: 50px;
  background-image: url(../images/social/ig-a.png);
}

.socialicon-yt {
  width: 50px;
  height: 50px;
  background-image: url(../images/social/yt.png);
}

.socialicon-yt:hover {
  width: 50px;
  height: 50px;
  background-image: url(../images/social/yt-a.png);
}

.socialicon-gplus {
  width: 50px;
  height: 50px;
  background-image: url(../images/social/gplus.png);
}

.socialicon-gplus:hover {
  width: 50px;
  height: 50px;
  background-image: url(../images/social/gplus-a.png);
}

.socialicon-dis {
  width: 50px;
  height: 50px;
  background-image: url(../images/social/discord.png);
}

.socialicon-dis:hover {
  width: 50px;
  height: 50px;
  background-image: url(../images/social/discord-a.png);
}


/*----- Center Block -----*/

.row {
  border-radius: 6px;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  opacity: .9;
  padding-top: 10px;
}

.centerblk {
  font-size: 16px;
  padding: 8px .8em .1em .8em;
  font-weight: bolder;
  color: var(--maintext);
  background-color: hsl(0, 2%, 33%);
  border-radius: 6px;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  opacity: .9;
  border: 2px solid grey;
  padding-bottom: 15px;
}

.centerblk h2 {
  font-size: 20px;
  line-height: 29px;
  min-width: 194px;
  min-height: 33px;
  height: min-content;
  margin: 0 0 20px 0;
  padding: 10px;
  font-weight: bold;
  color: var(--titles);
  text-shadow: 0px 0px 3px #000, 0px 0px 3px #000, 0px 0px 3px #000000;
  box-shadow: inset 0px 1px 1px #505050, 0px 0px 1px #000000, 0px 0px 2px #000000, 0px 0px 2px #000000, 0px 0px 2px #000000;
	background:
	radial-gradient(#22441d 15%, transparent 25%) 0 0,
	radial-gradient(grey 15%, transparent 25%) 5px 15px,
	radial-gradient(rgba(255, 255, 255, 0.178) 15%, transparent 20%) 0 1px,
	radial-gradient(rgba(255, 255, 255, 0.178) 15%, transparent 20%) 4px 5px; 
	background-color:#1c5c1c;
	background-size:8px 8px;
	border: 4px ridge #181818;
	font-size: 14px;
	font-weight: 200;
	letter-spacing: 1px;
	animation: block-title 4s ease-out infinite;
	animation-direction:alternate;
	text-shadow: 0px 0px 1px #f5f5f5, 0px 0px 3px #ba1509;
	-moz-box-shadow: inset 0px 10px 20px rgba(0, 0, 0, 0.88), inset 0px -10px 20px rgba(0, 0, 0, 0.88);
  -webkit-box-shadow: inset 0px 10px 20px rgba(0, 0, 0, 0.88), inset 0px -10px 20px rgba(0, 0, 0, 0.88);
	box-shadow: inset 0px 10px 20px rgba(0, 0, 0, 0.88), inset 0px -10px 20px rgba(0, 0, 0, 0.88);
  box-sizing: border-box;
  text-align: center;
}

.centerblk img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  border: solid 2px var(--images);
}

.postthumbnail img {
  display:inline;
  border: 2px solid hwb(128 2% 69%);
  border: solid 2px var(--images);
}

.postthumbnail {
  padding-top: 75px;
  padding-right: 25px;
  float: right;  
 
}

.pcontent {
  width: 80%;
  min-height: 100px;
  margin: 10px;
  padding: 5px 5px 5px 10px;
  box-shadow: 0px 0px 1px #000000, 0px 0px 3px #000000, 0px 0px 5px #000000;
  border: 1px #380000 solid;
  border-radius: 4px;
  background: #474747;
}

.pcontent a:link {
  text-decoration: underline;
}

.postcontent {
  color: var(--maintext);
  width: 100%;
  font-size: 14px;
  font-weight: bold;
  margin: 0;
  padding-left:  10px;
  text-decoration: none;
  text-shadow: 0px 0px 3px #000000, 0px 0px 3px #000000, 0px 0px 3px #000000;
  text-align: left;
  overflow: auto;
}

.postcontent a {
  color: rgb(26, 77, 31) !important;
  text-decoration: none;
  text-shadow: 0px 0px 3px #000000, 1px 1px 3px #000000, 0px 0px 3px #000000;
}

.postcontent a:hover {
  color: var(--maintext) !important;
  text-decoration: none;
}

.postcontent a:focus {
  color: var(--pcontent) !important;
  text-decoration: none;
}


#continuelink {
  text-align: right;
  text-decoration: underline;
}

#continuelink a:hover {
  color: #fff;
  text-decoration: underline;
}

#continuelink::before {
  content: "\bb  ";
}


.glsr-review-title {
  padding: 1em .8em 0em .8em;
  font-size: 10px;
  font-weight: bolder;
  color: rgb(235, 220, 20);
  background-color: #1e2620;
  border-radius: 6px;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  opacity: .9;
  border: 2px solid #164716;
}

.glsr-review-rating {
  background: none;
  color: #b5c208;
  font: 12px;
  padding-top: 5px;
}

/*----- LEFT SIDE BLOCKS -----*/

.sidebar {
  width: 300px;
  font-size: 16px;
  padding: 5px .5em .1em .5em;
  font-weight: bolder;
  color: var(--maintext);
  background-color: hsl(0, 2%, 33%);
  border-radius: 6px;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  opacity: .9;
  border: 2px solid grey;
}

.sidebar img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.sidebar h2 {
  font-size: 20px;
  line-height: 29px;
  width: 100%;
  min-height: 33px;
  height: min-content;
  margin: 0px 0px 10px 0px;
  padding: 0;
  font-weight: bold;
  color: var(--titles2);
  text-shadow: 0px 0px 1px #000, 0px 0px 2px #000, 0px 0px 4px #270000, 0px 0px 6px #ff0000;
	background:
	radial-gradient(#22441d 15%, transparent 25%) 0 0,
	radial-gradient(grey 15%, transparent 25%) 5px 15px,
	radial-gradient(rgba(255, 255, 255, 0.178) 15%, transparent 20%) 0 1px,
	radial-gradient(rgba(255, 255, 255, 0.178) 15%, transparent 20%) 4px 5px; 
	background-color:#1c5c1c;
	background-size:8px 8px;
	border: 4px ridge #181818;
	font-size: 14px;
	font-weight: 200;
	letter-spacing: 1px;
	animation: block-title 4s ease-out infinite;
	animation-direction:alternate;
	text-shadow: 0px 0px 1px #f5f5f5, 0px 0px 3px #ba1509;
	-moz-box-shadow: inset 0px 10px 20px rgba(0, 0, 0, 0.88), inset 0px -10px 20px rgba(0, 0, 0, 0.88);
  -webkit-box-shadow: inset 0px 10px 20px rgba(0, 0, 0, 0.88), inset 0px -10px 20px rgba(0, 0, 0, 0.88);
	box-shadow: inset 0px 10px 20px rgba(0, 0, 0, 0.88), inset 0px -10px 20px rgba(0, 0, 0, 0.88);
  box-sizing: border-box;
  text-align: center;
}

.sidebar h2 a {
  font-weight: bold;
  color: #10e934;
}

.sidebar li {
  list-style: none;
  padding: 2px 0 30px;
}

.sidebar li li {
  padding: 2px 0px;
}

.sidebar li li::before {
  content: "\bb  ";
}

.sidebar li li li {
  padding: 3px 0 2px 10px;
}

.sidebar li li li::before {
  content: "\21b3  ";
}

.sidebar ul {
  margin: 0px;
  padding: 0;
}

.sidebar ul ul {
  margin: 2px 0 0;
}

.sidebar ul ul ul {
  border-top: 1px dotted #474747;
  margin-bottom: -3px;
}

.sidebar a {
  text-decoration: none;
  color: #838383;
  font-weight: normal;
}

.sidebar a:hover {
  color: #530000;
  text-decoration: underline;
}

.sidebar a:active,
.sidebar a:focus {
  color: rgb(255, 255, 255);
}

/*----- RIGHT SIDE BLOCKS -----*/

.sidebar2 {
  width: 300px;
  font-size: 16px;
  padding: 5px .5em .1em .5em;
  font-weight: bolder;
  color: var(--maintext);
  background-color: hsl(0, 2%, 33%);
  border-radius: 6px;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  opacity: .9;
  border: 2px solid grey;
}

.sidebar2 img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.sidebar2 h2 {
  font-size: 20px;
  line-height: 29px;
  width: 100%;
  min-height: 33px;
  height: min-content;
  margin: 0px 0px 10px 0px;
  padding: 0;
  font-weight: bold;
  color: yellow;
  text-shadow: 0px 0px 1px #000, 0px 0px 2px #000, 0px 0px 4px #270000, 0px 0px 6px #ff0000;
	background:
	radial-gradient(#22441d 15%, transparent 25%) 0 0,
	radial-gradient(grey 15%, transparent 25%) 5px 15px,
	radial-gradient(rgba(255, 255, 255, 0.178) 15%, transparent 20%) 0 1px,
	radial-gradient(rgba(255, 255, 255, 0.178) 15%, transparent 20%) 4px 5px; 
	background-color:#1c5c1c;
	background-size:8px 8px;
	border: 4px ridge #181818;
	font-size: 14px;
	font-weight: 200;
	letter-spacing: 1px;
	animation: block-title 4s ease-out infinite;
	animation-direction:alternate;
	text-shadow: 0px 0px 1px #f5f5f5, 0px 0px 3px #ba1509;
	-moz-box-shadow: inset 0px 10px 20px rgba(0, 0, 0, 0.88), inset 0px -10px 20px rgba(0, 0, 0, 0.88);
  -webkit-box-shadow: inset 0px 10px 20px rgba(0, 0, 0, 0.88), inset 0px -10px 20px rgba(0, 0, 0, 0.88);
	box-shadow: inset 0px 10px 20px rgba(0, 0, 0, 0.88), inset 0px -10px 20px rgba(0, 0, 0, 0.88);
  box-sizing: border-box;
  text-align: center;
}

.sidebar2 h2 a {
  font-weight: bold;
  color: rgb(119, 119, 119);
}

.sidebar2 li {
  list-style: none;
  padding: 2px 0 30px;
}

.sidebar2 li li {
  padding: 2px 0px;
}

.sidebar2 li li::before {
  content: "\bb  ";
}

.sidebar2 li li li {
  padding: 3px 0 2px 10px;
}

.sidebar2 li li li::before {
  content: "\21b3  ";
}

.sidebar2 ul {
  margin: 0px;
  padding: 0;
}

.sidebar2 ul ul {
  margin: 2px 0 0;
}

.sidebar2 ul ul ul {
  border-top: 1px dotted #474747;
  margin-bottom: -3px;
}

.sidebar2 a {
  text-decoration: none;
  color: #838383;
  font-weight: normal;
}

.sidebar2 a:hover {
  color: #530000;
  text-decoration: underline;
}

.sidebar2 a:active,
.sidebar2 a:focus {
  color: rgb(255, 255, 255);
}

.post-breadcrumb {
  font-size: 16px;
  line-height: 29px;
  width: 100%;
  min-height: 33px;
  height: min-content;
  margin: 0px 0px 10px 0px;
  padding: 5px;
  font-weight: bold;
  color: hsl(120, 89%, 45%);
  text-shadow: 0px 0px 1px #000, 0px 0px 2px #000, 0px 0px 4px #270000, 0px 0px 6px #ff0000;
  background-color: #3f3f3f;
  box-sizing: border-box;
  border: 2px dotted hsl(0, 17%, 93%);
}

.main-site-container {
	width: 100%;
  border-top: thin solid #DFDCD9;
  border-right: thin solid #B2B0AE;
  border-bottom: thin solid #B2B0AE;
  border-left: thin solid #DFDCD9;
  border-radius: 6px;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  opacity: .9;
  border: 2px solid grey; 

}

.main-container {
/*	min-height: 500px; */
	padding: 25px 10px!important;
	background: #000000;
	border: 1px solid #ada8a8;
	/*border-top: none;*/
}

.main-site-content {
	flex-wrap: nowrap;
  padding-left: 5px;
  padding-right: 5px;
}

.col-content {
	width: 100% !important;
/*  
 */

}

.aside-container, .col-content, .center-blocks {
    margin-bottom: 25px;
}

.widget {
	list-style-type:none;
	margin:0;
	padding:0;
}

::-webkit-scrollbar {
  width: 15px;
}

/* Track */

::-webkit-scrollbar-track {
  background: #2b4b17;
  border: 2px solid hsl(152, 84%, 13%);
}

/* Handle */

::-webkit-scrollbar-thumb {
  background: #3bf53b;
  border-radius: 8px;
  border: 2px solid hsl(152, 84%, 13%);
  background: linear-gradient(0deg, hsl(123, 78%, 42%) 0%, hsl(51, 79%, 54%) 100%);
}

/* Handle on hover */

::-webkit-scrollbar-thumb:hover {
  background: hsl(130, 83%, 25%);
  border-radius: 8px;
  border: 2px solid #000000;
  background: linear-gradient(0deg, #1b0000 0%, #460000 100%);
}



.title, .has-large-font-size, .has-medium-font-size {
  padding: 0em .8em .1em .8em;
  font-size: 12px;
  font-weight: bolder;
  color: var(--titles);
  background-color: #1e2620;
  border-radius: 6px;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  opacity: .9;
  border: 2px solid hsl(69, 88%, 54%);
  }

  .content {
    background: none;
    color: var(--maintext);
    font: 12px;
    padding-top: 5px;
    }

.custom-logo {
 min-height: inherit;
}

.header-area {
  width: 100%;
}

#headerlogo {
  /*header logo*/
    justify-content: center;
    align-items: center;
    padding-left: 50px;
    margin: 0 auto;
    max-width: 100%;
    z-index: 999;
}

#headerlogo img {
  object-fit: contain;
/*  max-height: 150px; */
  max-width: 500px;

}

#headerlogo a:hover,
#headerlogo a:focus,
#headerlogo a:active {
  color: #ffffff;
  text-decoration: none;
}

#blog-name {
  color: #636363;
  font-size: 3.25em;
  font-style: italic;
  text-shadow: 0px 0px 1px #000000, 0px 0px 3px #000000, 0px 0px 4px #1f0000, 0px 0px 5px #380000, 0px 0px 6px #5e0000, 0px 0px 8px #770000;
}

#blog-tagline {
  color: var(--links2);
  font-size: 18px;
  text-shadow: 0px 0px 1px #831b1b, 0px 0px 3px hsl(0, 83%, 24%), 0px 0px 4px #1f0000;
}


/** ------------------------------------------footer section starts------------------------------------------*/

#footer {
  width: 100%;
  margin: auto;
}

.footer-area {
  width: 100%;
  height: 150px;
  background: var(--thirdbg);
  background: linear-gradient(90deg, rgba(0,36,4,1) 0%, rgba(100,128,56,1) 79%, rgba(152,104,19,1) 100%);
}

/* The content box in the footer */
.fcontent {
  color: var(--links);
  width: 100%;
  height: 200px;
  font-size: 14px;
  font-weight: bold;
  margin: 0;
  padding: 15px;
  text-decoration: none;
  text-shadow: 0px 0px 3px #000000, 0px 0px 3px #000000, 0px 0px 3px #000000;
  text-align: center;
  overflow: auto;
}

.fcontent a {
  color: var(--bullets2) !important;
  text-decoration: none;
  text-shadow: 0px 0px 3px #000000, 1px 1px 3px #000000, 0px 0px 3px #000000;
}

.fcontent a:hover {
  color: #ffffff !important;
  text-decoration: none;
}

.fcontent a:focus {
  color: #ffffff !important;
  text-decoration: none;
}

/* end content box */

.footer-copyright {
  width: 100%;
  height: 50px;
  background-color: var(--thirdbg);
  padding: 15px;
}

/* Footer copyright text settings */

#footer-content {
  color: yellow;
  font-size: 12px;
  padding: 0px;
  margin: 5px 0px 0px 0px;
  text-align: center;
  text-shadow: 0px 0px 2px #000000, 0px 0px 2px #000000, 0px 0px 2px #000000;
}

#footer-content a:hover,
#footer-content a:active,
#footer-content a:focus {
  color: #41dd12;
}

/** ------------------------------------------footer section ends------------------------------------------*/

@media (max-width: 768px)
{
	.main-site-container {
		padding-left: 0;
		padding-right: 0;
    border: 2px solid green;
	}

	.main-site-content {
		flex-wrap: wrap;
	}

  .sidebar, .sidebar2, .pcontent {
    width: auto;
  }

  .site-header, .member-menu, #socialbar, .postthumbnail, .social, .secondmenu {
    display: none !important;
  }

	/**
	 * CSS below will pevent images breaking the layout.
	 */
	img {
		max-width: 100% !important;
		height: auto;
	}

   	/**
	 * This will make center content display on top when viewing on a mobile.
	 */
	.col-content {
		order: 1;
   	}

	/**
	 * This will make the left blocks disaply directly under the center content.
	 * We do not need to change the order of the right blocks at all, So their order stays as "order-3"
	 */

	.fcontent, .footer-area {
	  width: 100%;
	  height: 100%;
	}
	.sidebar-left {
		order: 2;
    width: 100%;
	}
	.sidebar-right {
		order: 3;
    width: 100%;
	}

	/**
	 * Force the side blocks to "100%" width
	 */
	.col-sidebar {
		padding: 0 !important;
		width: 100% !important;
	}

	.aside-container {
		width: 100% !important;

	}
}