/* Copyright (c) 2026 by Martin Steyn. All rights reserved. */


/* LAYOUT & TYPOGRAPHY */

body	
	{
		background-color:				rgb(246,246,246);								/*off-white #f6f6f6*/
		font-family:					Poppins, Arial, Helvetica, sans-serif;
		color:							rgb(68,68,68);									/*dark grey #444*/
	}

aside, .Books section > div, .ShortStories section > div, .TrueCrime section > div
	{
		background-color:				rgb(221,221,221);								/*light grey #ddd*/
	}

h1, h3.ToggleReveal, blockquote, input, textarea, button
	{
		color:							rgb(220,80,40);								/*orange #de5028*/
	}

a, h3.ToggleReveal
	{
		border-bottom:				2px solid rgb(220,80,40);						/*orange #de5028*/
	}

.News aside li a
	{
		font-family:					"Open Sans", Arial, Helvetica, sans-serif;
	}

input:focus, textarea:focus
	{
		border:							2px solid rgb(220,80,40);						/*orange #de5028*/
	}

input[type="submit"]:hover, input[type="submit"]:focus, button:hover, button:active
	{
		border-color:					rgb(220,80,40);								/*orange #de5028*/
	}


/* ANIMATION & EFFECTS */

@media (max-width: 799px)
	{
		.ToggleReveal
			{
				border-bottom:		2px solid rgb(220,80,40);						/*orange #de5028*/
				color:					rgb(220,80,40);								/*orange #de5028*/
			}
	}


/* NAVIGATION */

.Language
	{
		background-color:				rgba(0,0,0,0);									/*transparent*/
	}

small
	{
		color:							rgb(221,221,221);								/*light grey #ddd*/
	}

@media (min-width: 720px)
	{
		#Banner, .DropMenu a, footer, #Contact
			{
				background-color:		rgb(68,68,68);									/*dark grey #444*/
			}
	}

@media (max-width: 719px)
	{
		#Banner.On, #Banner a.Logo, footer, #Contact
			{
				background-color:		rgb(68,68,68);									/*dark grey #444*/
			}
		#Banner nav > a, #Banner nav > div
			{
				border:					1px solid rgb(221,221,221);					/*light grey #ddd*/
			}
	}


/* LINKS */

#Banner nav a:link, #Banner nav a:visited,
.Language a:link, .Language a:visited,
#Contact a:link, #Contact a:visited, .Close
	{
		color:							rgb(221,221,221);								/*light grey #ddd*/
	}

#Banner nav a:hover, #Banner nav a:active, #Banner nav a.Selected,
.Language a:hover, .Language a:active,
#Contact a:hover, #Contact a:active, .Close:hover
	{
		color:							rgb(220,80,40);								/*orange #de5028*/
	}

footer button,
.Substack:link, .Substack:visited, .Substack:hover, .Substack:active,
.Facebook:link, .Facebook:visited, .Facebook:hover, .Facebook:active,
.Instagram:link, .Instagram:visited, .Instagram:hover, .Instagram:active,
.TikTok:link, .TikTok:visited, .TikTok:hover, .TikTok:active,
.Youtube:link, .Youtube:visited, .Youtube:hover, .Youtube:active
	{
		background-color:				rgb(221,221,221);								/*light grey #ddd*/
	}

footer button:hover,
.Substack:hover, .Substack:active, .Facebook:hover, .Facebook:active,
.Instagram:hover, .Instagram:active, .TikTok:hover, .TikTok:active,
.Youtube:hover, .Youtube:active,
input[type="submit"], button
	{
		background-color:				rgb(220,80,40);								/*orange #de5028*/
	}

a:link
	{
		color:							rgb(220,80,40);								/*orange #de5028*/
	}

a:visited, a:hover, a:active
	{
		color:							rgb(160,55,25);								/*dark orange #a03719*/
	}