/* 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:						medium;
	}

body	
	{
		font-size:						0.9rem;
		font-weight:					400;
		line-height:					1.6;
	}

#Shell
	{
		max-width:						1280px;
		margin:						0 auto;
	}

main
	{
		display:						flex;
		padding:						0 40px 60px 40px;
		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
	{
		margin:						0 0 20px 30px;
	}

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:						90px 40px 6px 40px;
		font-size:						2rem;
		text-transform:					uppercase;
	}

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

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

h3
	{
		font-size:						1rem;
	}

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

h2, h3
	{
		padding:						0 20px;
	}

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

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:				6px;
	}

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:						10px 0;
		font-size:						1rem;
		font-weight:					500;
		text-align:						center;
	}

blockquote span
	{
		font-size:						0.9rem;
	}

cite, i
	{
		font-style:						italic;
	}

a
	{
		text-decoration:				none;
	}

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

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

.HeaderBooks img
	{
		min-width:						0;
		max-width:						248px;
		margin:						10px;
	}


/* RESPONSIVE STYLES */

@media (max-width: 1199px)
	{
		main
			{
				padding-left:			24px;
				padding-right:			24px;
			}
		h1
			{
				padding:				80px 20px 6px 20px;
			}
		h2, p, ul
			{
				padding-left:			12px;
				padding-right:			12px;
			}
	}


/* ANIMATION & EFFECTS */

@keyframes FadeIn
	{
		0%
			{
				opacity:				0;
			}
		100%
			{
				opacity:				1;
			}
	}

@keyframes FadeIn30
	{
		0%, 30%
			{
				opacity:				0;
			}
		60%, 100%
			{
				opacity:				1;
			}
	}

@keyframes FadeIn50
	{
		0%, 50%
			{
				opacity:				0;
			}
		70%, 100%
			{
				opacity:				1;
			}
	}

@keyframes FadeIn65
	{
		0%, 65%
			{
				opacity:				0;
			}
		85%, 100%
			{
				opacity:				1;
			}
	}

@keyframes FadeIn80
	{
		0%, 80%
			{
				opacity:				0;
			}
		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:						1rem;
		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;
	}

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

.ToggleReveal
	{
		padding:						0;
	}

div.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, footer
	{
		display:						flex;
	}

#Banner
	{
		top:							0;
		height:							70px;
		padding:						6px 0 4px 0;
	}

#Banner a.Logo
	{
		display:						block;
		width:							260px;
		height:							50px;
		margin:						4px 0 6px 40px;
		border-bottom:				none;
		background-image:			url(../gfx/header_MS-grey.png);
		background-repeat:			no-repeat;
		background-size:				260px 50px;
	}

.MenuOff
	{
		display:						none;
	}

#Banner nav, .Language, footer div, #Contact div
	{
		display:						flex;
		margin-left:					auto;
	}

#Banner nav > a, #Banner nav > div
	{
		position:						relative;										/*dropdown menu*/
		margin:						auto 40px auto 0;
		border:							none;
		font-size:						1rem;
		text-transform:					uppercase;
	}

.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
	{
		bottom:						0;
		justify-content:					center;
		align-items:					center;
		width:							120px;
		height:							40px;
		margin:						auto;
		background-color:				rgba(0,0,0,0);									/*transparent*/
		z-index:						1;
	}

.Language a, #Contact a
	{
		border-bottom:				none;
		font-size:						0.9rem;
	}

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

footer div
	{
		padding-right:					10px;
	}

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

#Contact
	{
		display:						none;
		bottom:						40px;
		left:							auto;
		width:							400px;
		height:							60px;
		border-radius:					5px 0 0;
		/*z-index:						1;*/
		animation:						SlidingContact 1.2s;
	}

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

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

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

@media (max-width: 1099px)
	{
		#Banner nav > a, #Banner nav > div
			{
				margin-right:			26px;
			}
	}


/* 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;
		cursor:							pointer;
	}

.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;
	}