@media (max-width: 640px) {
	.bookpage {
		font-size: 1.1em;
	}
	
	/* menu */
	#menubutton {
		cursor: pointer;
	}
	#menuclose {
		text-align: right;
		cursor: pointer;
	}
	#menulinks {
		position: absolute;
		left: -150px;
		top: 0;
		z-index: 1000;
		width: 110px;
		background-color: #282828;
		padding: 12px 15px 15px 15px;
		box-shadow: 0 0 3px 3px rgba(0,0,0,.2);
		transition: left .2s;
	}
	#menulinks a {
		display: block;
		font-size: 18px;
		line-height: 1.8;
	}
	#menulinks a:hover  {
		font-weight: bold;
	}
	
	/* blog */
	#blogtitle, #blogtitlefull {
		font-size: 31.1vw;
		letter-spacing: -1.66vw;
		margin-right: 1.2vw;
		text-shadow: .6vw -.6vw 1.2vw rgba(255,255,255,.7), 0 0 0 rgba(0,0,0,.25), 0 4px 20px rgba(0,0,0,.2);
	}
	#blogtitle {
		height: 26.3vw;
	}
	#asktitle {
		font-size: 7.775vw;
		letter-spacing: -.6vw;
	}
	
	/* commenting */
	#commentfloat {
		margin: 0 13px;
	}
	.commentreply {
		margin: 20px 15px 0 15px;
	}
	.makecommentwrapper {
		margin-top: 50px;
	}
	
	/* tipjar */
	#tipjar {
		position: relative;
		margin-top: 60px;
	}
	#tipjartitle {
		font-size: 3.8875vw;
	}
	#tipjaricon {
		font-size: 27.2125vw;
	}
	#tipjarimg {
		top: -15px;
		padding-right: 15px;
		width: 20vw;
		padding-top: calc((640px - 100vw) / 8);
	}
	#tipjarinfo2 {
		padding: 15px;
		padding-right: calc(25vw - 5px);
	}
	
	/* archive */
	#archivetitle {
		font-size: 21.84vw;
		letter-spacing: -1vw;
		text-shadow: .45vw -.45vw .9vw rgba(255,255,255,.7), 0 0 0 rgba(0,0,0,.25), 0 4px 20px rgba(0,0,0,.2);
	}
	
	/* map */
	#maptitle {
		font-size: 5.616vw;
	}
	
	/* social */
	#socialtitle {
		font-size: 26.52vw;
		letter-spacing: -1vw;
		text-shadow: .45vw -.45vw .9vw rgba(255,255,255,.7), 0 0 0 rgba(0,0,0,.25), 0 4px 20px rgba(0,0,0,.2);
	}
}
@media (min-width: 641px) {
	/* menu */
	#menubutton {
		display: none;
	}
	#menulinks {
		position: relative;
		left: -11px;
	}
	.menuseperatorleft {
		border-left: 1px solid #666666;
	}
	.menuseperatorright {
		border-right: 1px solid #000000;
	}
	#menuclose {
		display: none;
	}
	
	/* blog */
	#blogtitle, #blogtitlefull {
		font-size: 200px;
		letter-spacing: -10px;
		margin-right: 8px;
		text-shadow: 4px -4px 8px rgba(255,255,255,.7), 0 0 0 rgba(0,0,0,.25), 0 4px 20px rgba(0,0,0,.2);
	}
	#blogtitle {
		height: 170px;
	}
	#asktitle {
		font-size: 50px;
		letter-spacing: -4px;
	}
	
	/* commenting */
	#commentfloat {
		float: left;
		margin-left: 13px;
		width: 420px;
	}
	.commentreply {
		margin: 20px 15px 0 130px;
	}
	
	/* tipjar */
	#tipjar {
		position: absolute;
		width: 100%;
	}
	#tipjarinfo {
		display: none;
	}
	#tipjar:hover #tipjarinfo {
		display: block;
	}
	#tipjartitle {
		font-size: 25px;
	}
	#tipjaricon {
		font-size: 175px;
	}
	#tipjarimg {
		top: 0;
		padding-right: 32px;
		width: 128px;
	}
	#tipjarinfo2 {
		padding: 15px 160px 15px 15px;
	}
	
	/* archive */
	#archivetitle {
		font-size: 140px;
		letter-spacing: -6px;
		text-shadow: 3px -3px 6px rgba(255,255,255,.7), 0 0 0 rgba(0,0,0,.25), 0 4px 20px rgba(0,0,0,.2);
	}
	
	/* map */
	#maptitle {
		font-size: 36px;
	}
	
	/* social */
	#socialtitle {
		font-size: 170px;
		letter-spacing: -6px;
		text-shadow: 3px -3px 6px rgba(255,255,255,.7), 0 0 0 rgba(0,0,0,.25), 0 4px 20px rgba(0,0,0,.2);
	}
}

@media (min-width: 661px) {
	/* patreon */
	#heywoahtherepatreon {
		font-size: 16px;
	}
	
	/* archive */
	.archiveleft {
		width: 200px;
	}
	.archiveright {
		width: 360px;
	}
	.archivebooktitle {
		font-size: 25px;
	}
}
@media (max-width: 660px) {
	/* patreon */
	#heywoahtherepatreon {
		font-size: 2.4vw;
	}
	
	/* archive */
	.archiveleft {
		width: 30.3vw;
	}
	.archiveright {
		width: 54.55vw;
	}
	.archivebooktitle {
		font-size: 3.65vw;
	}
}

@media (max-width: 839px) {
	#header #socialmedia {
		top: 42px;
	}
}
@media (min-width: 840px) {
	#header #socialmedia {
		top: 413px;
	}
	#startreadinghere {
		left: -50px;
	}
}

#blogtitle, #blogtitlefull, #archivetitle, #socialtitle {
	color: rgba(135,192,204,.35);
}
.linkloop, .socialcontent a, .archivecontent a, .blogpost a, #menulinks a:hover, #menubutton:hover, #menuclose:hover, #startreadinghere {
	color: #79acb7;
}

html {
	height: 100%;
	scroll-behavior: smooth;
}
body {
	height: auto;
	margin: 0;
	padding: 0;
	font-family: Molengo, Verdana, sans-serif;
	color: #000000;
	font-size: 15px;
	background-color: #ffffff;
}
a {
	color: #000000;
}
p { margin: 0; }
.titlepage {
	margin: 100px 0 200px 0;
	min-height: 400px;
}
h1 {
	text-align: right;
	margin: 25px 0 50px 0;
	line-height: 1.2;
}
h2, h3 {
	text-align: center;
	margin: 20px 0;
	font-family: 'IM Fell DW Pica SC';
	font-weight: normal;
	line-height: 0.8;
}
h2 {
	font-size: 80px;
}
h2 .titlepagefirst {
	font-size: 70px;
}
h3 {
	font-size: 30px;
}
h3 .titlepagefirst {
	font-size: 27px;
}
hr {
	border: 0;
	height: 1px;
	width: 35%;
	margin-top: 40px;
	margin-bottom: 40px;
	background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.40), rgba(0, 0, 0, 0));
}

.content {
	max-width: 640px;
	margin-left: auto;
	margin-right: auto;
}
#menu {
	height: 28px;
	background: #3c3c3c;
	padding: 10px 0 0 10px;
	color: #e0e0e0;
}
#menulinks a {
	padding: 0 12px;
	color: #ffffff;
	text-decoration: none;
}
#menu .fa-bars {
	font-size: 13px;
	padding: 0 5px 1px 0;
}
#menulogin {
	width: 185px;
}
#menulogout {
	width: 96px;
}
#menulogin, #menulogout {
	position: absolute;
	top: 9px;
	right: 0px;
	cursor: pointer;
	color: #ffffff;
	font: bold 11px Verdana;
}
#menulogin:hover, #menulogout:hover {
	color: #f96854;
}
#menulogin .fa-patreon, #menulogout .fa-sign-out-alt {
	color: #ffffff;
	background-color: #f96854;
	padding: 5px;
	margin-right: 2px;
	border-radius: 6px;
	font-weight: normal;
	font-size: 12px;
	position: relative;
	top: -1px;
	vertical-align: middle;
}

#logo, #logo2 {
	position: absolute;
	top: 38px;
	z-index: 999;
}
#logo {
	left: calc((100vw - 300px) / 2);
	width: 300px;
	padding-top: 35px;
}
#logo2 {
	left: calc((100vw - 150px) / 2);
	width: 150px;
}

#header {
	background: url('https://www.leechesloom.com/img/header.jpg');
	background-position: center -28px;
	overflow: hidden;
	height: 400px;
	box-shadow: inset 0px 20px 5px -15px rgba(0,0,0,.25), inset 0px -20px 5px -15px rgba(0,0,0,.25);
}
#fillcontent {
	min-height: calc(100vh - 244px);
	padding: 0;
}
#fillcontent2 {
	min-height: calc(100vh - 494px);
	padding: 0;
}
#footer {
	background: url('https://www.leechesloom.com/img/header.jpg');
	background-position: center center;
	height: 56px;
	color: #ffffff;
}
#footerfill {
	background: rgba(40,40,40,.35);
	box-shadow: inset 0px 20px 5px -15px rgba(0,0,0,.25), inset 0px -30px 30px -30px rgba(0,0,0,.75);
	padding: 20px 10px 0 10px;
	height: 36px;
	text-align: center;
}
#homemenu {
	position: relative;
	top: -49px;
	height: 84px;
}
#homemenu-first {
	position: absolute;
	left: 10px;
	top: 0;
	width: 102px;
	height: 84px;
	cursor: pointer;
	background: url('img/home-menu/first.png');
}
#homemenu-first:hover {
	background-position: -102px 0;
}
#homemenu-latest {
	position: relative;
	left: 10px;
	margin-left: auto;
	margin-right: auto;
	width: 120px;
	height: 84px;
	cursor: pointer;
	background: url('img/home-menu/latest.png');
}
#homemenu-latest:hover {
	background-position: -120px 0;
}
#homemenu-last {
	position: absolute;
	right: 10px;
	top: 0;
	width: 102px;
	height: 84px;
	cursor: pointer;
	background: url('img/home-menu/last.png');
}
#homemenu-last:hover {
	background-position: -102px 0;
}


/* floating motes */
#header2 {
	background: url('https://www.leechesloom.com/img/header.jpg');
	background-position: center -180px;
	overflow: hidden;
	z-index: 998;
}
.motes1 {
	height: 400px;
}
.motes2 {
	height: 150px;
}
#header2 {
	height: 150px;
	position: sticky;
	top: -120px;
	box-shadow: inset 0px 20px 5px -15px rgba(0,0,0,.25), inset 0px -20px 5px -15px rgba(0,0,0,.25);
}
#scrolltotop {
	position: absolute;
	right: 10px;
	height: 17px;
	width: 18px;
	text-align: center;
	color: #ffffff;
	cursor: pointer;
	opacity: 0;
	bottom: 7px;
}
#scrolltotop .fa-arrow-up {
	border-top: 2px solid #ffffff;
	padding-top: 1px;
	opacity: 0.4;
}
#scrolltotop:hover .fa-arrow-up {
	opacity: 1;
}


/* social media, following */
#socialmedia {
	position: absolute;
	height: 1px;
	width: 100px;
	left: 5px;
	z-index: 10;
	color: #ffffff;
}
#header2 #socialmedia {
	bottom: 24px;
}
.iconize {
	display: inline-block;
	vertical-align: top;
	border-radius: 5px;
	padding-top: 2px;
	margin-right: 4px;
	font-size: 15px;
	width: 20px;
	height: 18px;
	text-align: center;
	opacity: 0.4;
	animation-duration: 20s;
	animation-iteration-count: infinite;
}
.iconize:hover {
	opacity: 1;
}
#socialmedia a {
	text-decoration: none;
	color: white;
}
.fa-facebook {
	position: relative;
	left: 2px;
}
.fa-rss {
	font-size: 14px;
	position: relative;
	top: -1px;
}
.fa-envelope {
	font-size: 14px;
	position: relative;
	top: -1px;
}
.icon-facebook {
	animation-name: icon-facebook;
	animation-timing-function: ease;
}
.icon-twitter {
	animation-name: icon-twitter;
	animation-timing-function: ease;
}
.icon-rss {
	animation-name: icon-rss;
	animation-timing-function: ease;
}
.icon-mail {
	animation-name: icon-mail;
	animation-timing-function: ease;
}
@keyframes icon-facebook {
	0%   { transform: translateY(0); }
	92%  { transform: translateY(0); }
	93%  { transform: translateY(-3px); }
	95%  { transform: translateY(3px); }
	96%  { transform: translateY(0); }
	100% { transform: translateY(0); }
}
@keyframes icon-twitter {
	0%   { transform: translateY(0); }
	93%  { transform: translateY(0); }
	94%  { transform: translateY(-3px); }
	96%  { transform: translateY(3px); }
	97%  { transform: translateY(0); }
	100% { transform: translateY(0); }
}
@keyframes icon-rss {
	0%   { transform: translateY(0); }
	94%  { transform: translateY(0); }
	95%  { transform: translateY(-3px); }
	97%  { transform: translateY(3px); }
	98%  { transform: translateY(0); }
	100% { transform: translateY(0); }
}
@keyframes icon-mail {
	0%   { transform: translateY(0); }
	95%  { transform: translateY(0); }
	96%  { transform: translateY(-3px); }
	98%  { transform: translateY(3px); }
	99%  { transform: translateY(0); }
	100% { transform: translateY(0); }
}
.icon-facebook:hover {
	background: #3b5998;
}
.icon-twitter:hover {
	background: #55acee;
}
.icon-rss:hover {
	background: #ff6600;
}
.icon-mail:hover {
	background: #00b489;
}


/* Book text, preferences menu */

#booktext {
	margin: 0px 40px 40px 40px;
	text-indent: 1.5em;
	text-align: justify;
	min-height: 500px;
}
.bookpage {
	overflow: hidden;
	height: 0px;
	opacity: 0;
	transition: max-height 2s, opacity 1s;
}
.bookpage:target {
	padding-top: 61px;
	height: auto;
	opacity: 1;
}
.bookpage img {
	width: 100%;
	margin-left: -22px;
	border-radius: 5px;
	box-shadow: 0 10px 10px -10px rgba(0,0,0,.25);
}

#readermenu {
	width: 100%;
	height: 1px;
	position: sticky;
	z-index: 999;
	top: 30px;
}
#readermenu .content {
	text-align: right;
}
#readermenu p {
	padding: 10px 0 3px 3px;
}


/* bookmark */
#prefsbookmark {
	position: relative;
	display: inline-block;
	left: 0px;
	top: 0px;
	z-index: 2;
	width: 40px;
	height: 40px;
	float: left;
	text-align: center;
	cursor: pointer;
	overflow: hidden;
}
#prefsbookmarkflag {
	bottom: 5px;
}
#prefsbookmarkflag, #prefsbookmarkonoff {
	position: relative;
	-webkit-transition: .2s;
	transition: bottom .2s;
}
#prefsbookmark:hover .prefsbookmarkOn #prefsbookmarkflag {
	bottom: 0px;
}
#prefsbookmark:hover .prefsbookmarkOff #prefsbookmarkflag {
	bottom: -20px;
}
#prefsbookmarkbounce {
	position: relative;
	-webkit-transition: .2s;
	transition: bottom .2s;
}
.prefsbookmarkOn {
	bottom: 0px;
}
.prefsbookmarkOff {
	bottom: 45px;
}
.prefsbookmarkOn #prefsbookmarkbounce {
	bottom: 5px;
	transition-delay: .2s;
}
.prefsbookmarkOff #prefsbookmarkbounce {
	bottom: 0px;
}


/* preferences */
#prefshover {
	position: relative;
	display: inline-block;
	right: 0px;
	top: 5px;
	cursor: pointer;
}
#prefsbutton {
	padding: 10px;
	border-radius: 5px;
}
#prefsbuttonclose {
	display: none;
	width: 33px;
	border-radius: 0 5px 5px 0;
	box-shadow: -2px 2px rgba(0, 0, 0, 0.2);
}
#prefsbuttonclose2 {
	padding: 10px 12px 10px 10px;
	width: 11px;
	border-radius: 0 5px 5px 0;
	background-color: rgba(0,0,0,0.06);
}
#prefsmenu {
	display: none;
	position: absolute;
	right: 33px;
	top: 0px;
	width: 240px;
}
#prefsmenu2 {
	padding: 13px 15px 10px 10px;
	text-align: left;
	font-family: Verdana, sans-serif;
	font-size: 11px;
	background-color: rgba(0,0,0,0.06);
	box-shadow: -2px 2px rgba(0, 0, 0, 0.2);
}
#prefsmenu, #prefsmenu2 {
	border-radius: 5px 0 5px 5px;
}
#prefsbookmarkbutton, #prefsbookmarkviewall {
	display: inline-block;
	background-color: rgba(0,0,0,0.14);
	height: 12px;
	padding: 10px;
	margin: 0 0 4px 1px;
	text-align: center;
	cursor: pointer;
	-webkit-transition: .2s;
	transition: background-color .2s;
}
#prefsbookmarkbutton {
	border-radius: 10px 0 0 10px;
	width: 118px;
}
#prefsbookmarkviewall {
	border-radius: 0 10px 10px 0 ;
	width: 54px;
}
#prefsbookmarkbutton:hover, #prefsbookmarkviewall:hover {
	background-color: rgba(0,0,0,0.2);
}
#prefsfont {
	position: relative;
}
#prefsfontarrow {
	position: absolute;
	right: 10px;
	top: 9px;
	font-size: 16px;
}
#prefsfontselect {
	height: 36px;
}
#prefcurfont {
	width: 195px;
	height: 15px;
	padding: 7px 10px 10px 10px;
	-webkit-transition: .2s;
	transition: background-color .2s;
}
#prefcurfont, #prefsfontmenu {
	margin-left: 1px;
}
#prefcurfont, #prefsfontmenu2 {
	background-color: rgba(0,0,0,0.14);
	font-size: 14px;
}
#prefcurfont, #prefsfontmenu, #prefsfontmenu2, #prefsfontmenu2 p {
	border-radius: 10px;
}
#prefsfontmenu {
	display: none;
	position: absolute;
	z-index: 2;
	top: 33px;
	width: 215px;
}
#prefsfontmenu2 p {
	height: 15px;
	padding: 7px 10px 10px 10px;
	-webkit-transition: .2s;
	transition: background-color .2s;
}
#prefsfont:hover #prefsfontmenu {
	display: block;
	cursor: pointer;
}
#prefsfont:hover #prefcurfont {
	background-color: rgba(0,0,0,0.2);
}
#prefsfontmenu2 p:hover {
	background-color: rgba(92,174,174,0.7); /* #5caeae; */
}
input[type=range] {
	-webkit-appearance: none;
	margin: 0;
	padding: 0;
	width: 100%;
	opacity: 0.7;
	outline: none;
	background: transparent;
	-webkit-transition: .2s;
	transition: opacity .2s;
}
input[type=range]:hover {
	opacity: 1;
}
input[type=range]::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 18px;
	height: 18px;
	background: #5caeae;
	border-radius: 6px;
	border: 0;
	cursor: pointer;
}
input[type=range]::-moz-range-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 18px;
	height: 18px;
	background: #5caeae;
	border-radius: 6px;
	border: 0;
	cursor: pointer;
}
input[type=range]::-ms-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 18px;
	height: 18px;
	background: #5caeae;
	border-radius: 6px;
	border: 0;
	cursor: pointer;
}
input[type=range]::-webkit-slider-runnable-track {
	width: 100%;
	height: 8px;
	border-radius: 4px;
	background: rgba(0,0,0,0.2);
	cursor: pointer;
}
input[type=range]::-moz-range-track {
	width: 100%;
	height: 8px;
	border-radius: 4px;
	background: rgba(0,0,0,0.2);
	cursor: pointer;
}
input[type=range]::-ms-track {
	width: 100%;
	height: 8px;
	background: transparent;
	cursor: pointer;
	border-color: transparent;
	border-width: 5px 0;
	color: transparent;
}
input[type=range]::-ms-fill-lower {
	border-radius: 4px;
	background: rgba(0,0,0,0.2);
}
input[type=range]::-ms-fill-upper {
	border-radius: 4px;
	background: rgba(0,0,0,0.2);
}


/* Lower page border */
#pagecurl {
	position: relative;
	text-align: center;
}
#pageleft, #pageright {
	padding-bottom: 3px;
	height: 70px;
	width: 120px;
	position: absolute;
	color: #000000;
	font-size: 20px;
}
#pageleft span, #pageright span {
	opacity: 0.3;
}
#pagemid {
	padding-top: 3px;
	height: 70px;
	width: 100%;
	font-size: 12px;
	letter-spacing: 1px;
}
#pagecurl a {
	padding: 25px 40px;
	color: #000000;
	text-decoration: none;
	border-radius: 10px;
	opacity: 0.65;
	position: relative;
}
#pagecurl a:hover {
	opacity: 1;
	color: #5caeae;
}
@media (max-width: 480px) {
	#pagecurl {
		margin: 0 0 40px 0;
		background: url('/img/page-mid.png') bottom repeat-x;
	}
	#pageleft {
		left: 0px;
	}
	#pageright {
		right: 0px;
	}
}
@media (min-width: 481px) {
	#pagecurl {
		margin: 0 120px 40px 120px;
	}
	#pageleft {
		background: url('/img/page-left.png') bottom left no-repeat;
		left: -120px;
	}
	#pageright {
		background: url('/img/page-right.png') bottom right no-repeat;
		right: -120px;
	}
	#pagemid {
		background: url('/img/page-mid.png') bottom repeat-x;
	}
}


/* commenting */
#commentfloat {
	position: relative;
	margin-bottom: 40px;
}
.commentmenu {
	height: 30px;
	overflow: visible;
}
.makecomment {
	border: 1px solid rgba(0,0,0,.2);
	border-radius: 5px;
	background-color: rgba(255,255,255,.5);
	padding: 5px 5px 8px 10px;
	box-shadow: inset 0 -3px 0 rgba(0,0,0,.2), 0 0 3px rgba(0,0,0,.1), 0 1px 2px rgba(0,0,0,.3), 0 3px 3px rgba(0,0,0,.2);
}
.commenttext, .commentsubmit {
	font-family: Molengo, Verdana, sans-serif;
	font-size: 15px;
}
.commenttext {
	width: 100%;
	height: 144px;
	background: transparent;
	border: 0;
	margin: 0;
	padding: 5px 0;
	outline: none;
	resize: none;
}
.commentsubmit {
	float: right;
	border: 0;
	border-radius: 5px;
	padding: 5px 10px;
	margin-top: 10px;
	background-color: rgba(0,0,0,.2);
	cursor: pointer;
}
.commentsubmit:hover {
	background-color: rgba(0,0,0,.15);
}
.commentsubmitprofile {
	float: right;
	width: 32px;
	text-align: left;
	font-size: 26px;
	padding-top: 11px;
}
.commentsubmitprofile img {
	width: 26px;
	height: 26px;
	border-radius: 100%;
}


/* emojis */
.commentemojibutton {
	float: left;
	border-radius: 5px;
	padding: 4px 4px 5px 5px;
	margin-top: 10px;
	cursor: pointer;
}
.commentemojibutton:hover {
	background-color: rgba(0,0,0,.2);
}
.commentemojibuttonclose {
	display: none;
	position: relative;
	float: left;
	margin-top: 10px;
}
.commentemojibuttonactual {
	padding: 10px 10px 10px 12px;
	border-radius: 5px 0 0 5px;
	width: 11px;
	cursor: pointer;
}
.commentemojimenu {
	position: absolute;
	z-index: 2;
	top: -10px;
	left: 33px;
	margin-top: 10px;
	width: 240px;
}
.commentemojimenu2 {
	padding: 11px 3px 3px 4px;
	text-align: left;
	font-family: Verdana, sans-serif;
	font-size: 12px;
}
.commentemojimenu, .commentemojimenu2 {
	border-radius: 0 5px 5px 5px;
}
.commentemojimenu2, .commentemojibuttonactual {
	background-color: rgba(0,0,0,0.06);
	box-shadow: 2px 2px rgba(0, 0, 0, 0.2);
}
.emojimenu {
	background-color: rgba(0,0,0,0.14);
	cursor: pointer;
	-webkit-transition: .2s;
	transition: background-color .2s;
}
.emojimenuactive {
	background-color: rgba(0,0,0,0.26);
}
.emojimenu, .emojimenuactive {
	display: inline-block;
	height: 16px;
	width: 20px;
	padding: 5px 5px 6px 5px;
	margin: 0 0 9px 1px;
	text-align: center;
}
.emojimenu:hover {
	background-color: rgba(0,0,0,0.2);
}
.emojimenufirst {
	border-radius: 10px 0 0 10px;
	padding-left: 7px;
	margin-left: 6px;
}
.emojimenulast {
	border-radius: 0 10px 10px 0;
	padding-right: 7px;
}
.emojilist {
	padding: 6px 0 5px 10px;
	background-color: rgba(255,255,255,.75);
	border-radius: 0 0 0 3px;
	box-shadow: inset 0 1px 2px rgba(0,0,0,.5);
	font-size: 16px;
	height: 135px;
	overflow-y: scroll;
}
.emojilist div {
	display: inline-block;
	margin: 3px 7px 3px 0;
	width: 22px;
	cursor: pointer;
}
.emojilist div:hover {
	opacity: 70%;
}


/* actual commments */
.comment {
	position: relative;
	padding-bottom: 12px;
}
.commenthr {
	height: 1px;
	background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.20), rgba(0, 0, 0, 0.20), rgba(0, 0, 0, 0.20), rgba(0, 0, 0, 0.20), rgba(0, 0, 0, 0));
}
.commenthrreply {
	margin: 0 65px 0 130px;
}
.commentprofile, .commentprofilesmall, .commentbadge, .commentbadgesmall {
	position: absolute;
	left: 0;
	top: 0;
}
.commentprofile {
	padding: 30px 0 0 20px;
}
.commentprofilesmall {
	padding: 19px 0 0 45px;
}
.commentbadgesmall {
	left: 30px;
}
.commentprofile img, .commentprofilesmall img {
	border-radius: 100%;
}
.commentbyline {
	padding: 10px 0 0 130px;
	height: 20px;
	font-size: 13px;
	font-style: italic;
	color: rgba(0, 0, 0, 0.35);
}
.commentwords {
	padding: 0 15px 0 130px;
	min-height: 70px;
	line-height: 1.3;
}
.commentreply {
	position: relative;
	text-align: right;
	clear: both;
}
.commentreply .fa-reply, .commentreply .fa-times, .commentreply .fa-star, .commentreply .fa-eye-slash {
	font-size: 13px;
	margin-right: 4px;
}
.commentreply .fa-spinner {
	font-size: 13px;
	animation: spinnersgonnaspin 1.5s linear infinite;
}
@keyframes spinnersgonnaspin {
	0%{ transform:rotate(0deg); }
	100%{ transform:rotate(360deg); }
}
.commentreply span {
	color: rgba(0,0,0,.35);
	cursor: pointer;
}
.commentreply span:hover {
	color: rgba(0,0,0,.7);
}
#commentreadmore {
	position: relative;
}
#commentreadmorepos {
	position: absolute;
	top: -11px;
	width: 100%;
}
#commentreadmorebutton {
	width: 160px;
	margin-left: auto;
	margin-right: auto;
	font-size: 13px;
	color: rgba(0,0,0,.7);
	cursor: pointer;
	text-align: center;
	cursor: pointer;
	padding: 3px 0;
	border-radius: 3px;
	box-shadow: inset 0 0 1px 1px rgba(0,0,0,.2);
}
#commentreadmorebutton:hover {
	color: #000000;
	box-shadow: inset 0 0 1px 1px rgba(0,0,0,.4);
}
#hiddencomments {
	display: none;
}
.commentlogin {
	position: absolute;
	left: -3px;
	right: -3px;
	top: -3px;
	bottom: 7px;
	padding: 10px;
	border-radius: 5px;
	background: repeating-linear-gradient(-55deg, rgba(255,255,255,.2), rgba(255,255,255,.2) 5px, rgba(0,0,0,.05) 5px, rgba(0,0,0,.05) 10px);
}
.login-anon {
	margin-top: 33px;
	background-color: #fc9954;
}
.login-anon:hover {
	background-color: #fca365;
}
.login-patreon {
	background-color: #f96854;
}
.login-patreon:hover {
	background-color: #fa7765;
}
.login-details {
	font-size: 13px;
	text-align: left;
}
.login-patreon, .login-anon, .login-details {
	max-width: 200px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 3px;
	padding: 6px 10px 8px 10px;
	border: 1px solid rgba(0,0,0,.2);
	border-radius: 5px;
}
.login-patreon, .login-anon {
	box-shadow: inset 0 -1px 0 rgba(0,0,0,.2);
	text-align: center;
	cursor: pointer;
	color: #ffffff;
	font: bold 11px Verdana;
}
.login-patreon .fa-patreon {
	font-weight: normal;
	font-size: 12px;
	position: relative;
	top: 1px;
}


/* map */
#mapedge {
	background-image: url('/img/map/map-corner-shadow-left.png'), url('/img/map/map-corner-shadow-right.png'), url('/img/map/map-edge.png');
	background-position: left bottom, right bottom, left bottom;
	background-repeat: no-repeat, no-repeat, repeat-x;
	height: 70px;
	margin-top: 120px;
}
#maptitle {
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
	position: relative;
	top: 25px;
	right: 40px;
	text-align: right;
	font-family: 'Beth Ellen';
	color: rgba(0,0,0,.5);
	white-space: nowrap;
	z-index: 10;
	transform: rotate(5deg);
}
#maptexture {
	background-image: url('/img/map/paper-texture.jpg');
	box-shadow: inset 70px 0 70px -70px rgba(0,0,0,.25), inset -70px 0 70px -70px rgba(0,0,0,.25), inset 0 -70px 70px -70px rgba(0,0,0,.25);
}
#mapcontainer {
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
	padding: 0 10px;
}
#theactualmapfinallyjeez {
	background-image: url('/img/map/map.png');
	background-size: 100% 100%;
	position: relative;
	width: 100%;
	padding-top: 62.5%
}
.mappin {
	position: absolute;
	cursor: default;
}
.mappin:hover .maphovertopleft, .mappin:hover .maphovertopright, .mappin:hover .maphoverbotleft, .mappin:hover .maphoverbotright {
	display: block;
}
.mapmarker, .mapmarkeron {
	position: absolute;
	top: -27px;
	left: -10px;
	width: 20px;
	height: 30px;
}
.mapmarker {
	background: url('/img/map/map-pin.png');
}
.mapmarkeron {
	background: url('/img/map/map-pin-active.png');
}
.maphovertopleft, .maphovertopright, .maphoverbotleft, .maphoverbotright {
	position: absolute;
	display: none;
	font-family: 'Beth Ellen';
	font-size: 23px;
	height: 22px;
	white-space: nowrap;
	z-index: 10;
}
.maphovertopleft {
	top: -70px;
	right: -20px;
	transform: rotate(-15deg);
}
.maphovertopright {
	top: -70px;
	left: -25px;
	transform: rotate(15deg);
}
.maphoverbotleft {
	top: -15px;
	right: -30px;
	transform: rotate(15deg);
}
.maphoverbotright {
	top: -15px;
	left: -35px;
	transform: rotate(-15deg);
}


/* logout */
#logoutoverlay {
	position: fixed;
	display: none;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1001;
}
#overlaybackground {
	background-color: rgba(60,60,60,0.5);
	width: 100%;
	height: 100%;
	z-index: 901;
	cursor: pointer;
}
#overlaybox {
	position: absolute;
	top: 15%;
	left: calc((100vw - 300px) / 2);
	background-color: #ffffff;
	border-radius: 10px;
	width: 250px;
	text-align: center;
	font-size: 16px;
	padding: 25px;
	box-shadow: inset 0 -5px 10px -5px rgba(0,0,0,.2), 0 0 15px rgba(0,0,0,.05), 0 0.3px 1.7px rgba(0, 0, 0, 0.022), 0 0.9px 4.3px rgba(0, 0, 0, 0.031), 0 1.8px 8.9px rgba(0, 0, 0, 0.039), 0 3.7px 18.3px rgba(0, 0, 0, 0.048), 0 10px 50px rgba(0, 0, 0, 0.07);
	z-index: 902;
}
#overlayclose {
	position: absolute;
	right: -5px;
	top: -5px;
	background-color: #ffffff;
	border-radius: 100%;
	width: 20px;
	height: 20px;
	text-align: center;
	box-shadow: 0 1px 5px rgba(0,0,0,.3);
	cursor: pointer;
}
#overlayclose .fa-times {
	font-size: 12px;
	color: #666666;
	padding-top: 2px;
}
#overlayclose:hover .fa-times {
	color: #cc0000;
}
#overlaythisdevice, #overlayalldevices {
	width: 114px;
	padding: 20px 0;
	cursor: pointer;
	border-radius: 10px;
	box-shadow: inset 0 -2px 0 rgba(0,0,0,.2), 0 1px 3px rgba(0,0,0,.2), 0 3px 10px rgba(0,0,0,.2);
}
#overlaythisdevice {
	float: left;
	background-color: #fc9954; // #53daf2
}
#overlaythisdevice:hover {
	background-color: #fca365; // #6de0f4
}
#overlayalldevices {
	float: right;
	background-color: #f96854; // #f9cc54
}
#overlayalldevices:hover {
	background-color: #fa7765; // #fad46d
}


/* front page */
#hello {
	padding: 0 10px;
	font-size: 1.05em;
}
#prefspreview {
	margin: 40px auto;
	max-width: 465px;
	border-radius: 5px;
	box-shadow: 0 0.9px 2.3px rgba(0, 0, 0, 0.024), 0 2.5px 6.3px rgba(0, 0, 0, 0.035), 0 6px 15.1px rgba(0, 0, 0, 0.046), 0 10px 50px rgba(0, 0, 0, 0.07);
}
#prefspreview img {
	width: 100%;
}
#startreadinghere {
	position: relative;
	top: -50px;
	font-size: 17px;
	font-weight: bold;
	transform: rotate(-2deg);
	cursor: default;
	padding-left: 36px;
}
#startreadinghere .fa-share {
	position: absolute;
	left: 0;
	top: -8px;
	font-size: 30px;
	transform: rotate(-40deg);
}
#hello .fa-bars {
	font-size: .8em;
	padding: 0 2px;
}


/* patreon */
.patreoncontent {
	max-width: 640px;
	padding: 30px 10px 0 10px;
	margin-left: auto;
	margin-right: auto;
}
#patreonleft {
	padding-bottom: 30px;
}
#patreonright .tiercardleft {
	float: left;
	width: 50%;
}
#patreonright .tiercardright {
	float: right;
	width: 50%;
}
#patreonright .tiercard2 {
	padding: 5px;
}
#tierstotheside {
	display: none;
}
#patreonleft2 {
	font-size: 16px;
}
#patreonright img {
	width: 100%;
}
#patreonright .tiertitle {
	text-align: center;
	font-size: 18px;
	font-weight: bold;
}
#patreonright .tierprice {
	text-align: center;
	font-size: 34px;
	font-weight: bold;
}
#patreonright .tierpermonth {
	text-align: center;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: 2px;
	color: rgba(0,0,0,0.5);
}
#patreonright ul {
	position: relative;
	left: -10px;
	padding-bottom: 10px;
}
#patreonright li {
	padding-top: 5px;
}
.tierprice span {
	position: relative;
}
.becomeapatron {
	font-size: 26px;
	color: #ffffff;
	text-align: center;
	background-color: #f96854;
	margin-top: 30px;
	padding-top: 10px;
	height: 40px;
	border-radius: 25px;
	cursor: pointer;
}
.becomeapatron:hover {
	background-color: #fa7765;
}
.becomeapatron .fa-patreon {
	position: relative;
	top: 2px;
}
#heywoahtherepatreon {
	background-color: #f96854;
	border-radius: 37px;
	padding: 10px 20px 10px 10px;
	color: #ffffff;
	overflow: hidden;
}
#heywoahtherepatreon a {
	color: #ffffff;
}
#heywoahtherepatreon a:hover {
	font-weight: bold;
}
#heywoahtitle {
	font-size: 2em;
	float: left;
	margin: -.3em 0;
	padding-right: 20px;
	line-height: .75em;
	font-weight: bold;
	transform: rotate(-5deg);
}
#heywoahtherepatreon .fa-exclamation-circle {
	font-size: 3.4em;
	float: left;
	padding-right: 10px;
}
#patreonreturn {
	text-align: center;
	font-style: italic;
	padding-top: 4px;
	font-size: .8em;
}
#patreonreturn, #patreonreturn a {
	color: rgba(0,0,0,.35);
}


/* blogs */
#blogtitlefull {
	padding-bottom: 25px;
}
#blogtitle, #blogtitlefull {
	overflow: hidden;
	text-align: center;
	font-family: 'Titan One';
}
#askmeanything {
	padding: 20px 20px 25px 20px;
	margin: 0 20px 80px 20px;
	background-color: rgba(0,0,0,.04);
	border-radius: 20px;
	box-shadow: inset 0 -5px 10px -5px rgba(0,0,0,.1), 0 0 15px rgba(0,0,0,.05), 0 0.3px 1.7px rgba(0, 0, 0, 0.022), 0 0.9px 4.3px rgba(0, 0, 0, 0.031), 0 1.8px 8.9px rgba(0, 0, 0, 0.039), 0 3.7px 18.3px rgba(0, 0, 0, 0.048), 0 10px 50px rgba(0, 0, 0, 0.07);
}
#asktitle {
	font-weight: bold;
	font-family: 'Spectral';
	margin: -25px 0 -5px 0;
}
.questionasked {
	text-align: center;
	font-size: 16px;
	padding: 30px 0;
	font-style: italic;
}
.blogposttitle, .blogquestion, .blogpost {
	font-family: Spectral, Georgia, serif;
}
.blogposttitle {
	font-size: 30px;
	font-weight: bold;
	letter-spacing: -2px;
	padding: 0 0 0 18px;
}
.blogquestion {
	font-size: 22px;
	padding: 10px 20px;
	margin: 0 20px 10px 20px;
	border-radius: 5px;
	background-color: rgba(0,0,0,.04);
	box-shadow: 0 10px 10px -10px rgba(0,0,0,.2);
}
.blogpost {
	font-size: 15px;
	line-height: 1.9;
	padding: 15px 10px 30px 10px;
	margin: 0 10px 80px 10px;
	box-shadow: 0 10px 10px -10px rgba(0,0,0,.25);
}
.blogpostphoto {
	border-radius: 5px;
	box-shadow: 0 10px 10px -10px rgba(0,0,0,.25);
}
.blogpostphotocontainer {
	margin: 15px 21px 80px 21px;
}
.blogpost img, .blogpostphoto {
	max-width: 100%;
}
.blogloadmore {
	width: 120px;
	margin-left: auto;
	margin-right: auto;
	font: 14px ;
	color: rgba(0,0,0,.7);
	cursor: pointer;
	text-align: center;
	cursor: pointer;
	padding: 5px 0;
	border-radius: 3px;
	box-shadow: inset 0 0 1px 1px rgba(0,0,0,.2);
}
.blogloadmore:hover {
	color: #000000;
	box-shadow: inset 0 0 1px 1px rgba(0,0,0,.4);
}
.blogloading {
	width: 50px;
	height: 40px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	font-size: 10px;
}
.blogloading > div {
	background-color: rgba(0,0,0,.25);
	margin: 1px;
	height: 100%;
	width: 5px;
	display: inline-block;
	-webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
	animation: sk-stretchdelay 1.2s infinite ease-in-out;
}
.blogloading .rect2 {
	-webkit-animation-delay: -1.1s;
	animation-delay: -1.1s;
}
.blogloading .rect3 {
	-webkit-animation-delay: -1.0s;
	animation-delay: -1.0s;
}
.blogloading .rect4 {
	-webkit-animation-delay: -0.9s;
	animation-delay: -0.9s;
}
@-webkit-keyframes sk-stretchdelay {
	0%, 40%, 100% { -webkit-transform: scaleY(0.4); }  
	20% { -webkit-transform: scaleY(1.0); }
}
@keyframes sk-stretchdelay {
	0%, 40%, 100% { transform: scaleY(0.4); -webkit-transform: scaleY(0.4); }
	20% { transform: scaleY(1.0); -webkit-transform: scaleY(1.0); }
}


/* tipjar */
.commentandtipjar {
	position: relative;
}
#tipjarimg {
	z-index: 502;
	position: absolute;
	right: 10px;
}
#tipjarimg img {
	width: 100%;
}
#tipjarinfo {
	z-index: 501;
	position: relative;
	left: 0;
	top: -17px;
	width: 100%;
	height: 230px;
}
#tipjarinfo2 {
	position: relative;
	margin: 15px;
	height: 175px;
	border-radius: 10px;
	overflow: hidden;
	background-color: rgba(0,0,0,.02);
	box-shadow: inset 0 -5px 10px -5px rgba(0,0,0,.1), inset 0 -2px 0 rgba(0,0,0,.2), 0 0 3px rgba(0,0,0,.15), 0 2px 2px rgba(0,0,0,.1);
}
#tipjartitle {
	font-weight: bold;
	font-family: Spectral;
	padding-bottom: 5px;
}
#tipjarbutton {
	background-color: #fc9954;
	max-width: 200px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 15px;
	padding: 6px 10px 8px 10px;
	border: 1px solid rgba(0,0,0,.2);
	border-radius: 5px;
	box-shadow: inset 0 -1px 0 rgba(0,0,0,.2);
	text-align: center;
	cursor: pointer;
	color: #ffffff;
	font: bold 11px Verdana;
}
#tipjarbutton:hover {
	background-color: #fca365;
}
#tipjaricon {
	position: absolute;
	top: -35px;
	left: -10px;
	color: rgba(0,0,0,.035);
	transform: rotate(-5deg);
	z-index: -1;
}


/* archive */
.archivecontent {
	padding: 0 20px 40px 20px;
	font-size: 18px;
}
#archivetitle {
	margin-bottom: 3%;
	overflow: hidden;
	text-align: center;
	font-family: 'Titan One';
}
.archiveleft {
	float: left;
	margin-top: 10px;
}
.archiveleft img {
	width: 100%;
}
.archiveright {
	float: right;
	font-family: Spectral;
	line-height: 1.7;
}
.archiveleft, .archiveright {
	margin-bottom: 40px;
}
.archivebooktitle {
	margin-left: -1px;
	font-weight: bold;
	padding-bottom: 20px;
}
.archivebooktitle span {
	box-shadow: 0 10px 10px -10px rgba(0,0,0,.2);
}
.archiveright a {
	margin-right: 15px;
}
.archiveright a:hover {
	font-weight: bold;
}
.archiveright .fa-bookmark, .archiveright .fa-eye {
	font-size: .7em;
	color: rgba(0,0,0,.5);
}
.archiveright .fa-eye {
	margin-right: 10px;
	cursor: default;
}
.archiveright .fa-bookmark:hover {
	color: #5caeae;
}


/* social */
.socialcontent {
	padding: 0 20px 40px 20px;
}
#socialtitle {
	margin-bottom: 3%;
	overflow: hidden;
	text-align: center;
	font-family: 'Titan One';
}
.socialthree {
	width: 33%;
	display: inline-block;
}
#socialthreeemail, #socialthreefacebook, #socialthreetwitter {
	border-radius: 5px;
	padding: 20px 10px;
	text-align: center;
	color: #ffffff;
}
#socialthreeemail {
	margin-right: 5px;
}
#socialthreefacebook {
	margin: 0 5px;
}
#socialthreetwitter {
	margin-left: 5px;
}
.socialthree .fa-envelope, .socialthree .fa-facebook-f, .socialthree .fa-twitter {
	font-size: 32px;
}
#socialthreeemail {
	background-color: rgba(0,180,137,.85);
}
#socialthreeemail:hover {
	background-color: rgba(0,180,137,1);
}
#socialthreefacebook {
	background-color: rgba(59,89,152,.85);
}
#socialthreefacebook:hover {
	background-color: rgba(59,89,152,1);
}
#socialthreetwitter {
	background-color: rgba(85,172,238,.85);
}
#socialthreetwitter:hover {
	background-color: rgba(85,172,238,1);
}
#socialrss, #socialenvelope {
	float: left;
	width: 55px;
	padding: 4px 6px 0 0;
}
#socialrss {
	color: #ff6600;
}
#socialrss .fa-rss {
	padding-left: 4px;
}
#socialrss .fa-rss, #socialenvelope .fa-envelope {
	font-size: 50px;
}
#socialenvelope {
	color: #00b489;
}