/*----- DARK MODE PAGE TEST -----*/
img#dark-toggle {height: 30px;width: 30px;cursor: pointer;}
#dark-toggle-title, #light-toggle-title {margin-top: -15px;cursor: pointer;}
.hidden {display: none !important;}
.block {display: block;}
.gsc-input-box {background-color: transparent;border: none;}
.box {
    background-color: rgb(24, 26, 27) !important;
    box-shadow: rgba(8, 8, 8, 0.1) 0px 0.5em 1em -0.125em, rgba(8, 8, 8, 0.02) 0px 0px 0px 1px;
    color: rgb(189, 183, 175) !important;
}
	
/*----- COLOURS -----*/
:root {
		--content: #fbf8f1;
		--content-border: #dddddd;
		--font-color: #333333;
		--description-color: #3C3C3C;
  --header-green: #022120;
		--desc-button: #F4F4F4;
		--main-wrap: #217776;
		--medium-dark: #E9E9E9;
  --white-text: #FFF;
  		/*---*/
  --darkreader-bg--content: #fbf8f1;
		--darkreader-bg--desc-button: #217776;
		--darkreader-text--font-color: #fff;		
}
.dark-theme {
		--content: black;
		--content-border: #2a2a2a;
		--font-color: #CCC;
		--description-color: #CCC;
  --header-green: #022120;
		--desc-button: #2f2f2f;
		--main-wrap: #113f3e;
		--medium-dark: #191919;
  --white-text: #CCC;
  		/*---*/
  --darkreader-bg--content: black;
		--darkreader-bg--desc-button: #2f2f2f;
		--darkreader-text--font-color: #217776;		
}
/*
@media (prefers-color-scheme: dark) {
  :root {
		--content: black;
		--content-border: #2a2a2a;
		--font-color: #919191;
		--header-green: #022120;
  --desc-button: #2f2f2f;
		--main-wrap: #113f3e;
		--medium-dark: #191919;
  --white-text: #000;
  }
}
@media (prefers-color-scheme: light) {
  :root {
		--content: #fbf8f1;
		--content-border: #dddddd;
		--font-color: #333333;
  --header-green: #022120;
		--desc-button: #F4F4F4;
		--main-wrap: #217776;
		--medium-dark: #E9E9E9;
  --white-text: #FFF;
		
		--darkreader-bg--content: black;
		--darkreader-bg--desc-button: #2f2f2f;
		--darkreader-text--font-color: #fff;		
  }
}

*/

a.desc-button, a#generateButton {background-color: var(--desc-button);}

@media only screen and (max-width: 660px) {
.m-hid{ display: none;}
}

/*----------------------------Body---------------------------------- */
body {
 background-color: var(--main-wrap);
 background-image: url("images/background2.jpg");
 background-position:left bottom 0px;
 background-attachment: fixed;
 background-repeat: no-repeat;
 margin: auto;
 padding: 0;
 font-family: cambria;
 display: grid;
 grid-template-columns: 1fr;
 max-width: 1900px;
}
/*----------------------------Container Wrap---------------------------------- */
#container-wrap{
 grid-column: 1/5;
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 grid-template-rows: max-content;
 border:5px solid #000;
}
/*----------------------------Header Section---------------------------------- */
header {
 display: grid;
 grid-column: 1/5;
 grid-template-columns: 5fr 1fr;
 grid-template-rows: 100px;
 grid-gap: 0.5em;
 background-color: var(--header-green);
 }
#logo {
 background-image: url("images/RanGen Logo.png");
 background-repeat: no-repeat;
 background-size: contain;
 background-position: left center;
 display: block;
 height: 100%;
}
#open-wrap {
  display: grid;
  align-items: center;
  justify-items: center;
}
#open-button {
  font-size: 20px;
  text-align: center;
  font-weight: bold;
  padding: 5px;
  cursor: pointer;
  font-family: sans-serif;
  border-radius: 60px;
  width: 65px;
  border-color: #CFA946;
  background-color:#75b4CC;
  color: black;
  margin-bottom: -25px;
}
#linkbar {grid-column: 1/3;}
#linkbar a {color: white; text-decoration: none;	}
#linkbar ul {
 display: grid;
 justify-items: center;
 grid-template-columns: repeat(9, auto);
 padding: 5px 0;
 margin: 0 -5px;
 }
#linkbar li {
 letter-spacing: 1px;
 border-bottom: 2px solid #670e0e;
 list-style: none;
 font-size: calc( 10px + (20 - 10) * ( (100vw - 300px) / ( 1600 - 300) ));
}
#linkbar li:hover {
 color: #cfa95c; 
	text-decoration:none;
 border-bottom: 2px solid black;
	}
@media only screen and (max-width: 549px) {
#linkbar {display: none;}
}
/*----------------------------Navbar Section---------------------------------- */
#navbar{grid-column: 1/5;}
#navbar, #nav-scroller{
 display: grid;
 width: 100%;
	background-color:#195554;
	box-shadow: 0 2px 2px #071b1b inset;
	border-bottom: 3px solid #1e6463;
	text-align: center;
}
#nav-scroller {
 height: 30px;
 padding: 5px 0 0;
 z-index: 9999;
}
#navbar ul {
 display: grid;
 justify-items: center;
 grid-column: 1/5;
 grid-template-columns: repeat(7, 1fr);
 margin: 0; padding: 0;
 font-weight: bold;
 text-decoration:none;
 height: 30px;
 font-size: calc( 14px + (17 - 14) * ( (100vw - 300px) / ( 1600 - 300) ));
}
#navbar li {
 letter-spacing: 0.5px;
 list-style: none;
 width: 100%;
 padding-top: 3px;
 position: relative;
}
#navbar li a {
 color: #cfa95c;
 text-shadow: 2px 0 2px #000;
 display: block;
 width: 100%;
 text-decoration: none;
 }
#navbar li a:hover {
 color: #670E0E;
 text-shadow: none;
 }
#navbar li.view-gens a {color: #FFF; border-bottom: 5px solid white;height: 28px;letter-spacing: 0;}
#navbar li.dropdown:nth-child(2) {	 border-bottom: 5px solid forestgreen;height: 28px;}
#navbar li.dropdown:nth-child(3) {	 border-bottom: 5px solid red;height: 28px;}
#navbar li.dropdown:nth-child(4) {	 border-bottom: 5px solid dodgerblue;height: 28px;}
#navbar li.dropdown:nth-child(5) {	 border-bottom: 5px solid orange;height: 28px;}
#navbar li.dropdown:nth-child(6) {	 border-bottom: 5px solid purple;height: 28px;}
#navbar li.dropdown:nth-child(7) {	 border-bottom: 5px solid gold;height: 28px;}

.dropdown-content {
 z-index: 999;
 display: none;
 min-width: 160px;
 position: absolute;
 padding-bottom: 5px;
 width: 12%;
 }
 
@media only screen and (max-height: 650px){
 .dropdown-content {
 overflow-x: hidden;
max-height: 500px;
 width: 12%;
}
}
.dropdown-content a {
 color: white !important;
 border-bottom: none !important;
 line-height: 18px;
 box-shadow: 0 5px 7px #154747 inset;
 padding: 15px 20px;
 justify-self: center;
 background-color: #195554;
 height: 18px !important;
}
.dropdown-content a:hover {
	background-color: #022120;
 box-shadow: 0 5px 7px #022120 inset;
}
.dropdown:hover .dropdown-content {display: grid;margin-top: 10px;}
/* -----------Nav Collapse Scroller----------- */
#nav-collapse, #nav-collapse-scroller{
	width: 100%;
	z-index: 999;
 grid-column: 1/5;
}
#nav-collapse-scroller {
 display: grid;
 height: 54px;
}
@media only screen and (max-width: 549px){
  #nav-collapse-scroller {grid-template-columns: repeat(3, 1fr);}
  #navbar {display: none;}
}

@media only screen and (min-width: 550px){
  #nav-collapse-scroller {grid-template-columns: repeat(2, 1fr);}
    #nav-collapse-scroller {display: none;}
}
/*----------------------Navbar Hamber Menu------------------------*/
.arrow { color: white; align-self: center;}
.hamburger {
 width: 50%;
 max-width: 30px;
 height: 5px;
 border-top: 3px solid #fff;
 border-bottom: 3px solid #fff;
 align-self: center;
 justify-self: center;
}
/*---------------------------SIDEBAR BUTTONS---------------------------*/
#sidebar-nav-wrap {
  grid-template-columns: 1fr 1fr;
  display: grid;
  grid-column: 1/5;
 }
#left-sidebar, #right-sidebar {
 background-color: #670E0E;
 box-shadow: inset 0 2px 2px #071B1B;
 border: none;
 border-bottom: 3px solid #1E6463;
 text-shadow: 2px 2px 2px #000;
 font-size: 28px;
 height: 57px;
 cursor: pointer;
}
button#left-sidebar {grid-column: 1/2;display: grid; grid-template-columns: 1fr 1fr;}
button#left-sidebar .arrow {grid-column: 1/2;grid-row: 1/2;}
button#left-sidebar .hamburger {grid-column: 2/3;  justify-self: left;}
/*---###---*/
button#nav-toggle, #nav-collapse {display: none;}
/*---###---*/
button#right-sidebar {grid-column: 2/4;display: grid; grid-template-columns: 1fr 1fr;}
button#right-sidebar .arrow {grid-column: 2/3;grid-row: 1/2;}
button#right-sidebar .hamburger {grid-column: 1/2;  justify-self: right;}

@media only screen and (max-width: 550px){
#sidebar-nav-wrap {grid-template-columns: 1fr 1fr 1fr;}
button#nav-toggle {
 grid-column: 2/3;display: grid;
 background-color:#670E0E;
 box-shadow: inset 0 2px 2px #071B1B;
 border: none;
 border-bottom:3px solid #1E6463;
 text-decoration: none;
 color: #FFF; /* Edit this to change the icon color */
 text-shadow: 2px 2px 2px #000;
 font-size: 28px;
 cursor: pointer;
 }
button#right-sidebar {grid-column: 3/4;display: grid; grid-template-columns: 1fr 1fr;}
/*---## Hidden dropdown ##---*/
#nav-collapse {
 clip: rect(0 0 0 0);
 max-height: 0;
 grid-column: 1/4;
 display: none;
 grid; 1fr 1fr;
}
#nav-collapse.opened {
 height: 100%;
 max-height: 9999px;
 margin: 0 0 10px;
}
ul.main{grid-column: 1/2;}
ul.alt{grid-column: 2/3;}
#nav-collapse ul {
 margin: 0;
 padding: 0;
}
#nav-collapse a {
 width: 100%;
 background-color: #195F5E;
 border-bottom: 1px solid #195554;
 padding: 0.7em 0;
 display: inline-grid;
 text-decoration: none;
}

#nav-collapse a:hover {
border-bottom: 2px solid #670E0E;
}
#nav-collapse .alt a {
 background-color: #555;
}



#nav-collapse li {
 display: block;
letter-spacing:1px;
color:#FFF;
text-align:center;
font-weight:700;
border-right:1px solid #144645;
text-shadow: 2px 2px 2px #000;
}
}
@media only screen and (min-width: 1199px){#sidebar-nav-wrap {display: none;}}
/*----------------------------Back To Top ---------------------------------- */
#back-to-top {
position: fixed; bottom: 5px; right: 5px; z-index: 9999999;
background-color: #670E0E;
border: 2px outset #670E0E;
color: white;
text-decoration: none;
padding: 5px 10px;
border-radius: 10px;
font-size: calc( 12px + (15 - 12) * ( (100vw - 300px) / ( 1600 - 300) ));
letter-spacing: 1.25px;
font-weight: bold;
text-align: center;
}
/*----------------------------Mission---------------------------------- */
#mission{
grid-column: 1/5;
grid-template-rows: auto;
grid-template-columns: 1fr;
padding: 5px 0;
border-top: 5px solid #000;
text-align: center;
letter-spacing: 2px;
min-height: 30px;
height: auto;
display: none;
}
#mission a{
 padding 100% 0;
 font-size: calc(25px + (30 - 25) * ( (100vw - 300px) / ( 1200 - 300))) !important;}
#mission p {
 margin: auto;
 width: 90%;
 font-size: calc( 16px + (26 - 16) * ( (100vw - 300px) / ( 1600 - 300) ));
}
#close-button {
 font-size: 25px;
 background-color: black;
 line-height: 18px;
 font-weight: bold;
 padding: 5px;
 cursor: pointer;
 font-family: sans-serif;
 border-radius: 60px;
 border: 3px solid white;
 height: 17px;
 width: 17px;
 margin-left: -17px;
 color: white;
 justify-self: right;
 align-self: end;
 grid-column: 2/3;
}
@media only screen and (max-width: 549px) {
 #close-button {
  padding: 14px 0;
  width: 90%;
  grid-column: 1/3;
  margin: 10px auto 0;
 }
}
/*----------------------------Container---------------------------------- */
#container {
 display: grid;
 grid-column: 1/5;
 overflow: hidden;
 width: 100%;
 position: relative;
}
/*-------------------------Ad-board----------------------------------*/
#ad-board-wrap {
 background-color: #111;
 border-bottom: 3px solid #888;
 border-top: 3px solid #888;
 max-height: 250px;
 overflow: hidden;
 grid-column: 1/5;
}
#ad-board {
 margin: auto;
 max-width: 970px;
 max-height: 250px;
 width: 90%;
 position: relative;
 display: grid;
}
#ad-board p {
 color: #fff;
 text-align: center;
 line-height: 250%;
 font-size: calc(15px + (20 - 15) * ( (100vw - 300px) / ( 1200 - 300))) !important;
 align-self: center;
 grid-row: 1/3;
 z-index: 1;
 position: absolute;
}
#rangen_co_uk_970x250_responsive_3 {
 grid-column: 1/2;
 grid-row: 1/2;
 max-height: 250px;
 overflow: hidden;
 z-index: 2;
 justify-content: center;
 align-content: center;
 display: grid;
}
#google_ads_iframe_\/147246189\,21828330408\/rangen\.co\.uk_970x250_desktop_3_0__container__ {
    background-color: #111;
}
@media only screen and (max-width: 549px) {#ad-board p {line-height: 150%;}}
/*-------------------------Main-wrap----------------------------------*/
#main-wrap {
 display: grid;
 grid-column: 1/5;
 grid-template-rows: repeat(2, auto);
 grid-column-gap: 3%;
 grid-row-gap: 0px;
 font-size: calc( 14px + (16 - 12) * ( (100vw - 300px) / ( 1600 - 300) ));
 line-height: 1.7;
 letter-spacing: 0.7px;
 background: url("images/back.png") repeat scroll 0 0;
 background-color:  var(--main-wrap);
 border-top: 10px solid #2c9895;
 border-bottom: 10px solid #2c9895;
 color:  var(--font-color);
 padding: 10px 0 30px;
}
.curse {color: darkred;}
@media only screen and (max-width: 849px) {
 #main-wrap{grid-template-columns: 20px auto auto 20px;}
}
@media only screen and (min-width: 850px) and (max-width: 1074px) {
 #main-wrap{grid-template-columns: 100px auto auto 100px;}
}
@media only screen and (min-width: 1075px) and (max-width: 1199px) {
 #main-wrap{grid-template-columns: 200px auto auto 200px;}
}
@media only screen and (min-width: 1199px) {
 #main-wrap{grid-template-columns: 300px auto auto 300px;}
}

.sticky {
  position: fixed;
  width: calc(100% - 10px);
}
.sticky + .content {
  padding-top: 300px;
}
.Nav {top: 0; z-index: 3;}
.Sidebar {top: 38px; z-index: 2;}
.GenButton {
   top: 90px;
			margin:auto;
			width:300px !important;
			box-shadow: 0px 5px 16px black;
			border: 2px outset #fff;
   justify-self: center;
   font-size: 20px;
   z-index: 2;
}
@media only screen and (max-width: 549px) {
 .Sidebar {top: 0; z-index: 2;}
.GenButton {
   top: 45px;
}
}

@media only screen and (min-width: 1200px) {
 .Sidebar {top: 0; z-index: 2;}
.GenButton {
   top: 40px;
}
}
/*--------------------Post-bar and Addbar---------------------------- */
#post-bar, #addbar {
	background-color: #022120;
 position: relative;
 width: 300px;
 grid-row: 1/3;
 /*max-height: 1630px;*/
 }
#post-bar {
 border-radius: 0 14px 14px 0;
 box-shadow: 3px 1px 17px #022120;
 grid-column: 1/2;
justify-self: end;
}
#addbar {
 border-radius: 14px 0 0 14px;
 box-shadow: -3px 1px 17px #022120;
 grid-column: 4/5;
justify-self: start;
}
@media only screen and (min-width: 1200px) {
#post-bar {
 justify-self: start;
 grid-column: 1/2;
}
#addbar {
 justify-self: end;
 grid-column: 4/5;
 }
}
#post-bar ul {padding: 0 0 0 10px !important;}
#post-bar a, #addbar a {
 text-decoration: none;
 color: #cfa95c;
}
#post-bar li:hover, #addbar li:hover {
 color: #670E0E;
 text-decoration:underline;
}
#post-bar h3, #addbar h3 {
 color: #fff;
 margin-bottom: 0;
}
#addbar h3 {text-align: center;}
#patreon-image {
	width: 95% !important;
 border: 4px dotted white;
 padding: 1%;
}
#patreon-h4 {
 text-align: center;
 color: white !important;
 letter-spacing: 2px;
 margin-bottom: 0 !important;
	font-size: calc( 13px + (23 - 13) * ( (100vw - 300px) / ( 1600 - 300) ));
 margin: 0;}
.patreon-p, .patreon-small {
 line-height: 1.7;
 color: #cfa95c;
 padding: 2%;
 margin: 0 0 -7px;	
 text-align: center;
  }
.patreon-small {
	letter-spacing: .5px !important; 
	color: #ccc !important;
 font-size:12px !important;
}
/*####*/
.adbox {
	background-color: var(--main-wrap);
	width: 100% !important;
=height: 550px !important;
}
.adslot_3 { overflow:hidden; max-height:550px; width: 100%; }
#other-sites img {	width: 70px;}
#other-sites p {
 text-align: center;
 color: white;
 line-height: 1.2;
}
/*--- Addbar ---*/
#tweetbox {
    width: 95%;
    margin: auto;
}
/*---------------------------Scrivener----------------------------------- */
.scrivener-img img{background-color:  var(--content-border);
	border-radius: 14px;
	padding: 1%;
	width: 98%;
}
button#scrivener {
width: 100%;
max-width: 300px;
margin-top: 5px;
border-radius: 10px;
padding: 10px;
font-size: calc( 12px + (15 - 12) * ( (100vw - 300px) / ( 1600 - 300) ));
letter-spacing: 1.25px;
font-weight: bold;
background-color: #eb5e57;
border: 2px outset #eb5e57;
color: white;
text-align: center;
	}
a button#scrivener:hover {
	background-color: #2d1004;
	border: 2px outset #2d1004;
	color:#ccaf8e;
	cursor: pointer;
}
/*---------------------------Scrivener (Read More Page)----------------------------------- */
.scrivener-columns {width: 100%; float: left; border: 1px dashed #cfa94a;margin: 15px 0;}
.scrivener-col {width: 30%; margin: 0 1.5%; float: left; text-align: left;line-height: normal;}
.scrivener-box {	width: 40%; text-align: center; margin: auto;}
.scrivener-box img {		max-width: 100%;	}
/*---------------------Content-----------------------------*/
#content-border {
 grid-column: 2/4;
 grid-row: 1/2;
 background-color: var(--content-border);
 padding: 15px;
 border-radius: 14px;
 max-width: 1000px;
 position: relative;
 margin: 0 auto;
 width: calc(100% - 29px);
}
#content {
 background-color: var(--content);
 padding: 1% 5% 3%;
 }
#content h1, .entry-content h1 {
 border-bottom: 2px solid #2c9895;
 color: #670e0e;
 font-weight: normal;
 letter-spacing: 0px;
 text-align: center;
 margin: -10px 0 0;
	font-size: calc( 19px + (46 - 19) * ( (100vw - 300px) / ( 1600 - 300) ));
}
#content h1 a, .entry-content h1 a, .entry-meta{
	text-decoration:none;
	color:inherit;
}
#content h4, #content h2, .entry-content h4 {
	color: var(--font-color);
	text-align:center;
 line-height: 1.25;
	margin-bottom: 0;
letter-spacing: 0.5px;
}
#content h5 {
 margin: -5px auto 10px;
 text-align: center;
 letter-spacing: 3px;
 border-bottom: 1px solid;
}
/*-------------------------Content----------------------------------*/
h5.writing {	color: forestgreen;}
h5.chars {	color: red;}
h5.world {	color: dodgerblue;}
h5.items {	color: orange;}
h5.names {	color: purple;}
h5.misc {	color: gold;}

#goesWell{
  border-top: 1px #CCC dashed;
  border-bottom: 1px #CCC dashed;
  padding: 5px 0 20px;
  box-shadow: 0 3px 25px #AEAAA0;
  margin-top: 20px;
}
.tryTheseText {
  color: #670e0e !important;
  font-size: 18px !important;
  border-bottom: 1px dashed #CCC;
  padding-bottom: 10px;
  margin-bottom: 10px !important;
}
.tryThese {
  color: #278785 !important;
  /*border: 2px solid #CCC;*/
  padding: 0 10px 5px;
  box-shadow: 4px 5px 12px #CCC;
  margin: 0 2px !important;
  font-size: 18px !important;
  border-radius: 10px;
}
.tryThese.writing {	 border-bottom: 2px solid forestgreen;}
.tryThese.chars {	 border-bottom: 2px solid red;}
.tryThese.world {	 border-bottom: 2px solid dodgerblue;}
.tryThese.items {	 border-bottom: 2px solid orange;}
.tryThese.names {	 border-bottom: 2px solid purple;}
.tryThese.misc {	 border-bottom: 2px solid gold;}




h5:hover {
color: #670E0E !important;
border-bottom: 1px solid #670E0E !important;}
a.writing, a.chars, a.world, a.items, a.names, a.misc {text-decoration: none;}
#content h6 {
 margin: 0;
 color: #999;
 text-align: center;
 font-size: 14px;
font-style: italic;}
#content p::first-letter {color: #CFA95C;}
#content h4::first-letter {color: #CFA95C;}
#content a,.post a, #description a, #single-content a, #multiple-content a {
	font-weight:bold;	color:#278785;}
#content a:visited, #description a:visited, .post a:visited,#single-content a:visited, #multiple-content a:visited {	color:#990000 ;}
#content a:hover, #description a:hover, .post a:hover,
#single-content a:hover, #multiple-content a:hover {	color:#cfa95c;}
#content hr {width: 40%; border:1px dashed #999;}
#content hr:nth-child(3n+0) {width: 60%;}
.entry-meta {
	margin-bottom:-5px;
	text-align:center;
	font-weight:800;
	text-decoration:none;
}
#whats-next-wrap{}
.whats-next {
border: 10px solid green;
border-radius: 6px;
margin: auto !important;
padding: 5px 4%;
max-height: 500px;
overflow: auto;
}
.whats-next > p{text-align: left;margin: 0;line-height: 20px !important;}
.whats-next > b {text-align: center;display: block;}
#new-open {cursor: pointer; font-weight: bold; color: green;}
#new-close {cursor: pointer; font-weight: bold; color: red;}
	.construction-text {
	background-image: repeating-linear-gradient(45deg,#000,#ff0 7%,#000 10%);
	color:#000;
	font-weight: bold;
	text-shadow: 3px 1px 2px #fff;
	font-size: 100%;}
	.construction-title-wrap {
		background-color: Yellow;
		background-image: repeating-linear-gradient(45deg,black,yellow 7%,black 10%);
		padding: 5px;
		border-radius: 20px;
		margin: 20px auto 5px;
	}
 .construction-title{
    background-color: var(--content);
    padding: 1px 10px;
    border-radius: 20px;}
/*############
############
############
############*/
/*------------Gen Display Area---------------*/
#rangen_co_uk_728x90_responsive_4 {
    max-width: 728px;
    max-height: 90px;
    overflow: hidden;
}
#comment_container {
 background: rgba(33, 119, 118, 0.13);
 border-radius: 20px;
 padding: 1% 3%;
 max-height: 550px;
 margin-top: 10px;
 border: 6px #dbdfe4;
 overflow: auto;
 border-style: double;
}
/*---------------------New Description Section-----------------------------*/
#description {
 display: grid;
 grid-column: 1/5;
 background-color: rgba(255, 255, 255, 0.67);
 border-top: 10px solid #bbb;
 border-bottom: 10px solid #bbb;
 color: var(--description-color);
 text-align: justify;
 line-height: 1.3;
 font-size: 17px;
 padding: 1% 10% 4%;
 letter-spacing: 0.5px;
}
#description-text-wrap {grid-column: 2/4;}
#description p::first-letter {color: #CFA95C;}
#description h3	{
	font-size: calc( 21px + (35 - 21) * ( (100vw - 300px) / ( 1600 - 300) )); margin: 0;
 border-bottom: 2px solid #2c9895;
 color: #670e0e;
 font-weight: normal;
 text-align: center;
 line-height: 35px;
 }
#description small {font-style:italic;}
/*---------------------------Contact Form----------------------------------- */
#contact-wrap {max-width: 1100px; margin: auto;}
#contactForm {
 border-top: 2px solid #2c9895;
 width: 100%;
 max-width: 1100px;
 margin: auto;
}
#contactForm input {height: 40px;}
#message {height: 100px;}
#demo label {
 font-weight: bold;
 margin: 6px 0 6px 2%;
}
#myForm {max-width: 600px;margin: auto; }
#contact-p {
 border-bottom: 2px solid #990000;
 margin: 20px auto 50px;
 padding: 0 0 20px;
 text-align: center;
 	font-size: calc( 14px + (16 - 12) * ( (100vw - 300px) / ( 1600 - 300) )); line-height: 1.7; letter-spacing: 0.7px;}
#name, #email, #message {
 height: 28px;
 width: 60%;
 font-family: cambria;
 color:  var(--font-color);
 }
 #message {height: 58px;}
 #contactForm form p {
 width: 85% !important;
 text-align: center;
 margin: 10px auto;
}
 #contactForm input, .index textarea {margin: 0; padding: 3px; border: 1px solid #aaa; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px;}
	#contactForm label {width: 30%; font-weight: bold; float: left;}
	#contactForm .submit {background: #FFF; color: #990000; width: 50%; border-radius: 30px; line-height: 10px;border: none; cursor: pointer; padding: 15px; margin: 10px; font-weight: bold;}
 .submit:hover {background: #000;}
	#contactForm .msg {padding: 10px; border: 1px solid #ccc; clear: both; margin: 20px 0 0; text-align: center;}
	#contactForm .msg.success {border-color: #86a62f; background: #faffec; color: green;}
	#contactForm .msg.error {border-color: #cd5a5a; background: #fff7f7; color: red;}
	#contactForm .phones {display: none;}
/*--------------------------- New Footer Section ----------------------------------- */
#footer-wrap {
 background-color: #14464566;
 border-top: 10px solid #144645;
 grid-column: 1/2;
 padding: 10px 10px 0;
}
#footer {
text-align: center;
letter-spacing: 0;
line-height: 1.4 !important;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 5px;
}
#footer .list .title {
 color:#670E0E;
 border-bottom:2px solid #CFA95C;
 font-weight:700;
 text-decoration:none;
	font-size: calc( 15px + (20 - 15) * ( (100vw - 300px) / ( 1600 - 300) ));
}
#footer ul {
 list-style:none;
 margin: 15px auto 50px;
 padding: 0;
}
#footer li {
 height: 50px;
 display: grid;
 background-color: #14464566;
 margin-bottom: 5px;
}
#footer li:hover {
 background-color: #144645e6;font-weight:700;
}
#footer a {text-decoration: none;color:#FFF;align-self: center;}
#footer a:hover {color:#000;}
.smalltext {
background-color: #081c1b;
color:#999999;
box-shadow: 0px -5px 2px #071B1B;
text-align: center;
grid-column: 1/5;
padding-bottom: 10px;
}
.smalltext a,.smalltext a:visited {color:#CFA95C;}
@media only screen and (min-width: 800px) {
 #footer {
  grid-template-columns: repeat(6, 1fr);
  max-width: 1100px;
  margin: auto;
}
}







/*------------Single (Page Type)---------------*/
#nav-above, #nav-below {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}
.nav-previous {
    grid-column: 1/2;
    justify-self: start;
}
.nav-next {
    grid-column: 3/4;
    justify-self: end;
}
.nav-previous a, .nav-next a { letter-spacing: 0.7px;}
/*########## VVV UNSORTED VVV ##############*/


/*------------Category (Page Type)---------------*/
/*
.category-box {
border-radius: 20px;
text-align: center;
border: 5px solid #670e0e;
height: 150px;
width: 70%;
margin: 1% auto 10%;
padding: 4% 2%;
background-color: #fff;
}*/
/*---------------------------Generator----------------------------------- */
/*.V1-text {letter-spacing: 1px; margin: 0 0 0.5%;}
span.V1 {color: #cfa95c; font-weight: bold;}*/
.disclaimer, #content .disclaimer, .V1-text {font-size:13px; color:#195554;}
.gen-small-text, #description small {font-size:12px !important; color:crimson;}
.version-text{font-size: 80%; float: right;color: #bbb;margin-left: -55px;}
.box {	display: none;	text-align:center;}
#generator br {margin-bottom: 8px;}
.spacer {margin-bottom: 10px;}
#generateButton {
 background-color: var(--desc-button) !important;
 border-radius: 18px;
 font-weight: 700;
	margin: 15px auto;
	padding: 5px 13px;
	color: var(--font-color) !important;
 cursor:pointer;
	border-bottom-style: solid;
	border-bottom-width: 3px;
	text-decoration:none;
	display: block;
	width: 135px;
	text-align: center;
}
#generateButton:hover {
	background-color: var(--medium-dark) !important;
	border-color: #9E772A;
}
#generateButtonBottom {
 background-color: var(--desc-button);
 border-radius: 18px;
 font-weight: 700;
	margin: 15px auto;
	padding: 5px 13px;
	color: var(--font-color) !important;
 cursor:pointer;
	border-bottom-style: solid;
	border-bottom-width: 3px;
	text-decoration:none;
	display: block;
	width: 125px;
	text-align: center;
}
#generateButtonBottom:hover {
	background-color: #E9E9E9;
	border-color: -moz-use-text-color -moz-use-text-color #9E772A;
}
.left {	text-align:left !important;}
.right {	text-align:right !important;}
.center {	text-align:center !important;}
.invisible {display: none !important;}
.black-text{color: #000;}
.bold-title-centre {margin: 0 0 -30px; text-align: center;}
#generator {text-align: center;display: grid;grid-template-columns: 1fr;}
#generator h4 {
 letter-spacing: 1px;
 margin: 0 auto;
	letter-spacing: 0.5px;
}
#generator p {
 letter-spacing: 1px;
 margin: 0 auto 5px !important;
 line-height: 22px;
 width: 75%;
}
#generator table {
	min-width: 50%;
	margin: 15px auto 0;
	border: 1px solid #666;
}
#generator table br {margin-bottom: 0;}
#generator td {
	border: 1px solid #cbc4c4;
	font-size: calc( 12px + (16 - 12) * ( (100vw - 300px) / ( 1600 - 300) )) !important;
 color: var(--font-color) !important;
}
/*--Table Classes--*/
.gen-dropdown {
	margin: auto;
	min-width: 35%;
	text-align:center;	
}
#generator .tabular-gen {
	margin: auto;
	min-width: 35%;
	border: 1px solid #000;
}
.tabular-gen td {	padding: 0 2px;	line-height: 150%;
}
/*--End Table Classes--*/
#content #generator hr {	margin-top: 30px;}
.disclaimer {
	font-weight:normal;
	color:#666666;
	line-height:15px;
	text-align:center;
	margin:-10px 0 0;
}
/*-----------V3 Styles------------------*/
#alertbox1,#alertbox2,#alertbox3{color: #900900;}
#responseDiv {
  border:dashed 1px #CCCCCC;
  padding: 5%;
  min-height: 100px;
  overflow-y: auto;
 }
.others {color:black}
.optionals td{border: 1px dotted #E7E7E7 !important;}
.optionals select {margin: 5px 0;}
.poll h1, .poll h2 {text-align: center !important;}
.poll span {
 display: inline-block;
 margin-top: 0;
 padding-bottom: 2px;
}
#comment_container{margin-top: 50px;}
.comp {
  padding: 50px 2.5% 0;
	 width: 45%;
	 float: left;
	 }
.comp h1 {font-size: calc( 15px + (25 - 15) * ( (100vw - 300px) / ( 1600 - 300) )) !important;}	 
#generator select {
	padding: 2px 4px;
 border-radius: 30px;
 border-color: #cfa95c;
	text-align: center;
}



/*------------Mobile View (320px - 420px )---------------*/
/*------------#Tablet View (420px - 420px )---------------*/
/*------------#Desktop View (1024px - 420px )---------------*/

/*---------------------------- ##### ---------------------------------- */

/*Full-width sections*/



 .fb-page {height:365px;}
 .fb_iframe_widget {
overflow-y: hidden;
}


.entry-utility, .entry-meta a {color: #999999;}
.entry-utility a {color: inherit;}
.entry-meta a{text-decoration: none;}
.dropbtn {
 display: inline-block;
 text-align: center;
 padding: 0;
 text-decoration: none;
}


.gsc-search-button, .gsc-clear-button {display: none !important;	}
#gsc-i-id1 {
 background-color: aliceblue !important;
 width: 100% !important;
 border: none !important;
 margin: auto !important;
 padding: 3% 0%  !important;
 border-radius: 36px !important;
 background-image: none !important;
}
.gsc-input-box {
 background-color: transparent !important;
 border: none !important;}
#aswift_1_expand {	width: 100%; !important;}
}

@media only screen and (max-width: 430px) {
#generator select {width: 100%;}
}
@media only screen and (max-width: 549px) { 
/*---------------------------Section Wrap----------------------------------- */
#section-wrap {border-bottom: 10px solid #2c9895; clear: both;}
#section-wrap a {
color:#000000;
line-height:10px;
margin-top:15px;
text-decoration:none;
}
#section-wrap a:hover {text-decoration:underline;}
#demo label {
 clear: left;
 color: #fff;
 float: left;
 height: 20px;
 margin: 13px 0 6px;
}


/*---------------------------Strawpoll----------------------------------- */
.strawpoll-wrap {width: 700px; margin: auto;}
.strawpoll {
 width:350px !important;
 margin:auto;
 border:0 !important;
 height:700px !important;
}
@media only screen and (min-width: 420px) and (max-width: 1400px) {
.strawpoll-wrap {width: 350px;margin: auto;}
}


/*---------------------------Footer----------------------------------- */









/*------------------------------------------*/
#read-more-wrap {
 display: none;
height: 10000px;
 width: 10000px;
 overflow: hidden;
 background-color: hsla(0, 0%, 0%, 0.7);
 position: fixed;
 top: 0;
 z-index: 999;
  } 
 
#read-more {	display: none;	margin; auto;}
#google_image_div {	max-height:550px;}
#other-sites {float: left;	}
#other-sites p{
	text-align:center;
	color: white;
	line-height:normal;
}
#other-sites a{
	padding: 0 0.5%;
	display: block;
	width: 24%;
	float: left;
}



/*---------------------------MEDIA QUERIES---------------------------*/
@media only screen and (max-width: 549px) { 
#content h1, .entry-content h1 {
 margin: 22px 0 0;
 line-height: 1.25;
}
#content h4, .entry-content h4 {
 line-height: 1.55;
 letter-spacing: 0.5px;
}	
#content h5 {letter-spacing: 3px;}
#content p {line-height: normal;} 

}
#comment {	width: 100%;}
#content h1, .entry-content h1 {margin: 0;}
.optionals select {
	font-size: calc( 10px + (13 - 10) * ( (100vw - 300px) / ( 700 - 200) )) !important;
	width: calc( 85px + (105 - 85) * ( (100vw - 300px) / ( 700 - 200) )) !important;
	}
}


/*-------------------------Read More Section----------------------------------*/
		.desc-box p { margin: 0 0 -15px 0; }
		.desc-box {
			max-height: 175px;
			position: relative;
			padding: 0 0 20px;
			margin: 0;
			overflow: hidden;
		}
		.desc-box .read-more { 
			position: absolute; 
			bottom: 0; left: 50%;
			transform: translateX(-50%);			
			width: 100%; 
			text-align: center; 
			margin: 0; 
			padding: 30px 0 30px 0;
		}
		p.read-more { 
			/* transparent doesn't work in this context, must use RGBa for both */
				background-image:  -webkit-gradient(linear,left top,left bottom,color-stop(0, transparent),color-stop(1, var(--content)));
				width: 100% !important;
				max-width: 100% !important;
				font-size: calc( 12px + (16 - 14) * ( (100vw - 300px) / ( 1600 - 300) )) !important;
		}
@media only screen and (max-width: 549px) { 
.desc-button {
   background-color: var(--content);
   padding: 25px 15px;
   border-radius: 60px;
   border: 2px solid #900;
   box-shadow: 4px 5px 12px black;
   max-width: 300px !important;
   font-size: calc( 13px + (16 - 13) * ( (100vw - 300px) / ( 1600 - 300) )) !important;
 }
.desc-button a{
 color: #900;
}
}
@media only screen and (min-width: 550px){  
 .desc-button {
  background-color: var(--content);
  padding: 20px 25px;
  border-radius: 60px;
  border: 2px solid#900;
  box-shadow: 4px 5px 12px#000;
  max-width: 300px !important;
  font-size: 20px;
 }
}






/*-----------FONT SIZES------------------*/
.entry-meta {
	font-size: calc( 11px + (14 - 11) * ( (100vw - 300px) / ( 1600 - 300) ))}
#generator p, #generator, #generator-left, #content p, #generator-left p, #submitButton,#name, #email, #message {
	font-size: calc( 14px + (16 - 12) * ( (100vw - 300px) / ( 1600 - 300) )); line-height: 1.7; letter-spacing: 0.7px;}

.entry-utility, #content h4, .entry-content h4, #navbar ul {
	font-size: calc( 14px + (17 - 14) * ( (100vw - 300px) / ( 1600 - 300) ));}
#navbar ul {
	font-size: calc( 12px + (17 - 12) * ( (100vw - 300px) / ( 1600 - 300) ));}
.V1, #content h5 {
	font-size: calc( 15px + (20 - 15) * ( (100vw - 300px) / ( 1600 - 300) ));}
.bold-title-centre {
	font-size: calc( 12px + (26 - 12) * ( (100vw - 300px) / ( 1600 - 300) ));}
#contact-wrap h4, #content p::first-letter, #description p::first-letter, #content h4::first-letter, #generator p::first-letter, #generator-left p::first-letter {
	font-size: 150%;}

.left-image, .entry-content .wp-block-image:nth-of-type(odd) img{
  float: left;
  margin: 0 10px 0 0;
  max-width: 45%;
  width: 100%;
}
.right-image, .entry-content .wp-block-image:nth-of-type(even) img{
  float: right;
  max-width: 45%;
  width: 100%;
  margin: 0 0 0 10px;
}

 
.right-image img, .left-image img,
.entry-content .wp-block-image:nth-of-type(odd) img,
.entry-content .wp-block-image:nth-of-type(even) img
 {
  border: inset;
  border-radius: 5px;
  padding: 5px;
  width: calc(100% - 17px);
  height: auto;
  max-width: 350px;
}



.featured-image img, .entry-content .wp-block-image:first-of-type img{
 max-width: 100%;
	height: 100%;
	max-height: 450px !important;border-style: inset;border-width: 10px;
 margin: auto;
display: block;
 }
 
 .portrait-image img {
	width: 100%;
	height: auto;
	max-width: 450px !important;
	border-style: inset;
	border-width: 10px;
	display: block;
	margin: auto;
 }
figcaption {
font-size: 13px;
text-align: center;
max-width: 300px;
margin: auto;
}


.entry-content .wp-block-image:not(:first-of-type) {
  height: fit-content;
  width: fit-content;
}

/* Odd blocks (after the first-of-type) float left */
.entry-content .wp-block-image:not(:first-of-type):nth-of-type(odd) {
  float: left;
}

/* Odd blocks (after the first-of-type) float left */
.entry-content .wp-block-image:not(:first-of-type):nth-of-type(even) {
  float: right;
}


.entry-content h2 {
    text-align: left !important;
    margin-top: 60px;
    border-top: 1px dashed #333;
    padding-top: 20px;
    clear: both;
}

.entry-content h3{
    padding-top: 30px;
    margin-bottom: -10px;
}
.wp-block-separator {
    clear: both;
}
.entry-content iframe{
max-width: 350px;
max-height: 670px;
margin: auto;
display: block;
}

.patreon-list {
color:#ff6900 !important;
padding-top: 0 !important;
background: -webkit-linear-gradient(left,orange,#ae4a03, #ff6900);
background-clip: border-box;
-webkit-background-clip: text;
-webkit-text-fill-color:transparent;
padding-bottom: 0px;
border: 5px solid;
clear: both;
}
.has-text-align-center {text-align: center;}
input[type=number] {
	width: 100%;
	max-width: 100px;
	box-sizing: border-box;
	padding: 2px 8px;
	border-radius: 30px;
	border-color: #cfa95c;
}

/*-----ADS-----------*/
.adslot_1 { overflow:hidden; max-height:90px;width:100%;}


#stpd_rangen\.co\.uk_728x90_anchor_desktop_1 {
    max-width: 780px;
    background-color: white;
    height: 120px !important;
}

html body div#div-custom-ad-1627079520617-0 div#google_ads_iframe_/147246189,21828330408/rangen.co.uk_728x90_anchor_desktop_1_0__container__ {
    margin-top: -20px !important;
}