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


/* IMPORT CSS FILES */

@import url(mobile_v1.css);
@import url(tablet_v1.css) (min-width: 600px);
@import url(mobile_books_v1.css);
@import url(tablet_books_v1.css) (min-width: 600px);
@import url(mobile_books_black_v1.css);


/* IMAGES */

@media (orientation: portrait)
	{
		.Background1
			{
				background-image:	url(../images/bg_DarkTracesM.jpg);
			}
		.Background2
			{
				background-image:	url(../images/header_DarkTraces.jpg);
			}
	}

@media (orientation: landscape)
	{
		.Background1
			{
				background-image:	url(../images/bg_DarkTracesW1.jpg);
			}
		.Background2
			{
				background-image:	url(../images/header_DarkTraces.jpg);
			}
	}

.OneLiner
	{
		color:							rgb(0,0,0);										/*black #000*/
	}

#Landing img
	{
		max-width:						480px;
		opacity:						0.9;
	}


/* RESPONSIVE STYLES */

@media (orientation: portrait)
	{
		#Landing
			{
				align-items:			normal;
				padding-bottom:		60px;
			}
		#Landing > div
			{
				display:				flex;
				flex-direction:			column;
				justify-content:			space-between;
				align-items:			normal;
				margin-top:			120px;
			}
	}

@media (orientation: landscape)
	{
		#Landing img
			{
				filter:					invert(100%);
			}
	}

@media (orientation: landscape) and (min-height: 560px)
	{
		#Landing img
			{
				padding:				0 50px;
			}
	}

@media (orientation: landscape) and (min-height: 680px)
	{
		#Landing img
			{
				padding:				0;
			}
	}

@media (min-width: 600px) and (max-width: 829px)
	{
		#Reviews div:first-child blockquote:first-child
			{
				order:					1;
			}
		#Reviews div:first-child blockquote:nth-child(2)
			{
				order:					3;
			}
		#Reviews div:first-child blockquote:nth-child(3)
			{
				order:					2;
			}
	}


/* ANIMATION & EFFECTS */

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


/* LINKS */

h2, #Reviews blockquote, #Characters q, #Order p,
#Banner nav a:hover, #Banner nav a:active, #Banner nav a.Selected,
.Language a:hover, .Language a:active
	{
		color:							rgb(60,165,160);								/*teal #3ca5a0*/
	}

.Contact:hover, .Contact:active, .Facebook:hover, .Facebook:active,
.Instagram:hover, .Instagram:active, .Youtube:hover, .Youtube:active
	{
		background-color:				rgb(60,165,160);								/*teal #3ca5a0*/
	}