@import 'default.css';

/*	:root {
		--main-color-a: #75dddd; 
		--main-color-b: #84c7d0; 
		--main-color-c: #9297c4; 
		--main-color-d: #9368b7; 
		--main-color-e: #aa3e98;
	}
*/	#logo h1
	{
		color: var(--main-color-e);
	}

	.button
	{
		background: var(--main-color-b);
		border-color: var(--main-color-e);
		color: var(--main-color-e);
	}

	.button:hover {
		background: var(--main-color-d);
		border-color: var(--main-color-a);
		color: var(--main-color-a);
	}

	h1, h2, h3
	{
		color: var(--main-color-e);
	}

	.title .byline
	{
		color: var(--main-color-e);
	}
	
	#menu .current_page_item a
	{
		color: var(--main-color-d);
	}
	#menu li:hover a, #menu li.active a, #menu li.active span
	{
		color: var(--main-color-e);
	}
	
	#banner
	{
		background-color: var(--main-color-a);
		color: var(--main-color-e);
		border-color: var(--main-color-e);
		text-shadow: 5px 5px 5px var(--main-color-d);
	}
	@supports (-webkit-text-stroke: 2px var(--main-color-c)) {
  	#banner {
    	-webkit-text-stroke: 2px var(--main-color-c);
    	text-stroke: 2px var(--main-color-c);
	}
	#banner .title h2
	{
		color: var(--main-color-e);
	}	

	#featured
	{
		background: var(--main-color-a);
	}
	
	#featured .button
	{
		color: var(--main-color-a);
	}

	#page
	{
		color: var(--main-color-e);
	}

	.box
	{
		background-color: var(--main-color-a);
		color: var(--main-color-e);
		border-color: var(--main-color-e);
		text-shadow: 5px 5px 5px var(--main-color-d);
	}
	@supports (-webkit-text-stroke: 2px var(--main-color-c)) {
  	#banner {
    	-webkit-text-stroke: 2px var(--main-color-c);
    	text-stroke: 2px var(--main-color-c);
	}

	body {
		background: url(/images/story_bg.jpg) repeat center;
	}

	.message {
		color: var(--main-color-a);
		background-color: var(--main-color-e);
	}