/* UnderLust Colors */

/*
#6400bd		rgb(100, 0, 189, 1)	Sans Dark Purple
#d1a8f7		rgb(209, 168, 247, 1)	Sans Light Purple
#2cb6f6		rgb(44, 182, 246, 1)	Sans Blue
#f012a1		rgb(240, 18, 161, 1)	Papyrus Dark Pink
#ff97da		rgb(255, 151, 218, 1)	Papyrus Light Pink
#f8db65		rgb(248, 219, 101)	Papyrus Yellow
#303030		rgb(48, 48, 48, 1)	Light Black
#1b1b1b		rgb(27, 27, 27, 1)	Dark Black	

#6600bb;	102, 0, 187
*/

:root {
	--black_light:		#303030; /* Light Black */
	--black_dark:		#1b1b1b; /* Light Black */
	--white:			white;

	--main_dark:		#702590; /* Main Dark Color */
	--main_light:		#faf; /* Main Light Color */

	--main_dark_clear:	rgb(128 0 160, 0);	/* Clear Main Dark Color */
	--main_dark_25:		rgb(128 0 160 .25);	/* 25% Main Dark Color */
	--main_dark_50:		rgb(128 0 160, .5);	/* 50% Main Dark Color */

	--accent1:		#f7f; /* Accent 1 */

	--secondary_light:	#a0f; /* Secondary Light Color */
	--secondary_dark:	#07d; /* Secondary Dark Color */

	--accent2:		#2ff; /* Accent2 */
	
	--accent3:		#03d; /* Accent2 */

	--post_header_gradient: linear-gradient( to left, var(--main_dark), var(--accent3), var(--accent3), var(--secondary_dark), var(--secondary_dark), var(--main_light) );

	--post_footer_gradient: linear-gradient( to bottom, var(--main_light), var(--main_dark), var(--main_dark), var(--main_dark), var(--main_dark), var(--main_dark), var(--main_light) );

	--post_footer_gradient2: linear-gradient( to bottom, var(--main_dark_clear), var(--main_dark_25), var(--main_dark_50), var(--main_dark_50), var(--main_dark_50), var(--main_dark_25), var(--main_dark_clear) );

}

/*
background image uses gradients
background-image: var(--au_vertical_gradient);
*/

body, nav {
	background-color: var(--main_dark);
	color: var(--main_light);
}

a, address {
	color: var(--accent1);
}

* {
	border-color: var(--accent1);
}

main {
	background-color: var(--black_light);
}

article,
main > section {
	background-color: var(--main_light);
	color: var(--main_dark);
}

article > header,
main > section header,
main > header {
	background-color: var(--accent1);
	color: var(--black_light);
	border-bottom-color: var(--black_light);
	background-image: linear-gradient( to bottom, var(--main_light), var(--accent1), var(--accent1), var(--secondary_light));
}

article section header,
article footer {
	background-color: var(--main_dark);
	color: var(--white);
}

article section > header {
	background-image: var(--post_header_gradient);
}

article > footer,
article section footer {
	background-image: var(--post_footer_gradient);
}

article section footer {
	background-color: var(--main_dark_clear);
	background-image: var(--post_footer_gradient2);
}

article a,
main > section a {
	color: var(--accent3);
}

main > section a:hover,
article a:hover {
	color: var(--black_dark);
}

nav a:hover,
article section > header a,
article section > header .tumblr {
	color: var(--white);
}

article section header a:hover {color: var(--accent1);}

article > header a,
article > header .tumblr {
	color: var(--main_dark);
}

article > header img {
	border-color: var(--main_dark);
	background-image: radial-gradient(var(--accent1), var(--accent1));
}

article section > header img {
	border-color: var(--accent1);
	background-image: radial-gradient(var(--accent1), var(--accent1));
}

article footer {border-color: var(--main_light);}

article table,
article tr,
article td {
	border-color: var(--main_dark);
	border-width: .3em;
	vertical-align: top;
}

aside, section .disclaimer, .disclaimer {
	border-color: var(--black_light);
	background: var(--accent1);
	color: var(--black_light);
}

aside > strong, aside > a, aside > em,
#disclaimer > strong, #disclaimer > a, #disclaimer > em {
  color: var(--black_dark);
}

blockquote {
	border-color: var(--main_dark);
	background: var(--secondary_dark);
	color: var(--accent2);
}

blockquote code {
	background-color: var(--accent2);
	color: var(--black_light);
}

blockquote > strong, blockquote > a, blockquote > em {
  color: var(--secondary_dark);
}

code,
.ask,
.ask + .answer {
	background-color: var(--accent3);
	color: var(--white);
}

.ask .tumblr,
.ask + .answer .tumblr {
	color: var(--accent2);
}

.ask img {
	border-color: var(--accent2);
}

.ask + hgroup img {
	border-color: var(--white);
}

.ask + hgroup h1 {
	text-decoration: underline;
	text-decoration-color: var(--white);
	text-decoration-thickness: .1em;
	text-decoration-style: solid;
}

details.filter {
	background-color: rgb(27, 27, 27, 0); /* Light Black */
	background-image: linear-gradient( to bottom, rgb(27, 27, 27, 1), rgb(48, 48, 48, 1), rgb(48, 48, 48, .75), rgb(27, 27, 27, 0) );
	color: var(--white);
}

details[open].filter {
	background-image: linear-gradient( to bottom, rgb(27, 27, 27, 1), rgb(27, 27, 27, 1), rgb(48, 48, 48, 1), rgb(48, 48, 48, .9), rgb(27, 27, 27, .75), rgb(27, 27, 27, .5), rgb(27, 27, 27, .25), rgb(27, 27, 27, .15), rgb(27, 27, 27, .05), rgb(27, 27, 27, 0) );
}

.filter label {
	background-color: var(--secondary_dark);
}

.filter input[type="checkbox"] {
	accent-color: var(--secondary_light);
}

article > .tags ul li:before {
	color: var(--secondary_light);
}
