/*
Base green		#318f57
Vanilla			#fff5d2
*/

/*
Second version:
:root {
		--defaultFontSize: 20;
		--colorTextBody:			0, 0, 0;
		--colorTextBodyAlt:			0, 153, 92;
		--colorBackgroundBody:		255, 255, 255;
		--colorTextBar:				255, 255, 255;
		--colorTextBarAlt:			207, 179, 85;
		--colorBackgroundBar:		0, 153, 92;
		--colorShadowBar:			207, 179, 85;
		--colorBackgroundLowerBar:	0, 102, 61;
		--colorShadowLowerBar:		207, 179, 85;
		--colorTextMenu:			17, 85, 57;
		--colorBackgroundMenu:		255, 255, 255;
		--colorShadowMenu:			0, 0, 0;
		--colorDividerMenu:			230, 207, 129;
		--colorPopDownFocus:		207, 179, 85;
		--colorBackgroundDialogue:	0, 0, 0;
		--colorTextDialogue:		255, 255, 255;
};

@media (prefers-color-scheme: light) {
	:root {
		--colorTextBody:			0, 0, 0;
		--colorTextBodyAlt:			0, 153, 92;
		--colorBackgroundBody:		255, 255, 255;
		--colorTextBar:				255, 255, 255;
		--colorTextBarAlt:			207, 179, 85;
		--colorBackgroundBar:		0, 153, 92;
		--colorShadowBar:			207, 179, 85;
		--colorBackgroundLowerBar:	0, 102, 61;
		--colorShadowLowerBar:		207, 179, 85;
		--colorTextMenu:			17, 85, 57;
		--colorBackgroundMenu:		255, 255, 255;
		--colorShadowMenu:			0, 0, 0;
		--colorDividerMenu:			230, 207, 129;
		--colorPopDownFocus:		207, 179, 85;
		--colorBackgroundDialogue:	0, 0, 0;
		--colorTextDialogue:		255, 255, 255;
	}
}
@media (prefers-color-scheme: dark) {
	:root {
		--colorTextBody:			200, 200, 200;
		--colorTextBodyAlt:			0, 204, 122;
		--colorBackgroundBody:		50, 50, 50;
		--colorTextBar:				207, 190, 134;
		--colorTextBarAlt:			75, 75, 75;
		--colorBackgroundBar:		0, 51, 31;
		--colorShadowBar:			75, 75, 75;
		--colorBackgroundLowerBar:	0, 26, 15;
		--colorShadowLowerBar:		75, 75, 75;
		--colorTextMenu:			200, 200, 200;
		--colorBackgroundMenu:		40, 40, 40;
		--colorShadowMenu:			0, 0, 0;
		--colorDividerMenu:			156, 145, 107;
		--colorPopDownFocus:		207, 190, 134;
		--colorBackgroundDialogue:	0, 0, 0;
		--colorTextDialogue:		255, 255, 255;		
	}
}
*/

/*
Third version:
Base green: 0, 50, 35;
Lighter green: 0, 110, 80;
Even lighter green: 0, 204, 145;
Darker green: 0, 25, 18;
*/

:root {
		--defaultFontSize: 20;
		--colorTextBody:			0, 0, 0;
		--colorTextBodyAlt:			0, 110, 80;
		--colorBackgroundBody:		255, 255, 255;
		--colorTextBar:				255, 255, 255;
		--colorTextBarAlt:			207, 179, 85;
		--colorBackgroundBar:		0, 110, 80;
		--colorShadowBar:			207, 179, 85;
		--colorBackgroundLowerBar:	0, 50, 35;
		--colorShadowLowerBar:		207, 179, 85;
		--colorTextMenu:			0, 50, 35;
		--colorBackgroundMenu:		255, 255, 255;
		--colorShadowMenu:			0, 0, 0;
		--colorDividerMenu:			230, 207, 129;
		--colorPopDownFocus:		207, 179, 85;
		--colorBackgroundDialogue:	0, 0, 0;
		--colorTextDialogue:		255, 255, 255;
};

@media (prefers-color-scheme: light) {
	:root {
		--colorTextBody:			0, 0, 0;
		--colorTextBodyAlt:			0, 110, 80;
		--colorBackgroundBody:		255, 255, 255;
		--colorTextBar:				255, 255, 255;
		--colorTextBarAlt:			207, 179, 85;
		--colorBackgroundBar:		0, 110, 80;
		--colorShadowBar:			207, 179, 85;
		--colorBackgroundLowerBar:	0, 50, 35;
		--colorShadowLowerBar:		207, 179, 85;
		--colorTextMenu:			0, 50, 35;
		--colorBackgroundMenu:		255, 255, 255;
		--colorShadowMenu:			0, 0, 0;
		--colorDividerMenu:			230, 207, 129;
		--colorPopDownFocus:		207, 179, 85;
		--colorBackgroundDialogue:	0, 0, 0;
		--colorTextDialogue:		255, 255, 255;
	}
}
@media (prefers-color-scheme: dark) {
	:root {
		--colorTextBody:			200, 200, 200;
		--colorTextBodyAlt:			0, 204, 145;
		--colorBackgroundBody:		50, 50, 50;
		--colorTextBar:				207, 190, 134;
		--colorTextBarAlt:			75, 75, 75;
		--colorBackgroundBar:		0, 50, 35;
		--colorShadowBar:			75, 75, 75;
		--colorBackgroundLowerBar:	0, 25, 18;
		--colorShadowLowerBar:		75, 75, 75;
		--colorTextMenu:			200, 200, 200;
		--colorBackgroundMenu:		40, 40, 40;
		--colorShadowMenu:			0, 0, 0;
		--colorDividerMenu:			156, 145, 107;
		--colorPopDownFocus:		207, 190, 134;
		--colorBackgroundDialogue:	0, 0, 0;
		--colorTextDialogue:		255, 255, 255;		
	}
}

html, body {
	margin: 0px;
	padding: 0px;
    width: 100%;
	background-color:	rgb(var(--colorBackgroundBody));
	color:				rgb(var(--colorTextBody));
	
	scrollbar-color: rgb(var(--colorBackgroundBar)) rgb(var(--colorBackgroundBody));	
	scrollbar-width: thin;
}	
main {
	width: 100%;
	margin: 0px;
	padding: 0px;
	display: inline-block; /*Block apparently has some top margin?*/
	background-color: rgb(var(--colorBackgroundBody));
}

/*When a dialogue box is open we can disable scrolling of the body. I wonder if I can do this with the contents div too as it's not the body we're scrolling on our site.

body:has(dialog[open]) {
  overflow: hidden;
}

*/
@media (orientation: landscape)
{
	.ContentArea {background-color: rgb(var(--colorBackgroundBar)); top: 6em; bottom: 0;}
	.faysite_title{font-size: 2.3rem;}
	.MobileTopBar {display: none;}
	.SiteTopBar {display: flex;}
	.SiteLowerBar {display: flex;}	
	.FooterArea {display: block;}
	/*.NewsListItem {width: 600px;}*/
	.FileListContainer {flex-direction: row;}
	.ImgCenterBody {width: 75rem;}
}
@media (orientation: portrait)
{
	.ContentArea {background-color: rgb(var(--colorBackgroundBody)); top: 2em; bottom: 0;}
	.faysite_title{font-size: 1.0rem;}
	.MobileTopBar {display: flex;}
	.SiteTopBar {display: none;}
	.SiteLowerBar {display: none;}
	.FooterArea {display: none;}
	/*.NewsListItem {width: 100%;}*/
	.FileListContainer {flex-direction: column;}
	.ImgCenterBody {width: 20rem;}
}
/*FONT SOURCE*/

/*Church*/
@font-face {
    font-family: FontChurch;
    src: url('fonts/OrthodoxChurchBeta.eot?#iefix') format('embedded-opentype'),
	url(/fonts/OrthodoxChurchBeta.ttf) format('truetype');
}

/*Icons*/
@font-face {
    font-family: FayWebFont;
    src: url(/fonts/FayWebFont.ttf) format('truetype');
}

/*FONT SOURCE END*/
/*Fonts*/
*{
	font-family: Garamond, serif;
	font-size: calc(var(--defaultFontSize) * 1px);
}

sub, sup{
		font-size: 60%;
}
font{
	font-size: calc(var(--defaultFontSize) * 1px);
}
font.title{
	font-weight: bold;
	font-size: calc(var(--defaultFontSize) * 1.5px);
	font-variant: small-caps;
}
font.chapter{
	font-weight: normal;
	font-size: calc(var(--defaultFontSize) * 1.25px);
	font-variant: small-caps;
}
font.bold{
	font-weight: bold;
}
font.italic{
	font-style: italic;
}
font.big{
	font-size: calc(var(--defaultFontSize) * 1.4px);
}
font.giant{
	font-size: calc(var(--defaultFontSize) * 5px);
}
font.medium{
	font-size: calc(var(--defaultFontSize) * 1px);
}
font.small{
	font-size: calc(var(--defaultFontSize) * 0.75px);
}
font.small-caps{
	font-variant: small-caps;
}
/*Fonts end*/


/*Firefox scrollbar customization*/
*{
	/*scrollbar-width: thin;*/
	
}

/*Chrome/opera scrollbar customization*/
.NoScrollBar {
    -ms-overflow-style: none;  /* Internet Explorer 10+ */
    scrollbar-width: none;  /* Firefox */
}
.NoScrollBar::-webkit-scrollbar { 
    display: none;  /* Safari and Chrome */
}

.prevent-select {
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10 and IE 11 */
  user-select: none; /* Standard syntax */
}

.faysite_title
{	
	font-variant: small-caps;
	font-family: FontChurch;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.url
{
	text-decoration: none;
	cursor: pointer;
}
.url:hover
{
	text-decoration: underline;
}


.ImgCenterBody
{
	display: block;
	margin-left:auto; 
	margin-right:auto;
}
.DialogContainer
{
	display: none;
	background-color: rgba(var(--colorBackgroundDialogue), 0.5);
	width: 100%;
	height: 100%;	
	position: fixed;
	top: 0;
	left: 0;
	z-index: 10;
	
}

.SiteTopBar {
	font-size: 1rem;
	float:top;
	height: 4em;
	/*line-height: 4em;*/
	width: 100%;
	overflow-x: scroll;
	overflow-y: hidden;
	white-space: nowrap;
	position: fixed;
	left: 0px;
	top: 0px;
	align-items: center;

	z-index: 8;
	
	background-color: rgb(var(--colorBackgroundBar));
	background: rgb(var(--colorBackgroundBar));
	background: linear-gradient(180deg,rgba(var(--colorBackgroundLowerBar), 1) 0%, rgba(var(--colorBackgroundBar), 1) 100%);
	color: rgb(var(--colorTextBar));
	text-shadow: 0px 1px rgba(var(--colorTextBar), 0.5);
	box-shadow: 0px 1px 0px 1px rgb(var(--colorShadowBar)); 
}
.DesktopQuickButtonContainer
{
	position:absolute;
	top: 0px;
	right: 5px;
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
}
.DesktopQuickButton
{
	background: none;
	background-color: inherit;
	color: inherit;
	border: none;	
	font: inherit;
	cursor: pointer;
	outline: inherit;
	text-align: right;	
	text-shadow: none;
	margin: 0px;
	padding: 0px 5px 0px 5px;
	font-family: FayWebFont;
	font-size: calc(var(--defaultFontSize) * 1.2px);
}
.DesktopQuickButton:hover, .DesktopQuickButton:focus
{
	text-decoration: underline;
}
.BarButton {
	background: none;
	background-color: inherit;
	color: inherit;
	border: none;
	padding: 0px 15px 0px 15px;
	font: inherit;
	cursor: pointer;
	outline: inherit;
	font-variant: small-caps;
}
.BarButton:focus, .BarButton:hover
{		
	/*outline: 2px inset rgb(var(--colorPopDownFocus));
	outline-offset: -3px;*/
	text-decoration: underline;
}
.ContactsBarButton
{
	background: none;
	background-color: inherit;
	color: inherit;
	border: none;
	padding: 0px 15px 0px 15px;
	font: inherit;
	cursor: pointer;
	outline: inherit;
}
.ContactsBarButton:focus, .ContactsBarButton:hover
{
	outline: 2px inset rgb(var(--colorPopDownFocus));
	outline-offset: -3px;
}

.SiteTopBarAbsoluteCorner {
	display: flex;
	width: calc(100% - 5em);
	position:absolute;
	bottom: 0px;
	right: 0px;
	align-items; end;
}

.ScrollButtonStripLeft {
	display: none;
	cursor: pointer;
	text-align: center;
	padding: 0px 10px 0px 8px;
	margin: 0px 0px 0px 0px;
	color: rgb(var(--colorTextBarAlt));
}
.ScrolledButtonStrip {
	overflow-x: scroll;
	overflow-y: hidden;
	white-space: nowrap;
	width: 100%;
	display: flex;
	flex-direction: row-reverse;
}
.ScrolledButtonStripFBox {
	width: 100%;
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 0px 0px;
	display: inline-flex;
	justify-content: flex-end;
	/*justify-content: space-between;*/
}
.ScrollButtonStripRight {
	display: none;	
	cursor: pointer;
	text-align: center;
	padding: 0px 8px 0px 10px;
	margin: 0px 0px 0px 0px;
	color: rgb(var(--colorTextBarAlt));
}

.SiteLowerBar {
	font-size: 1rem;
	float:top;
	height: 2em;
	line-height: 2em;
	width: 100%;
	overflow-x: scroll;
	overflow-y: hidden;
	white-space: nowrap;
	position: fixed;
	left: 0px;
	top: 4em;
	justify-content: space-between;

	z-index: 7;
	
	background-color: rgb(var(--colorBackgroundLowerBar));
	color: rgb(var(--colorTextBar));
	text-shadow: 0px 1px rgba(var(--colorTextBar), 0.5);
	box-shadow: 0px 1px 0px 1px rgb(var(--colorShadowLowerBar)); 
}

.PopdownMenu
{	z-index: 6;
	overflow: auto;
	white-space: nowrap;
	display: none;/*Will be flex when visible.*/
	position: fixed;
	top: 6em;
	left: 0;
	padding: 10px 10px 10px 10px;
	max-height: calc(100% - 6em);
	max-width: 100%;
	background-color: rgb(var(--colorBackgroundBody));
	flex-direction: column;
	box-shadow: 0px 0px 3px 5px rgba(var(--colorTextBody), 0.25), 10px 10px 0px 0px rgb(var(--colorBackgroundBody)) inset, 0px -10px 0px 0px rgb(var(--colorBackgroundBody)) inset, 12px 0px 0px 0px rgb(var(--colorDividerMenu)) inset;
}
.PopdownButton
{
	background: none;
	font: inherit;
	font-size: 1rem;
	background-color: none;
	color: rgb(var(--colorTextMenu));
	border: none;
	padding: 10px;	
	cursor: pointer;
	outline: none;
	text-align: left;
	font-variant: small-caps;
}
.PopdownButton:focus, .PopdownButton:hover
{
	/*outline: 2px inset rgb(var(--colorPopDownFocus));
	outline-offset: -5px;*/
	text-decoration: underline;
}

.MobileTopBar {
	font-size: 1rem;
	float:top;
	height: 2em;
	line-height: 2em;
	width: 100%;
	overflow-x: scroll;
	overflow-y: hidden;
	white-space: nowrap;
	position: fixed;
	left: 0px;
	top: 0px;
	justify-content: space-between;

	z-index: 8;
	
	background-color: rgb(var(--colorBackgroundBar));	
	background: rgb(var(--colorBackgroundBar));
	background: linear-gradient(180deg,rgba(var(--colorBackgroundLowerBar), 1) 0%, rgba(var(--colorBackgroundBar), 1) 100%);
	color: rgb(var(--colorTextBar));
	text-shadow: 0px 1px rgba(var(--colorTextBar), 0.5);
	box-shadow: 0px 1px 0px 1px rgb(var(--colorShadowBar)); 
}

.ButtonOuter
{
	display: flex;
	justify-content: space-between;
}
.MobileMenuTrigger 
{
	background: none;
	background-color: inherit;
	color: inherit;
	border: none;	
	font: inherit;
	outline: none;
	
	display: inline;
	cursor: pointer;
	text-align: center;
	padding: 0px 10px 0px 10px;
	margin: 0px 0px 0px 0px;
	font-size: 2rem;
	font-weight: 1000; /*Bold also works, not to mention how funny it is that this comment is marked as an error in html but since it is technically css it's not an issue.*/
}
.MobileMenuTrigger:focus, .MobileMenuTrigger:hover
{	
	outline: 3px inset rgb(var(--colorPopDownFocus));
	outline-offset: -5px;
	/*
	text-decoration: underline;
	*/
}

.MobileMenu {
	font-size: 1rem;
	line-height: 2em;
	width: 100%;
	overflow-y: scroll;
	scrollbar-color: rgba(var(--colorTextMenu), 1) rgba(var(--colorBackgroundMenu), 0);
	scrollbar-width: thin;
	
	white-space: nowrap;
	display: none;
	flex-direction: column;	
	position: fixed;
	top: calc(2em + 1px);
	bottom: 0;
	left: 0;
	z-index: 6;
	
	background-color: rgb(var(--colorBackgroundMenu));
	color: rgb(var(--colorTextMenu));
	/*
	text-shadow: 0px 1px rgba(var(--colorTextMenu), 0.5);	
	*/
	text-shadow: none;
	box-shadow: 0px 2px 2px 2px rgba(var(--colorShadowMenu), 0.5);
	text-align: right;
}
.MobileQuickContainer
{
	width: calc(100% - 20px);
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
	gap: 5px;
}
.MobileQuickButton
{
	background: none;
	background-color: inherit;
	color: inherit;
	border: none;	
	font-family: FayWebFont;
	font-size: calc(var(--defaultFontSize) * 1.5px);
	cursor: pointer;
	outline: inherit;
	text-align: right;	
	text-shadow: inherit;
	margin: 0px;
	padding: 0px 5px 0px 5px;
}
.MobileQuickButton:hover, .MobileQuickButton:focus
{
	background-color: rgba(var(--colorPopDownFocus), 0.25);
}
.MenuDivider {
	background-color: rgb(var(--colorDividerMenu));	
	width: auto;
	margin: 5px 5px 5px 5px; 
	padding: 2px; /*Sets the thickness.*/
}
.MobileMenuButton {
	background: none;
	background-color: inherit;
	color: inherit;
	border: none;
	padding: 5px 15px 5px 5px;
	font: inherit;
	cursor: pointer;
	outline: inherit;
	text-align: right;
	margin: 0px 10px 0px 10px;
	text-shadow: inherit;
	font-variant: small-caps;
}
.MobileMenuButton:focus, .MobileMenuButton:hover
{
	background-color: rgba(var(--colorPopDownFocus), 0.25);
}
.MobileMenuButtonInner
{
	background: none;
	background-color: inherit;
	color: inherit;
	border: none;
	padding: 5px 40px 5px 5px;
	font: inherit;
	cursor: pointer;
	outline: inherit;
	text-align: right;
	margin: 0px 10px 0px 0px;
	text-shadow: inherit;
	font-variant: small-caps;
}
.MobileMenuButtonInner:focus, .MobileMenuButtonInner:hover
{
	background-color: rgba(var(--colorPopDownFocus), 0.25);
}
.SMenuMobile
{
	display: none; 
	flex-direction: column; 
	padding-left: 10px;
	box-shadow: 19px 10px 0px 0px rgb(var(--colorBackgroundMenu)) inset, 0px -10px 0px 0px rgb(var(--colorBackgroundMenu)) inset, 21px 0px 0px 0px rgb(var(--colorDividerMenu)) inset;
}

.ContentArea {	
	color: rgb(var(--colorTextBody));
	overflow: auto;
	scrollbar-width: thin;
	position: fixed;
	font-size: 1rem; 
	text-align: justify;
	width: 100%;
	padding: 0px;
	margin: 0px;
}
@keyframes closewelcome {
 /* from {transform: scaleY(1);}
  to {transform: scaleY(0); display: none;}*/
  0% {height: 300px;}
  100% {height: 0px;}
}
.animclosed
{
	animation: closewelcome 1s;
	animation-fill-mode: forwards;
}
@keyframes SlideFromLeft {	
  0% {transform: translateX(-100%);}
  100% {transform: translateX(0%);}
}
@keyframes SlideFromRight {	
  0% {transform: translateX(100%);}
  100% {transform: translateX(0%);}
}
.aniSlideFromRight
{
	animation: SlideFromRight 1s;
	animation-fill-mode: forwards;
}
.aniSlideFromLeft
{
	animation: SlideFromLeft 1s;
	animation-fill-mode: forwards;
}
.aniSlideToLeft
{
	animation: SlideFromLeft 1s;
	animation-fill-mode: both;
	animation-direction: reverse;
}
.aniSlideToRight
{
	animation: SlideFromRight 1s;
	animation-fill-mode: both;
	animation-direction: reverse;
}
@keyframes SlideToTop {	
  0% {transform: translateY(0%);}
  100% {transform: translateY(-100%);}
}
.aniSlideToTop
{
	animation: SlideToTop 1s;
	animation-fill-mode: forwards;
}
@keyframes FadeIn {	
  0% {opacity: 0;}
  100% {opacity: 1;}
}
.animFadeIn
{
	animation: FadeIn 1s;
	animation-fill-mode: forwards;
}
.FooterArea {
	overflow: hidden;	
	font-size: 1rem;
	color: rgb(var(--colorTextBar));	
	bottom: 0px;
}
.ContactsFlex {
	display: flex;
	margin: 10px;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	align-items: flex-start;
}
.ContactsInnerflex {
	display: flex;
	flex-direction: row;
	margin: 10px;
}
.ContactsKey {
	text-align: right;
	margin: 5px 1px 5px 5px;
	overflow-wrap: normal;
	font-variant: small-caps;	
}
.ContactsValue {
	text-align: left; 
	white-space: initial;
	margin: 5px 5px 5px 1px;
	overflow-wrap: normal;
}

.LinksFlex {
	display: flex;
	margin: 10px;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
}
.LinksItem {
	margin: 5px;
}


.MainButton
{
	background: none;
	background-color: none;
	color: rgb(var(--colorTextBody));
	cursor: pointer;
	/*
	outline: 2px solid rgb(var(--colorTextBody));
	*/
	outline: none;
	border: none;
	text-align: center;
	
	overflow: hidden;
	margin: 5px;	
	padding: 5px 20px 5px 20px;
	box-shadow: 0px 0px 8px rgba(var(--colorTextBody), 0.33);
}
.MainButton:focus, .MainButton:hover:enabled
{	
	box-shadow: 0px 0px 8px rgba(var(--colorTextBody), 0.66);
}
.MainButton:disabled
{
	box-shadow: 0px 0px 8px rgba(var(--colorTextBody), 0.25);
	color: rgba(var(--colorTextBody), 0.25);
}
.UpButton
{	
	display: none;	
	position: fixed;
	bottom: 10vmin;
	right: 10vmin;
	font-size: calc(var(--defaultFontSize) * 2px);
	opacity: 0.5;
	
	background: none;
	background-color: none;	
/*	
background-image: radial-gradient(color-mix(in srgb, rgba(var(--colorTextBody), 1) 50%, rgba(var(--colorBackgroundBody), 1) 50%) 50%, color-mix(in srgb, rgba(var(--colorTextBody), 0) 50%, rgba(var(--colorBackgroundBody), 0) 50%) 50.1%);
*/
	background-image: radial-gradient(rgba(var(--colorTextBody), 0.1) 0%, rgba(var(--colorTextBody), 0.1) 50%, rgba(var(--colorTextBody), 0) 51%);
	color: rgb(var(--colorTextBody));
	cursor: pointer;
	outline: none;
	border: none;
	text-align: center;	
	overflow: hidden;	
	padding: calc(var(--defaultFontSize) * 1px) calc(var(--defaultFontSize) * 1.5px) calc(var(--defaultFontSize) * 0.5px) calc(var(--defaultFontSize) * 1.5px);
	box-shadow: none;
	text-shadow: 0px 0px 1px rgba(var(--colorBackgroundBody), 1);
}
.UpButton:hover
{
	opacity: 1;
}

.ParagraphDisplayButton
{
	background: none;
	background-color: none;
	color: rgb(var(--colorTextBody));
	outline: none;
	border: none;
	text-decoration: none;
	cursor: pointer;
	width: calc(100% - 20px);
	text-align: left;
	margin: 10px;	
	box-shadow: 0px 1px 0px rgb(var(--colorTextBody));
}
.ParagraphDisplayButton:hover, .ParagraphDisplayButton:focus
{	
	text-decoration: underline;
}
/*
Block Float left while the other is block with none float but overflow hidden triggers a not entirely obvious behavior causing the second div to fill in the remaining width. Love it 
when they have the exactly same topic as my issue :)
*/
.ParagraphDisplayArrow
{
	float: left;
	text-decoration: none;
}
.ParagraphDisplayTitle
{
	float: none;
	text-decoration: inherit;
	overflow: hidden;
	text-align: center;
	font-variant: small-caps;
	font-size: calc(var(--defaultFontSize) * 1.25px);
}
.ParagraphDisplayContent
{
	margin: 0px;
	padding-left: 20px;
	box-shadow: 10px 10px 0px 0px rgb(var(--colorBackgroundBody)) inset, 0px -10px 0px 0px rgb(var(--colorBackgroundBody)) inset, 12px 0px 0px 0px rgb(var(--colorDividerMenu)) inset;
}
.DefaultURL
{
	background: none;
	background-color: none;	
	color: inherit;
	outline: none;
	border: none;
	text-decoration: none;
}
.InlineURL
{
	background: none;
	background-color: none;		
	color: inherit;
	outline: none;
	font-size: inherit;
	border: none;
	text-decoration: none;
	font-variant: small-caps;
	box-shadow: 0px 0px 5px rgba(var(--colorTextBody), 0.5);
}
.InlineURL:hover, .InlineURL:focus 
{
	/*text-decoration: underline;*/
	box-shadow: 0px 0px 5px rgba(var(--colorTextBody), 1);
}
.FileListContainer
{
	display: flex;
	/*
	flex-direction: row;
	*/
	flex-wrap: wrap;
	justify-content: space-between;
	align-content: center;

	margin: 10px;
	gap: 10px;
}
.FileListItem
{
	display: flex;
	flex-direction: column;
	justify-content: flext-start;
	gap: 5px;

	flex: 1 1 0px;
	
	background: none;
	background-color: none;
	color: rgb(var(--colorTextBody));
	cursor: pointer;
	outline: none;
	border: none;
	text-align: center;
	overflow: ellipsis;	
	box-shadow: 0px 0px 20px rgba(var(--colorTextBody), 0.2);
	padding: 10px;
	text-decoration: none;
}
.FileListItem:hover, .FileListItem:focus
{
	box-shadow: 0px 0px 20px rgba(var(--colorTextBody), 0.5);
}
.FileListItem:hover .FileListItemText, .FileListItem:focus .FileListItemText
{
	/*
	text-decoration: underline;
	*/
}
.FileListItemText
{	
	text-decoration: none;
}
.FileListItemIcon
{	
	color: rgb(var(--colorTextBar));
	text-shadow: 0px 0px 5px rgba(var(--colorTextBody), 1);
	margin: 0px;
	text-decoration: none;
}
.FileButtonBody
{	
	background: none;
	background-color: none;
	color: rgb(var(--colorTextBar));
	cursor: pointer;
	outline: none;
	border: none;
	text-align: center;
	overflow: ellipsis;	
	text-shadow: 0px 0px 10px rgba(var(--colorTextBody), 0.5);
	padding: 0px;
	text-decoration: none;
	margin: auto;
}
.FileButtonBody:hover, .FileButtonBody:focus
{
	text-shadow: 0px 0px 10px rgba(var(--colorTextBody), 1);
}
.TableBig td, .TableBig th
{
	font-size: calc(var(--defaultFontSize) * 1.4px);
}
.TableBasic
{
	background-color: rgba(var(--colorTextBody), 0.1);
}
.TableBasic td
{	
	padding-left: 10px; 
	padding-right: 10px;
}
.TableBasic th
{
	padding-left: 10px; 
	padding-right: 10px;
	background-color: rgba(var(--colorTextBody), 0.2);
	font-variant: small-caps;
	/*
	border-bottom: 1px solid rgb(var(--colorTextBody));
	*/
}
.TableStriped
{
	background-color: rgba(var(--colorTextBody), 0.1);
}
.TableStriped td
{
	padding-left: 10px; 
	padding-right: 10px;
}
.TableStriped th
{
	padding-left: 10px; 
	padding-right: 10px;
	background-color: rgba(var(--colorTextBody), 0.2);
	font-variant: small-caps;
	border-bottom: 1px solid rgb(var(--colorTextBody));
}
.TableStriped tr:nth-child(even)
{
	background-color: rgba(var(--colorTextBody), 0.1);
}
/*
Apparently you can do a proper auto-filling column grid: grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); where 1fr means the available space divided by 1. If I understand this right that is...
*/

/*
News ███████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████
*/

:root {
		--colorWelcomeTabText: var(--colorBackgroundBody);
		--colorWelcomeTabTextShadow: var(--colorTextBody);
};
@media (prefers-color-scheme: light) {
	:root {
		--colorWelcomeTabText: var(--colorBackgroundBody);
		--colorWelcomeTabTextShadow: var(--colorTextBody);
	}
}
@media (prefers-color-scheme: dark) {
	:root {
		--colorWelcomeTabText: var(--colorTextBar);
		--colorWelcomeTabTextShadow: var(--colorBackgroundBody);
	}
}

@media (orientation: landscape)
{
	.WelcomeTabContainer {height: 500px;}
	.WelcomeTabArrowRight {display: block;}
	.WelcomeTabArrowLeft {display: block;}
	.WelcomeTabText {font-size: calc(var(--defaultFontSize) * 3px);}
}
@media (orientation: portrait)
{
	.WelcomeTabContainer {height: 400px;}
	.WelcomeTabArrowRight {display: none;}
	.WelcomeTabArrowLeft {display: none;}
	.WelcomeTabText {font-size: calc(var(--defaultFontSize) * 2px);}
}
.WelcomeTabContainer
{
	position: relative;
	width: 100%;
	background-color: black;
	overflow: hidden;	
}
.WelcomeTab
{
	background: none;
	background-color: none;
	color: rgb(var(--colorWelcomeTabText));
	cursor: pointer;
	outline: none;
	border: none;
	text-align: center;
	overflow: hidden;	
	padding: 0px;	
	box-shadow: none;
	text-shadow: none;
	position: absolute;
	left: 0;
	top: 0;
	
	width: 100%;
	height: 100%;
	text-decoration: none;
}
.WelcomeTab:focus, .WelcomeTab:hover
{
	text-decoration: underline;
}
.WelcomeTabImg
{
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	object-fit: cover;
}
.WelcomeTabText
{
	color: rgb(var(--colorWelcomeTabText));
	/*mix-blend-mode: difference;*/
	text-shadow: 1px 1px 0px rgb(var(--colorWelcomeTabTextShadow)), 0px 0px 4px rgb(var(--colorWelcomeTabTextShadow)), 0px 0px 8px rgb(var(--colorWelcomeTabTextShadow));
	
	/*font-size: calc(var(--defaultFontSize) * 3px);*/
	font-variant: small-caps;
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: none;
	text-decoration: inherit;
}
.WelcomeTabControl
{
	position: absolute;
	bottom: 30px;
	left: 50%;
	
	color: rgb(var(--colorWelcomeTabText));
	/*mix-blend-mode: difference;*/
	text-shadow: 1px 1px 0px rgb(var(--colorWelcomeTabTextShadow)), 0px 0px 4px rgb(var(--colorWelcomeTabTextShadow)), 0px 0px 8px rgb(var(--colorWelcomeTabTextShadow));
	
	transform: translate(-50%, 0%);
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	z-index: 3;

}

.TabLink
{
	font-size: calc(var(--defaultFontSize) * 5px);
	opacity: 0.75;	
	background: none;
	background-color: none;
	color: inherit;
	cursor: pointer;
	outline: none;
	border: none;
	text-align: center;
	overflow: hidden;	
	padding: 0px;	
	box-shadow: none;
	
	text-shadow: inherit;
}
.TabLink:hover, .TabLink:focus
{	
	opacity: 1;
}
.WelcomeTabArrowLeft
{
	font-size: calc(var(--defaultFontSize) * 0.5vmin);
	opacity: 0.25;	
	background: none;
	background-color: none;		
	cursor: pointer;
	outline: none;
	border: none;
	text-align: center;
	overflow: hidden;	
	box-shadow: none;	
	padding: 2vmin;
	
	color: rgb(var(--colorWelcomeTabText));
	/*mix-blend-mode: difference;*/
	text-shadow: 1px 1px 0px rgb(var(--colorWelcomeTabTextShadow)), 0px 0px 4px rgb(var(--colorWelcomeTabTextShadow)), 0px 0px 8px rgb(var(--colorWelcomeTabTextShadow));
	
	position: absolute;
	left: 0;
	top: calc(50% - 15px);
	transform: translate(0%, -50%);
	z-index: 3;
}
.WelcomeTabArrowLeft:hover, .WelcomeTabArrowLeft:focus
{
	opacity: 1;
}
.WelcomeTabArrowRight
{
	font-size: calc(var(--defaultFontSize) * 0.5vmin);
	opacity: 0.25;	
	background: none;
	background-color: none;		
	cursor: pointer;
	outline: none;
	border: none;
	text-align: center;
	overflow: hidden;
	box-shadow: none;
	padding: 2vmin;
	
	color: rgb(var(--colorWelcomeTabText));
	/*mix-blend-mode: difference;*/
	text-shadow: 1px 1px 0px rgb(var(--colorWelcomeTabTextShadow)), 0px 0px 4px rgb(var(--colorWelcomeTabTextShadow)), 0px 0px 8px rgb(var(--colorWelcomeTabTextShadow));
	
	position: absolute;
	right: 0;
	top: calc(50% - 15px);
	transform: translate(0%, -50%);
	z-index: 3;
}
.WelcomeTabArrowRight:hover, .WelcomeTabArrowRight:focus
{
	opacity: 1;
}
.WelcomeTabEdge
{
	position: absolute;
	bottom: 0;
	width: 100%;
	height: 30px;
	background-color: rgb(var(--colorBackgroundLowerBar));
	box-shadow: 0px -1px 0px 1px rgb(var(--colorShadowLowerBar));
	z-index: 3;
}
/*aniSlideFromRight/Left are basically the same so we could just use those instead for the welcome tabs too.*/
.aniWelcomeFromRight
{
	animation: WelcomeFromRight 1s;
	animation-fill-mode: forwards;
}
@keyframes WelcomeFromRight {	
  0% {left: 100%;}
  100% {left: 0;}
}
.aniWelcomeFromLeft
{
	animation: WelcomeFromLeft 1s;
	animation-fill-mode: forwards;
}
@keyframes WelcomeFromLeft {	
  0% {left: -100%;}
  100% {left: 0;}
}
.NewsNavControl
{
	display: flex; 
	width: 100%; 
	align-items: center; 
	flex-direction: row; 
	flex-wrap: wrap;
	justify-content: center;
}
.NewsInnerContainer
{
	padding: 20px 7.5vmin 20px 7.5vmin;	
}
.ArticlePreviewIMG
{
	width: 100%;
	height: 100px;
	object-fit: cover;
}
.ArticleContentOuter
{
	position: relative;
	overflow: hidden;
	background-color: inherit;
}
.ArticleContent
{
	width: 100%;
	left: 0;
	top: 0;
	background-color: inherit;
}
.ArticleContentActive
{	
	/*display: block;*/
	/*visibility: visible;*/
	pointer-events: auto;
	/*position: static;*/
}
.ArticleContentInactive
{	
	width: 100%;
	/*visibility: hidden;*/
	display: none;
	pointer-events: none;
	position: absolute;
}

@media (orientation: landscape)
{
	.NewsListItem {width: 600px;}
	.ButtonArticlePrev {display: block;}
	.ButtonArticleNext {display: block;}
}
@media (orientation: portrait)
{
	.NewsListItem {width: 100%;}
	.ButtonArticlePrev {display: none;}
	.ButtonArticleNext {display: none;}
}
.NewsList
{
	display: flex;
	margin: 5px;
	padding: 5px;	
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	align-items: flex-start;
}
.NewsListItem
{	
	background: none;
	background-color: none;
	color: inherit;
	cursor: pointer;
	outline: none;
	border: none;
	text-align: left;
	
	overflow: hidden;
	margin: 10px; 
	padding: 5px; 
	box-shadow: 0px 0px 8px rgba(var(--colorTextBody), 0.33);
}
.NewsListItem:focus, .NewsListItem:hover
{
	box-shadow: 0px 0px 8px rgba(var(--colorTextBody), 66);
}

/*
WebGallery ███████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████
*/
@media (orientation: landscape)
{
	.GalleryItem
	{
	width: 300px;
	/*
	height: 423px;
	*/
	}	
	.GalleryItemTn
	{	
		width: 300px;
		max-height: 215px;
	}
	.GalleryNav
	{
		width: 300px;		
	}
}
@media (orientation: portrait)
{
	.GalleryItem
	{
	width: 200px;
	/*
	height: 282px;
	*/
	}
	.GalleryItemTn
	{	
		width: 200px;
		max-height: 143px;
	}
	.GalleryNav
	{
		width: 200px;
	}
}
/*
To be really fair, I sorta want the "back" and "directory" buttons to be simply among the "image" buttons, making it much more simple and without as much whitespace. Move the directory titles onto their thumbnails maybe? I mean, why not.
*/

.GalleryFlex
{	
	display: flex;
	flex-flow: row wrap;
	align-content: center;
	align-items: center;
	justify-content: center;
	gap: 25px;
		
	/*width: calc(100% - 50px);*/
	width: auto;
	padding: 25px;
	margin: 0px;
	
	background-color: red;
	background: none;
	color: inherit;
	font: inherit;
	font-variant: inherit;
	border: none;
	outline: none;	
}
.GalleryItem
{	
	position: relative;		
	text-align: center;	
	
	background: none;
	background-image: url('https://web2.faymisk.eu/weblap/loadingimage_anim.png');
	background-repeat: no-repeat;
	background-size: 50px 50px;
	background-position: center;
	
	color: inherit;
	font: inherit;
	font-variant: inherit;
	text-decoration: none;
	
	padding: 0;
	margin: 0;	
	border: none;
	outline: none;	

	cursor: pointer;
}
.GalleryItem:hover, .GalleryItem:focus
{	
	outline: rgb(var(--colorPopDownFocus)) solid 2px;
}
.GalleryItemTn
{	
	/*
	The image doesn't need to have "position: absolute;" or more like shouldn't have as that would wreck the container's height as it wouldn't adapt to the image size anymore. Yeah, I didn't think about this proper but something that doesn't need to float above stuff doesn't need messing with at all so no need to change "position".
	*/
	background: none;
	display: block;/*IMPORTANT! Without this there is a gap under the image! Because someone was real funny when putting together the basic rules of CSS...*/
	padding: 0;
	margin: 0;
	object-fit: cover;
	
	z-index: 0;
}
.GalleryItemTitleContainer
{
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	text-decoration: inherit;
	color: inherit;
	text-shadow: inherit;
	background-color: none;/*Funnily enough this doesn't work because apparently absolute positioned objects with height 100% just default to 0px... except that the display: flex part still aligns everything to the middle perfectly fine so... pfft, I guess css is still a hackjob after all these years.*/
}
.GalleryItemTitle
{	
	width: 100%;
	text-decoration: inherit;	
	text-align: center;		
	background: none;
	text-shadow: 1px 1px 0px rgb(var(--colorBackgroundBody)), -1px 1px 0px rgb(var(--colorBackgroundBody)), -1px 1px 0px rgb(var(--colorBackgroundBody)), -1px -1px 0px rgb(var(--colorBackgroundBody));
	background-color: rgba(var(--colorBackgroundBody), 0.75);/*So background after background color overrides it. Yeah, obvious in hindsight :)*/
	
	overflow-wrap: break-word;
	
	box-shadow: 0px 0px 5px rgba(var(--colorBackgroundBody), 1);
	color: rgb(var(--colorTextBody));	
	font-variant: small-caps;
	border: none;
	outline: none;
	/*display: block;/*Yes, this is something I forgot to add again. Damn the weird quirks that make no sense without context... or with.*/
	
	z-index: 1;
}
.GalleryDir
{	
	box-shadow: 1px 1px 3px rgb(var(--colorTextBody)), 10px 10px rgb(var(--colorBackgroundBody)), 11px 11px 3px rgb(var(--colorTextBody)), 20px 20px rgb(var(--colorBackgroundBody)), 21px 21px 3px rgb(var(--colorTextBody));
}
/*
Navigation
*/

.GalleryNav
{	
	position: relative;	
	display: flex;
	justify-content: center;
	align-items: center;
	
	background: none;	
	color: inherit;
	font: inherit;
	font-variant: inherit;
	text-decoration: none;
	text-shadow: none;
	
	border: none;
	outline: none;
	padding: 0;
	margin: 0;
	
	cursor: pointer;
}
.GalleryNav:hover, .GalleryItem:focus
{	
	text-shadow: 2px 2px 0px rgb(var(--colorPopDownFocus)), -2px 2px 0px rgb(var(--colorPopDownFocus)), -2px -2px 0px rgb(var(--colorPopDownFocus)), 2px -2px 0px rgb(var(--colorPopDownFocus));
}

/*
Image viewer
*/

.GalleryImgViewContainer
{
	position: absolute;
	top: 0;
	left: 0;	
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;
	cursor: auto;
	background: none;
	background-image: url('https://web2.faymisk.eu/weblap/loadingimage_anim.png');
	background-repeat: no-repeat;
	background-size: 50px 50px;
	background-position: center;
	
	display: flex;
	justify-content: center;
	align-items: center;
}
.GalleryImgView
{
	background: none;
	object-fit: contain;
	max-width: 100%;
	max-height: 100%;
	padding: 0;
	margin: 0;
	cursor: pointer;
}
@media (orientation: landscape)
{
	.GalleryImgViewLeft
	{
		display: flex;		
	}
	.GalleryImgViewRight
	{
		display: flex;		
	}
	font.GalTitleFont
	{
		font-size: calc(var(--defaultFontSize) * 1.4px);
	}
	font.GalSymbolFont
	{
		font-size: calc(var(--defaultFontSize) * 10px);
	}
}
@media (orientation: portrait)
{
	.GalleryImgViewLeft
	{
		display: none;		
	}
	.GalleryImgViewRight
	{
		display: none;		
	}
	font.GalTitleFont
	{
		font-size: calc(var(--defaultFontSize) * 1.2px);
	}
	font.GalSymbolFont
	{
		font-size: calc(var(--defaultFontSize) * 6px);
	}
}
.GalleryImgViewButton
{	
	position: fixed;
	
	font: inherit;
	font-variant: inherit;
	text-decoration: none;
	font-size: calc(var(--defaultFontSize) * 2px);
	line-height: calc(var(--defaultFontSize) * 2.1px);
	height: calc(var(--defaultFontSize) * 2.1px);
	outline: none;
	background: none;
	color: rgb(var(--colorTextDialogue));
	
	justify-content: center;
	align-items: center;
		
	border: none;
	outline: none;
	text-shadow: 1px 1px 0px rgb(var(--colorBackgroundDialogue)), -1px 1px 0px rgb(var(--colorBackgroundDialogue)), 1px -1px 0px rgb(var(--colorBackgroundDialogue)), -1px -1px 0px rgb(var(--colorBackgroundDialogue));
	
	padding: 10px;
	margin: 0;/*Compensating the shadows of the icon. For each one as to keep it uniform.*/	
	
	z-index: 4;
	cursor: pointer;
	
}
.GalleryImgViewButton:hover, .GalleryImgViewButton:focus
{	
	/*text-decoration: underline;*/
	/*
	outline: rgb(var(--colorPopDownFocus)) solid 2px;
	*/
	text-shadow:  1px 1px 0px rgb(var(--colorPopDownFocus)), -1px 1px 0px rgb(var(--colorPopDownFocus)), -1px -1px 0px rgb(var(--colorPopDownFocus)), 1px -1px 0px rgb(var(--colorPopDownFocus)), 0px 0px 4px rgb(var(--colorShadowMenu));
}
.GalleryImgViewClose
{
	display: flex;
	right: 0;
	top: 0;
}
.GalleryImgViewLeft
{
	left: 0;
	top: calc(50% - calc(var(--defaultFontSize) * 0.5 * 2.1px));
}
.GalleryImgViewRight
{
	right: 0;
	top: calc(50% - calc(var(--defaultFontSize) * 0.5 * 2.1px));
}
.GalleryImgViewDesc
{
	position: fixed;
	bottom: 0;
	
	font: inherit;
	font-variant: inherit;
	text-decoration: none;
	font-size: calc(var(--defaultFontSize) * 1.4px);
	line-height: calc(var(--defaultFontSize) * 1.4px);	
	outline: none;
	background-color: rgba(0,0,0, 0.5);
	color: rgb(var(--colorTextBody));
	
	text-align: center;
	
	width: 100%;
	border: none;
	outline: none;
	padding: 10px;
	margin: 0;
	
	z-index: 3;	
}