@import '../Layout/QuoteShow.css';
@import '../Layout/HamburgerMenu.css';
@import '../Links/Twitter.css';
@import '../Links/Bsky.css';
@import '../Layout/MainImage.css';
@import '../Layout/PageTexts.css';

@font-face {
	font-family: 'AvenirNextRegular';
	src: url('/fonts/AvenirNextLTPro-Regular.ttf') format('truetype');
}

:root {
	--main-image-height: 100vh;
	--logo-red: #DA0E04;
	--quote-yellow: rgb(251, 171, 3);
	--left-margin: 20px;
	--right-margin: 20px;
	--main-font: AvenirNextRegular;
}

body {
	font-family: var(--main-font);
	background-color: rgba(50,20,0,0.3);
	font-size: 17px;
}

a.emoji {
	text-decoration: none;
}

img, iframe, video, audio {
	max-width: 100%;
}


@media screen and (max-width:768px) {
	:root {
		--main-image-height: calc(100vh - 72px);
	}
}

nav {
	--menu-font-size: 24px;
	--filter-shadow: 1px 1px 5px black;
	--filter-shadow-hover: 0px 0px 1px black;
}

header {
	--top-margin: 20px;
	--header-gap: 20px;
	--logo-img-width-1024w: 100px;
	--header-height-full-page-image: calc(var(--main-image-height) - (2 * var(--top-margin)));
}

header {
	margin-top: var(--top-margin);
	margin-left: var(--left-margin);
	margin-right: var(--right-margin);
	margin-bottom: var(--top-margin);
}

header {
	display: flex;
	justify-content: space-between;
	gap: var(--header-gap);
}

	header > a:first-of-type {
		align-self: flex-start;
	}

nav {
	display: flex;
	gap: 2vw;
	font-family: AvenirNextRegular;
	flex-wrap: wrap;
	align-content: flex-start;
}

	nav a {
		color: white;
		text-decoration: none;
		text-shadow: var(--filter-shadow);
		font-size: var(--menu-font-size);
	}

:is(#HamburgerMenu, nav) a {
	transition-property: text-shadow,filter;
	transition-duration: 0.4s
}

	:is(#HamburgerMenu, nav) a:hover {
		text-shadow: var(--filter-shadow-hover);
	}


@media screen and (max-width:1024px) {

	header {
		flex-wrap: wrap;
		align-items: flex-start;
	}

	nav {
		justify-content: flex-end;
		flex-shrink: 1;
		flex-basis: 60vw;
		flex-grow: 1;
	}

	nav {
		--menu-font-size: 20px;
	}

	header a img {
		max-width: var(--logo-img-width-1024w);
	}
}

@media screen and (max-width:1024px) {

	header:not(.full-page-image) > .QuoteShow {
		display: none;
	}
}

header.full-page-image {
	height: var(--header-height-full-page-image);
}

header a img {
	filter: drop-shadow(3px 3px 2px black);
	transition-duration: 0.7s;
	transition-property: filter;
}

header a:hover img {
	filter: drop-shadow(5px 5px 5px black)
}


main {
	--backgroun-gradient-top: rgba(0,0,0,0.9);
	color: white;
	overflow: hidden;
	background-image: linear-gradient(to bottom, var(--backgroun-gradient-top), rgba(0,0,0,0.5));
	padding: 20px;
}

	main:empty {
		display: none;
	}

header.full-page-image ~ main {
	--backgroun-gradient-top: rgba(0,0,0,0.7);
}

header:not(.full-page-image) ~ main {
	max-width: 1024px;
	margin-left: auto;
	margin-right: auto;
}

main > h1:first-child {
	margin-top: 0px;
}

header + .Breadcrumbs {
	margin-left: var(--left-margin);
	margin-right: var(--right-margin);
}


main a {
	color: #EEE
}

	main a:hover {
		color: var(--logo-color);
	}