html
{
	--warning: yellow;
	--error: darkred;
	--valid: green;
	--fadetime: 0.15s;
	--icolor: #F29B17; /* F1B636 */
	--bgcolor: #1E1F25;
	--boxcolor: #151416;
	--textcolor: #DDD;
	--blackcolor: #000000;
	--bordercolor: #2D333A;
	--borderhover: #F29B17;
	--subtlecolor: #EEEEEE80;
	--shadowcolor: #00000080;
	--activeshadowcolor: #000000B3;
}
body
{
	height: 100vh;
	width: 100vw;
	position: absolute;
	background: var(--blackcolor);
	background-size: cover;
	background-position: center;
}
body, html
{
	background: var(--blackcolor);	
	position: relative;
	z-index: -5;
	margin: 0;
	padding: 0;
	color: var(--textcolor);
	overflow-x: hidden;
	font-family: Bitstream Vera Sans, DejaVu Sans, Arial, Helvetica, sans-serif;
	scrollbar-color: #4D535A #151416;
}
a, form input, form label, .footer span
{
	cursor: pointer;
	pointer-events: all;
	text-decoration: none;
	-webkit-transition: ease var(--fadetime);
	-moz-transition: ease var(--fadetime);
	-o-transition: ease var(--fadetime);
	transition: ease var(--fadetime);
}
a:link
{ color: var(--textcolor); }
a:visited
{ color: inherit; }
a:hover
{
	color: var(--icolor) !important;
	opacity: 1 !important;
}
::-webkit-scrollbar
{
	width: 12px;
	height:12px;
}
::-webkit-scrollbar-track
{ background: var(--boxcolor); }
::-webkit-scrollbar-thumb
{
	background: #4D535A;
	border-radius: 4px;
	border: 2px solid var(--boxcolor);
}
::-webkit-scrollbar-thumb:hover
{ background: var(--icolor); }
::-webkit-scrollbar-corner
{ background: var(--blackcolor); }
form, p
{ margin: 0; }
.main
{
	background: var(--bgcolor);
	min-height: calc(4rem + 50px);
	position: relative;
}
.mascot
{
	position: absolute;
	height: 256px;
	left: 0;
	pointer-events: none;
}
.mascot img
{
	height: 100%;
	top: -150px;
	position: relative;
}
.mascot span
{
	position: relative;
	color: var(--subtlecolor);
	left: 0.4em;
	top: calc(-100% - 0.3em);
}

.loading
{
	top: 50%;
	left: 50%;
	position: absolute;
	transform: translate(-50%, -50%);
}
.loadingcover
{
	top: 50%;
	left: 50%;
	position: absolute;
	transform: translate(-50%, -50%);
	height: 100px;
	width: 100px;
	background: var(--bgcolor);
}
.centery
{
	top: 50%;
	transform: translateY(-50%);
	position: relative;
}
.topy
{
	top: 128px;
	position: relative;
}
.interactable
{
	cursor: pointer;
	position: relative;
	margin: 0 0 25px;
	border-radius: 3px;
	padding: 0.5em 1em;
	border: 1px solid var(--bordercolor);
	display: inline-block;
	font-weight: normal;
	white-space: nowrap;
	background: var(--boxcolor);
	box-shadow: 0 2px 3px 1px var(--shadowcolor);
	-webkit-transition: ease var(--fadetime);
	-moz-transition: ease var(--fadetime);
	-o-transition: ease var(--fadetime);
	transition: ease var(--fadetime);
	cursor: pointer;
}
.interactable.text
{ cursor: text; }
.interactable:hover, .interactable:active, .interactable:focus
{
	border-color: var(--borderhover);
	color: var(--icolor);
}
.interactable:hover
{ box-shadow: 0 0 10px 3px var(--activeshadowcolor); }
.interactable img
{
	margin-bottom: -0.125em;
	height: 1em;
}
.theme-menu select.interactable
{
	padding: 0;
	margin: 0;
	background: var(--bgcolor);
}
.theme-menu select.interactable option
{ color: var(--textcolor) !important; }
.header
{ text-align: right; }
.header p
{ margin: 0 25px 6px; }
.footer
{
	width: 100%;
	min-height: 1.5em;
	margin: 4px 0 0;
	font-size: 0.9rem;
	white-space: nowrap;
	padding: 0 0 1.5em;
	text-align: center;
}
.footer .anchor
{
	/*bottom: 4px;*/
	left: 50%;
	left: calc(50% - 0.5px);
	position: relative;
	height: 1.2em;
	width: 1px;
	background: var(--textcolor);
}
.footer .anchor img, .header img
{
	height: 1em;
	margin-bottom: -0.2em;
}
.footer .anchor a
{ text-shadow: 0 0.125em 0.1875em var(--shadowcolor); }
.footer .anchor a:hover
{ text-shadow: 0 0 0.625em var(--activeshadowcolor); }
.footer .anchor .left
{
	position: absolute;
	right: 8px;
}
.footer .anchor .right
{
	position: absolute;
	left: 8px;
}
.footer .faprogress, .footer .fnprogress, data#uploadprogress div
{
	display: block;
	position: relative;
	width: calc(100vw - 50px);
	height: 1.1em;
	border: 1px solid var(--bordercolor);
	background: var(--boxcolor);
	box-shadow: 0 2px 3px 1px var(--shadowcolor);
	border-radius: 3px;
	overflow: hidden;
	margin: 8px auto 6px;
}
data#uploadprogress
{ height: 0; }
data#uploadprogress div
{
	width: calc(100% - 50px);
	bottom: 25px;
}
.footer .faprogress:hover, .footer .fnprogress:hover
{
	border-color: var(--borderhover);
	box-shadow: 0 0 10px 3px var(--activeshadowcolor);
}
.footer .faprogress span, .footer .fnprogress span, data#uploadprogress div span
{
	position: absolute;
	left: 0;
	height: 100%;
	color: #000000;
	text-align: right;
	font-weight: bold;
	padding-right: 4px;
	box-sizing: border-box;
}
.footer .faprogress p, .footer .fnprogress p, data#uploadprogress div p
{
	position: absolute;
	font-style: italic;
	bottom: 1px;
	font-size: 0.85em;
	color: var(--subtlecolor);
}
.footer .faprogress p.left, .footer .fnprogress p.left
{
	text-align: left;
	left: 4px;
}
.footer .fnprogress span
{
	text-shadow: 0 0 4px #2E76B4;
	background: linear-gradient(to right, #0000, #2E76B4);
}
.footer .faprogress span
{
	text-shadow: 0 0 4px #FAAF3A;
	background: linear-gradient(to right, #0000, #FAAF3A);
}
data#uploadprogress div span
{
	text-shadow: 0 0 4px var(--icolor);
	background: linear-gradient(to right, #0000, var(--icolor));
	-webkit-transition: ease var(--fadetime);
	-moz-transition: ease var(--fadetime);
	-o-transition: ease var(--fadetime);
	transition: ease var(--fadetime);
}

.footer .fnprogress:hover *, .footer .faprogress:hover *
{ opacity: 0.5; }
.upload
{
	width: 100%;
	padding: 25px;
	overflow: hidden;
	position: relative;
	border-radius: 3px;
	border: 2px dashed var(--bordercolor);
	display: inline-block;
	white-space: initial;
}
form .text
{
	width: 100%;
	color: var(--textcolor);
	padding: 0.5em;
}
form .text:active, form .text:focus
{ color: var(--textcolor); }
input
{
	display: inline-block;
	border: 1px solid var(--bordercolor);
	border-radius: 3px;
	background: var(--boxcolor);
	color: var(--textcolor);
	font-size: 1em;
	padding: 1px 3px;
}
form
{
	width: 800px;
	max-width: calc(100% - 50px);
}
form span
{
	position: relative;
	left: 25px;
	z-index: 10;
	padding: 0 0 2px;
	display: inline-block;
}
form .maxrating, form .integratedsearch
{
	margin: -14px 0 9px;
	padding: 0.5em 0;
	display: inline-block;
	width: calc(100% - 80px);
	line-height: 3;
}
form .maxrating input, form .integratedsearch input, form .submit input
{
	position: absolute;
	top: -100vh;
	opacity: 0;
	height: 0;
	width: 0;
}
form .maxrating label, form .integratedsearch label
{
	cursor: pointer;
	padding: 0.5em 1em;
	margin: 0 25px 0 0;
	border: 1px solid var(--bordercolor);
	background: var(--boxcolor);
	box-shadow: 0 2px 3px 1px var(--shadowcolor);
	border-radius: 3px;
	white-space: nowrap;
}
form .maxrating label:hover, .form .maxrating label:active, form .maxrating label:focus,
form label:hover, .form label:active, form label:focus
{
	border-color: var(--borderhover);
	color: var(--icolor);
}
form label:hover
{ box-shadow: 0 0 10px 3px var(--activeshadowcolor); }
form label div.checkmark, form label div.radio
{
	position: relative;
	display: inline-block;
	left: 0;
	padding: 0;
	margin: 0 0.5em 0 -0.3em;
	height: 1.2em;
	width: 1.2em;
	top: 0.25em;
	border-radius: 3px;
	background: var(--bgcolor);
	pointer-events: none;
}
/* form label:hover div.checkmark, .form label:active div.checkmark, form label:focus div#checkmark
{ }
form input:checked + label div.checkmark
{ } */
form label div.checkmark div, form label div.radio div
{
	border: solid 0 #0000;
	border-width: 0;
	position: absolute;
	-webkit-transition: ease var(--fadetime);
	-moz-transition: ease var(--fadetime);
	-o-transition: ease var(--fadetime);
	transition: ease var(--fadetime);
}
form label div.checkmark div
{
	left: 0.35em;
	top: 0.15em;
	width: 0.3em;
	height: 0.55em;
}
form label div.radio div
{
	width: 150%;
	height: 150%;
	left: 50%;
	top: 50%;
	border-width: 0;
	border-radius: 50%;
	transform: translate(-50%, -50%);
}
form input:checked + label div.checkmark div
{
	border-color: var(--icolor);
	border-width: 0 3px 3px 0;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
}
form input:checked + label div.radio div
{
	border-color: var(--icolor);
	border-width: 0.3em;
	width: 0;
	height: 0;
}
form label div.radio
{
	border-radius: 50%;
	/* padding: 0.1em; */
}
form .submit
{
	position: absolute;
	right: 0;
}
form input#submit
{
	position: absolute;
	top: -100vh;
	opacity: 0;
	height: 0;
	width: 0;
}

div.cookies
{
	position: fixed;
	left: 25px;
	bottom: 25px;
	background: var(--bgcolor);
	border: 1px solid var(--bordercolor);
	border-radius: 3px;
	padding: 25px;
	box-shadow: 0 2px 3px 1px var(--shadowcolor);
	display: none;
}
div.cookies .interactable
{
	margin: 0 0 0 25px;
	display: inline-block;
}
p.center
{
	text-align: center;
	margin: 0;
	padding: 0 0 25px;
	color: var(--subtlecolor);
}
p.message
{
	text-align: center;
	width: 100%;
	margin: 0;
	padding: 25px 0 0;
}
pre.message
{
	display: block;
	padding: 8px;
	background: var(--boxcolor);
	margin: 0 0 25px;
	line-height: 2em;
	white-space: pre-wrap;
	border: 1px solid var(--bordercolor);
	border-radius: 3px;
	box-shadow: 0 2px 3px 1px var(--shadowcolor);
}
.centerx
{
	left: 50%;
	transform: translateX(-50%);
	position: relative;
}
.statictitle
{
	text-align: center;
	font-size: 4rem;
	padding: 25px 0 0;
	margin: 0;
}
.staticsubtitle
{
	color: var(--subtlecolor);
	text-align: center;
	margin: 0;
}
.statictitle .beta
{
	position: absolute;
	font-size: 1rem;
	width: 0;
	font-weight: bold;
	color: var(--subtlecolor);
}
.title
{
	position: absolute;
	text-align: left;
	font-size: 4rem;
	padding: 25px 0 0 25px;
	margin: 0;
} 
.searchstats
{
	text-align: left;
	margin: 5.5em 0 0 25px;
	position: absolute;
	font-size: 1em;
	max-width: 300px;
}
.top
{
	width: 800px;
	max-width: calc(100% - 50px);
	margin: 0 auto;
	position: relative;
	padding: 25px 0 0;
}
.source
{
	position: relative;
	background: var(--boxcolor);
	border-radius: 3px;
	padding: 8px;
	border: 1px solid var(--bordercolor);
	display: inline-block;
	min-height: 128px;
	box-shadow: 0 2px 3px 1px var(--shadowcolor);
	-webkit-transition: ease var(--fadetime);
	-moz-transition: ease var(--fadetime);
	-o-transition: ease var(--fadetime);
	transition: ease var(--fadetime);
}
.source img
{
	max-width: 256px;
	max-height: 128px;
}
.top .source h2
{
	left: 8px;
	position: relative;
	white-space: nowrap;
	overflow: hidden;
}
.source h2
{ margin: 0; }
.top .image h2
{
	top: 64px;
	left: 64px;
	display: inline-block;
	transform: translate(-50%,-50%);
}
.top .image
{
	float: left;
	width: 128px;
	height: 128px;
}
.source .thumbnail
{
	top: 64px;
	transform: translateY(-50%);
	position: relative;
	float: left;
}
.top .source img.thumbnail
{
	max-width: 128px;
	max-height: 100%;
	top: 0;
	transform: none;
}
a.source:hover, a.source:active, a.source:focus
{
	border-color: var(--borderhover);
	box-shadow: 0 0 10px 3px var(--activeshadowcolor);
}
.top span.divider
{ display: inline-block; }
.top span
{ 
	position: relative;
	left: 25px;
	padding: 0 0 8px;
}
.top .source span
{ left: 8px; }
.top div.links
{
	top: 0;
	right: 0;
	margin: 0;
	max-height: 220px;
	overflow-y: scroll;
	text-align: right;
	position: absolute;
	padding: 8px 8px 16px 50px;
	background: linear-gradient(to right, #0000 0, var(--boxcolor) 50px, var(--boxcolor) 100%);
}
.top .links a
{
	margin: 5px;
	display: block;
}
.top .links img
{
	height: 1em;
	margin: 0 0 -2px;	
}
.top .source
{
	display: block;
	margin: 0 0 25px;
	text-align: left;
	overflow: hidden;
}
h3#percent
{
	position: absolute;
	font-weight: bold;
	right: 8px;
	bottom: 8px;
	margin: 0;
	background: var(--boxcolor);
}

.top p
{
	display: inline-block;
	padding: 0 8px 0 0;
}

.more
{
	text-align: center;
	margin: 0 12.5px;
}
.more .source
{
	min-width: 128px;
	max-width: 256px;
	overflow: hidden;
	white-space: nowrap;
	margin: 0 12.5px 25px;
}
.more .source .thumbnail
{
	left: 50%;
	transform: translate(-50%, -50%);
}
.more .source .image
{ height: 128px; }
.more .source p.left
{
	text-align: left;
	max-width: 0;
	overflow: hidden;
	text-transform: capitalize;
	padding-right: 100%;
}
.more .source div.right
{
	position: absolute;
	right: 0;
}
.more .source div.right b
{
	background: var(--boxcolor);
	position: relative;
	top: -0.2em;
	padding: 0 8px 0.1em 0;
}
.more .source div.right span
{
	background: linear-gradient(to right, #0000, var(--boxcolor));
	height: 1.2em;
	width: 25px;	
	display: inline-block;
}
.more div.source div.links
{
	overflow-x: scroll;
	overflow-y: hidden;
	margin: 4px -8px -8px;
}
.more a.source div.links
{
	overflow: hidden;
	margin: 4px -8px 0;
}
.more .source div.links img
{
	height: 1em;
	position: relative;
}
.more .source div.links a
{ margin: 0 4px; }

data
{ display: none; }

.source span
{ padding: 0; }


@media screen and (max-width:90rem)
{
	.title
	{
		position: relative;
		text-align: center;
		padding: 25px 0 0;
		margin-bottom: -25px;
	}
	.searchstats
	{
		text-align: center;
		margin: 15px 0 0;
		font-size: 1em;
		position: relative;
		max-width: 100%;
	}
}
body
{ display: block !important;}

/* theme menu */

.changemascot
{
	font-size: 0.9em;
	text-align: center;
}
.themebutton
{
	cursor: pointer;
	position: absolute;
	right: 0;
	font-size: 0.9em;
	color: var(--subtlecolor);
	margin-right: 25px;
}
.themes
{
	overflow: hidden;
	position: absolute;
	width: 300px;
	bottom: 0;
	right: 0;
	height: 100px;
	pointer-events: none;
	/* height: 120px; */
}
.themes input
{ display: none; }
.themes input:checked ~ .theme-menu
{ top: 5px; }
.theme-menu
{
	top: 105%;
	top: calc(100% + 5px);
	right: -25px;
	border-top-left-radius: 3px;
	position: absolute;
	pointer-events: all;
	background: var(--boxcolor);
	padding: 25px 50px 50px 25px;
	border-left: 1px solid var(--bordercolor);
	border-top: 1px solid var(--bordercolor);
	box-shadow: 0 2px 3px 1px var(--shadowcolor);
	-webkit-transition: ease var(--fadetime);
	-moz-transition: ease var(--fadetime);
	-o-transition: ease var(--fadetime);
	transition: ease var(--fadetime);
}
.theme-menu tr
{ text-align: right; }
.themes td:first-child
{ padding-right: 8px; }
select
{
	border-radius: 3px;
	background: var(--bgcolor);
	color: var(--textcolor);
	border: 1px solid var(--bordercolor);
	width: 125px;
}

/* themes */

/*body.kheina
{ / * reset, no variables needed * / }*/

html.light
{
	--icolor: #F28817;
	--bgcolor: #E0E4E8;
	--boxcolor: #D8D9E0;
	--textcolor: #222222;
	--blackcolor: #C3C4CE;
	--bordercolor: #2D333A;
	--borderhover: #F28817;
	--subtlecolor: #00000080;
	--shadowcolor: #6D718680;
	--activeshadowcolor: #6D7186B3;
}

html.e621
{
	--icolor: #2E76B4;
	--bgcolor: #152F56;
	--boxcolor: #213A5F;
	--textcolor: #EEE;
	--blackcolor: #031131;
	--bordercolor: #0000;
	--borderhover: #0000;
	--subtlecolor: #B4C7D9;
	--shadowcolor: #0000;
	--activeshadowcolor: #0000;
}
html.e621 body
{
	background-image: url(/static/themes/stripe.png);
	background-repeat: repeat;
	background-position: center top;
	background-size: auto;
}
html.e621 div.main
{
	margin: 0 0.82em;
	border-radius: 6px;
}
html.e621 div.themes
{ border-bottom-right-radius: 6px; }

html.youtube
{
	--icolor: #FFF;
	--bgcolor: #272727;
	--boxcolor: #383838;
	--textcolor: #EEE;
	--blackcolor: #121212;
	--bordercolor: #404040;
	--borderhover: #747474;
	--subtlecolor: #909090;
	--shadowcolor: #0000;
	--activeshadowcolor: #0000;
}

html.wikipedia
{
	--icolor: #0645AD;
	--bgcolor: #FFF;
	--boxcolor: #F8F9FA;
	--textcolor: #222222;
	--blackcolor: #F6F6F6;
	--bordercolor: #C8CCD1;
	--borderhover: #A7D7F9;
	--subtlecolor: #54595D;
	--shadowcolor: #0000;
	--activeshadowcolor: #0000;
}
html.wikipedia body
{ background-image: linear-gradient(#FFF 2.5em,#F6F6F6 5em); }
html.wikipedia div.main
{
	border-top: 1px solid #A7D7F9;
	border-bottom: 1px solid #A7D7F9;
}
html.e621 .source
{
	padding: 0 0 8px;
	border: none;
}
html.e621 .top .source h2
{ margin-top: 8px; }
html.e621 .more .source .left
{ margin: 0 0 0 8px; }

html.terminal
{
	--icolor: #008000;
	--bgcolor: #000000;
	--boxcolor: #000000;
	--textcolor: #00FF00;
	--blackcolor: #000000;
	--bordercolor: #00FF00;
	--borderhover: #008000;
	--subtlecolor: #008000;
	--shadowcolor: #0000;
	--activeshadowcolor: #0000;
	filter: sepia(100%) saturate(550%) hue-rotate(90deg);
}

html.solarized-dark
{
	--icolor: #b58900;
	--bgcolor: #073642;
	--boxcolor: #002b36;
	--textcolor: #93a1a1;
	--blackcolor: #002b36;
	--bordercolor: #586e75;
	--borderhover: #b58900;
	--subtlecolor: #657b83;
	--shadowcolor: #002b36;
	--activeshadowcolor: #2aa19820;
}

html.solarized-light
{
	--icolor: #cb4b16;
	--bgcolor: #eee8d5;
	--boxcolor: #fdf6e3;
	--textcolor: #586e75;
	--blackcolor: #fdf6e3;
	--bordercolor: #586e75;
	--borderhover: #cb4b16;
	--subtlecolor: #839496;
	--shadowcolor: #93a1a1;
	--activeshadowcolor: #dc322f40;
}

html.furaffinity
{
	--icolor: #AFAFAF;
	--bgcolor: #2E3B41;
	--boxcolor: #6A7283;
	--textcolor: #FFF;
	--blackcolor: #2E3B41;
	--bordercolor: #DCDCDC;
	--borderhover: #AFAFAF;
	--subtlecolor: #CFCFCF;
	--shadowcolor: #0000;
	--activeshadowcolor: #0000;
}
html.furaffinity div.main
{
	border-top: 1px solid var(--bordercolor);
	border-bottom: 1px solid var(--bordercolor);
}

html.discord
{
	--icolor: #7289DA;
	--bgcolor: #2F3136;
	--boxcolor: #26272B;
	--textcolor: #DCDDDE;
	--blackcolor: #202225;
	--bordercolor: #1E1F23;
	--borderhover: #7289DA;
	--subtlecolor: #72767D;
	--shadowcolor: #202225;
	--activeshadowcolor: #202225;
}

html.xfire
{
	--icolor: #3D73D7;
	--bgcolor: #12283F;
	--boxcolor: #1D1C22;
	--textcolor: #ABC6E3;
	--blackcolor: #000000;
	--bordercolor: #00020A;
	--borderhover: #3D73D7;
	--subtlecolor: #ABC6E3A0;
	--shadowcolor: #00000080;
	--activeshadowcolor: #000000B3;
}
html.xfire div.main
{
	background-image: linear-gradient(#8BA0E3 0, #2D6191 2px, #2D6191 4px, #00022C 5px, #0000 5px), linear-gradient(#0000 calc(100% - 5px), #8BA0E3 calc(100% - 5px), #2D6191 calc(100% - 3px), #2D6191 calc(100% - 1px), #00022C 100%), linear-gradient(#0000 0, #12283F 12.5em), url(https://cdn.kheina.com/file/kheinacom/bc83a6cc07e0c47c9b7d226ef47f556b4aeddfcf.png), linear-gradient(#030316 0, #030316 100%);
	background-position: left top, left top, left top, left top, left bottom;
}

@keyframes gay
{
	00%
	{ color: red }
	20%
	{ color: yellow }
	40%
	{ color: green }
	60%
	{ color: cyan }
	80%
	{ color: blue }
	100%
	{ color: purple }
}
html.gay *
{ animation: gay 1s infinite; }

/* accent */

/*body div.main.none
{ / * having "nothing" here allows us to apply accent to themes without having them be overridden by none * / }*/

html.winter div.main
{
	background-image: url(/static/themes/snow_bottom.png), url(/static/themes/snow_top.png);
	background-repeat: repeat-x;
	background-position: center bottom, center top;
	padding-bottom: 25px;
}

html.spring div.main
{
	background-image: url(/static/themes/snow_bottom.png), url(/static/themes/snow_top.png);
	background-repeat: repeat-x;
	background-position: center bottom, center top;
	padding-bottom: 25px;
}

html.summer div.main
{
	background-image: url(/static/themes/snow_bottom.png), url(/static/themes/snow_top.png);
	background-repeat: repeat-x;
	background-position: center bottom, center top;
	padding-bottom: 25px;
}

html.autumn div.main
{
	background-image: url(/static/themes/snow_bottom.png), url(/static/themes/snow_top.png);
	background-repeat: repeat-x;
	background-position: center bottom, center top;
	padding-bottom: 25px;
}

html.hex div.main
{
	background-image: url(/static/themes/hex.png);
	background-repeat: repeat-x;
	background-position: center top;
}

html.fox div.main
{
	background-image: url(/static/themes/fox.png);
	background-repeat: no-repeat;
	background-position: left bottom;
}

html.snep div.main
{
	background-image: url(/static/themes/snep.png);
	background-repeat: no-repeat;
	background-position: left bottom;
}