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


/* RESET */

*
	{
		box-sizing:						border-box;
	}

html, body, a, article, aside, b, blockquote, button, cite, div, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, i, iframe, img, legend, li, nav, ol, p, q, section, small, span, time, ul
	{
		margin:						0;
		border:							0;
		padding:						0;
		font-size:						100%;
		/*border:						1px solid magenta;*/
	}

article, aside, figcaption, figure, footer, header, main, menu, nav, section
	{
		display:					 	block;
	}

blockquote, q
	{
		quotes:							none;
	}


/* LAYOUT & TYPOGRAPHY */

html
	{
		font-size:						small;
	}

body	
	{
		font-weight:					400;
		line-height:					1.4;
	}

main
	{
		display:						flex;
		padding:						0 0 60px 0;
		text-align:						justify;
	}

aside, .Books section > div, .ShortStories section > div, .TrueCrime section > div
	{
		margin:						20px 20px 0 20px;
		border-radius:					5px;
		padding:						20px;
		line-height:					1.4;
	}

aside:last-child, .Books section > div:last-child,
.ShortStories section > div:last-child, .TrueCrime section > div:nth-last-child(2)
	{
		margin-bottom:				0;
	}

h1
	{
		padding:						84px 20px 4px 20px;
		font-size:						1.8rem;
		text-transform:					uppercase;
	}

.LatestBook h2, .Books h2, .ShortStories h2
	{
		font-size:						1.5rem;
	}

h2, .LatestBook h3, .Books h3, .ShortStories h3
	{
		font-size:						1.3rem;
	}

h3
	{
		font-size:						1.1rem;
	}

h1, h2, h3
	{
		font-weight:					600;
		text-align:						left;
	}

h2, h3
	{
		margin-top:					-6px;
		padding:						0 20px;
	}

aside h2, aside h3, aside p, aside ul,
.TrueCrime h2, .Books h3, .ShortStories h3,
.Crime p, .Collections p, .Magazines p, .TrueCrimeStories p
	{
		padding-left:					0;
		padding-right:					0;
	}

ul
	{
		margin-left:					20px;
		padding:						0 20px;
	}

aside ul
	{
		margin-left:					0;
		list-style-type:					none;
	}

li
	{
		padding-bottom:				4px;
	}

p
	{
		padding:						6px 20px;
	}

.Books h3, .ShortStories h3 + p span, .TrueCrime h2 + p span, .Media h3
	{
		font-weight:					600;
		text-transform:					uppercase;
	}

section:first-of-type p:last-child, aside p:last-child,
section > div p:last-child, li:last-of-type
	{
		padding-bottom:				0;
	}

blockquote
	{
		margin:						8px 20px;
		font-size:						1.1rem;
		font-weight:					500;
		text-align:						center;
	}

blockquote span
	{
		font-size:						1rem;
	}

cite, i
	{
		font-style:						italic;
	}

a
	{
		text-decoration:				none;
	}

img
	{
		display:						block;
		width:							100%;
		height:							auto;
	}

.Welcome blockquote
	{
		margin-top:					20px;
	}

.LatestBook, .LatestBook h2, .LatestBook h3
	{
		text-align:						center;
	}

.LatestBook time
	{
		display:						block;
		font-size:						1.2rem;
	}

.LatestBook time, .LatestBook h3
	{
		margin-top:					2px;
		font-weight:					500;
	}

.LatestBook img
	{
		max-width:						225px;
		margin:						6px auto 12px auto;
	}

.News section time, .News aside time, .Bio aside h2 + p
	{
		font-weight:					500;
	}

.News section h3
	{
		margin-top:					20px;
	}

.News section h3, .News section > div time, .News section > div p
	{
		margin-left:					20px;
	}

.News section > div
	{
		padding-top:					8px;
	}

.News aside
	{
		text-align:						left;
	}

.News aside:first-child li
	{
		padding-left:					1.4rem;
		text-indent:					-1.4rem;
	}

.News aside:last-child
	{
		margin-bottom:				20px;
		padding-bottom:				18px;
	}

.News aside li:first-of-type, .News aside:last-child p
	{
		padding-top:					8px;
	}

.News aside li a
	{
		font-weight:					600;
	}

.News aside:last-child li:last-of-type
	{
		padding-bottom:				2px;
	}

.HeaderImage
	{
		margin:						6px 0 16px 0;
		padding:						0 20px;
	}

.Photo
	{
		max-width:						350px;
		margin:						0 auto;
		padding:						18px 30px;
	}

.Bio aside:last-of-type img
	{
		max-width:						240px;
		margin:						0 auto 8px auto;
	}

.Books h2, .ShortStories h2
	{
		margin-top:					20px;
		margin-bottom:				-4px;
	}

.ShortStories h3 + p span, .TrueCrime h2 + p span
	{
		font-size:						1.1rem;
	}

.HeaderBooks
	{
		display:						flex;
		justify-content:					space-between;
		max-width:						1000px;
		margin:						6px 18px;
	}

.HeaderBooks img
	{
		min-width:						0;
		max-width:						200px;
		padding:						2px;
	}

.Magazines .EvenStories
	{
		display:						none;
	}

.Media h3
	{
		padding-top:					20px;
		padding-bottom:				6px;
	}


/* RESPONSIVE STYLES */

@media (min-width: 720px)
	{
		h1
			{
				padding-top:			100px;
			}
	}

@media (max-width: 599px)
	{
		main
			{
				flex-direction:			column;
			}
		.News main
			{
				flex-direction:			column-reverse;
			}
		.News aside:first-child
			{
				margin-top:			6px;
			}
		.Crime img, .Collections img
			{
				max-width:				225px;
				margin:				0 auto 20px auto;
			}
		.Magazines .OddStories, .TrueCrimeStories div:last-child
			{
				display:				none;
			}
	}


/* ANIMATION & EFFECTS */

@keyframes FadeIn15
	{
		0%, 15%
			{
				opacity:				0;
			}
		75%, 100%
			{
				opacity:				1;
			}
	}

@keyframes FadeIn40
	{
		0%, 40%
			{
				opacity:				0;
			}
		75%, 100%
			{
				opacity:				1;
			}
	}

@keyframes FadeIn60
	{
		0%, 60%
			{
				opacity:				0;
			}
		80%, 100%
			{
				opacity:				1;
			}
	}

@keyframes SlidingContact
	{
		from
			{
				bottom:				0px;
			}
		to
			{
				bottom:				40px;
			}
	}

.SlideShow
	{
		position:						relative;
		max-width:						300px;
		margin:						0 auto;
		padding-top:					10px;
	}

.Slide
	{
		display:						none;
	}

.Slide time
	{
		display:						block;
		padding-bottom:				10px;
		font-size:						1.2rem;
		text-transform:					uppercase;
		text-align:						center;
	}

.PreviousSlide, .NextSlide
	{
		position:						absolute;
		top:							0;
		border-bottom:				none;
		padding:						7px 20px 0 20px;
		font-size:						20px;
		font-weight:					600;
		cursor:							pointer;
		transition:						all 0.4s;
	}

.NextSlide
	{
		right:							0;
	}

.ToggleReveal
	{
		display:						inline-block;
		padding:						0;
		cursor:							pointer;
	}

.Hidden
	{
		max-height:					0;
		overflow:						hidden;
		padding-left:					0;
		transition:						max-height 0.8s linear;
	}


/* NAVIGATION */

#Banner, footer, .Language, #Contact
	{
		position:						fixed;
		left:							0;
		right:							0;
		margin:						0;
		border:							0;
		padding:						0;
	}

#Banner
	{
		top:							0;
	}

#Banner a.Logo
	{
		display:						block;
		height:							60px;
		border-bottom:				none;
		background-image:			url(../gfx/header_MS-grey.png);
		background-repeat:			no-repeat;
	}

#Banner nav > a, #Banner nav > div
	{
		text-transform:					uppercase;
	}

.Language
	{
		bottom:						0;
		width:							100px;
		height:							36px;
		margin-left:					20px;
		background-color:				rgba(0,0,0,0);									/*transparent*/
		z-index:						1;
	}

.Language a, #Contact a
	{
		border-bottom:				none;
	}

footer
	{
		bottom:						0;
		display:						flex;
		flex-direction:					column;
		justify-content:					space-between;
		height:							40px;
	}

footer div
	{
		padding-right:					10px;
	}

footer div button, footer div a
	{
		width:							40px;
		height:							40px;
		margin:						-10px 0;
		border-bottom:				none;
	}

#Contact
	{
		display:						none;
		bottom:						40px;
		height:							40px;
		/*z-index:						1;*/
		/*animation:						SlidingContact 1.2s;*/
	}

#Contact .Close
	{
		position:						fixed;
		right:							0;
		padding:						10px 5px;
		font-size:						16px;
		font-weight:					600;
		line-height:					0;
		transition:						all 0.4s;
	}

#Contact div
	{
		display:						flex;
		justify-content:					space-evenly;
		align-items:					center;
		height:							40px;
	}

small
	{
		margin:						auto 0 auto 20px;
		font-size:						0.8rem;
	}

@media (min-width: 720px)
	{
		#Banner, footer
			{
				display:				flex;
			}
		#Banner
			{
				flex-direction:			column;
				justify-content:			space-around;
				align-items:			center;
				height:					86px;
				padding:				0;
			}
		#Banner a.Logo
			{
				width:					260px;
				margin-top:			10px;
				background-size:		260px 50px;
			}
		.MenuOff
			{
				display:				none;
			}
		#Banner nav, .Language, footer div
			{
				display:				flex;
			}
		#Banner nav
			{
				justify-content:			space-around;
				width:					100%;
				margin-left:			auto;
			}
		#Banner nav > a, #Banner nav > div
			{
				position:				relative;										/*dropdown menu*/
				border:					none;
			}
		.DropMenu
			{
				display:				none;
				position:				absolute;
				width:					180px;
				padding-top:			10px;
			}
		.DropMenu a
			{
				display:				block;
				border-bottom:		none;
				padding:				0 8px 2px 8px;
				animation:				DropDown 1.2s;
			}
		.Language
			{
				justify-content:			center;
				align-items:			center;
				margin:				auto;
			}
		.Language, footer
			{
				height:					34px;
			}
		#Contact
			{
				bottom:				34px;
				left:					auto;
				width:					400px;
				border-radius:			5px 0 0;
			}
		footer
			{
				flex-direction:			row-reverse;
			}
		@keyframes SlidingContact
			{
				from
					{
						bottom:				0px;
					}
				to
					{
						bottom:				34px;
					}
			}
	}

@media (max-width: 719px)
	{
		#Banner a.Logo
			{
				padding-bottom:		70px;
				background-size:		208px 40px;
				background-position:	center 6px;
			}
		.MenuOff, .MenuOn
			{
				display:				block;
				width:					40px;
				height:					40px;
				margin:				-24px auto 0 auto;
				border-bottom:		none;
				background-image:	url(../gfx/icon_Menu.png);
				background-repeat:	no-repeat;
				background-size:		40px 40px;
				background-position:	center center;
				cursor:					pointer;
				transition:				0.4s;
			}
		.MenuOn
			{
				transform:				rotate(90deg);
			}
		#MobileMenu.Off, .DropMenu
			{
				display:				none;
			}
		#MobileMenu.On
			{
				display:				flex;
				flex-wrap:				wrap;
				justify-content:			space-around;
				align-items:			flex-start;
				padding-bottom:		4px;
			}
		#Banner nav > a, #Banner nav > div
			{
				display:				inline-block;
				width:					120px;
				margin:				4px;
				border-radius:			4px;
				padding:				4px 0;
				background-color:		rgba(0,0,0,0.2);
				text-align:				center;
			}
		footer div
			{
				display:				flex;
				margin:				3px 0 0 auto;
			}
		small
			{
				display:				block;
				margin:				0 auto 3px auto;
			}
	}

@media (max-width: 359px)
	{
		#Banner a.Logo
			{
				background-size:		85% auto;
			}
	}

@media (max-width: 320px)
	{
		footer div button, footer div a
			{
				margin-right:			-4px;
			}
		small span
			{
				display:				none;
			}
	}


/* LINKS */

#Banner nav a:link, #Banner nav a:visited,
.Language a:link, .Language a:visited
	{
		font-weight:					500;
	}

#Banner nav > div:hover .DropMenu
	{
		display:						block;
	}

footer button, footer button:hover,
.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-image:			url(../gfx/icons_Social.png);
		transform:						scale(0.5);
		transition:						all 0.4s;
	}

footer button
	{
		background-position:			0 0;
	}

.Facebook:link, .Facebook:visited, .Facebook:hover, .Facebook:active
	{
		background-position:			-40px 0;
	}

.Instagram:link, .Instagram:visited, .Instagram:hover, .Instagram:active
	{
		background-position:			-80px 0;
	}

.TikTok:link, .TikTok:visited, .TikTok:hover, .TikTok:active
	{
		background-position:			-120px 0;
	}

.Youtube:link, .Youtube:visited, .Youtube:hover, .Youtube:active
	{
		background-position:			-160px 0;
	}

#Banner a, .Language a
	{
		transition:						all 0.4s;
	}