@font-face {
		font-family: calligraphic;
	src: url('../data/Balqis.ttf');
}

@font-face {
		font-family: normal_text;
	src: url('../data/comic-sans/COMICSANS.ttf');
}

* {
	/* background-color: #F8C8DC;  */
	box-sizing: border-box;
    /* border-style: solid; */}

html {
	color: yellow; 
	overflow-x: hidden;}

html, body {
	height: 100vh;
	width: 100vw;
	margin: 0;
padding: 0;} 

body {
	--minFontTitle: 22.5px;
	--maxFontTitle: 45px;
	/* --fontTitle: clamp(var(--minFontTitle), 5vw , var(--maxFontTitle)); */
	--fontTitle: clamp(var(--minFontTitle), 3.9vw , var(--maxFontTitle));
	
	/* font_x = font_min + [(font_max(=20px)-font_min(=10px)) / (screen_max(=1200px)-screen_min(=600px))]* (screen_x - screen_min) --> (font_max(=20px)-font_min(=10px)) = 10px ; (screen_max(=1200px)-screen_min(=600px)) = 600px --> */
	/* --> [(font_max(=20px)-font_min(=10px)) / (screen_max(=1200px)-screen_min(=600px))] = 10 / 600 = 0.0166667 ; --> font_x = font_min + 0.0166667 * (100vw - 600px) */
	--minFontArt: 10px;
	--maxFontArt: 20px;
	/* --fontArt: clamp(var(--minFontArt), 1.667vw , var(--maxFontArt)); */
	--fontArt: clamp(var(--minFontArt), 1.4vw , var(--maxFontArt));
	--fontArt: clamp(var(--minFontArt), var(--minFontArt) + 0.0166667 * (100vw - 600px), var(--maxFontArt) );
	
	--minFontNavbar: 9px;
	--maxFontNavbar: 18px;
    --fontNavbar: clamp(var(--minFontNavbar), 1.5vw , var(--maxFontNavbar));
	
	--minFontQuot: 8px;
	--maxFontQuot: 18px;
	/* --fontQuot: clamp(var(--minFontQuot), 1.5vw , var(--maxFontQuot)); */
	--fontQuot: clamp(var(--minFontQuot), 1.3vw , var(--maxFontQuot));
	
	--minFontFootCap: 7.5px;
	--maxFontFootCap: 16px;
	--fontFootCap: clamp(var(--minFontFootCap), 1.5vw , var(--maxFontFootCap));
	
	--minFontFootAdd: 6.5px;
	--maxFontFootAdd: 16px;
	--fontFootAdd: clamp(var(--minFontFootAdd), 1.5vw , var(--maxFontFootAdd));
	
	/* Page background & HeaderTitle: Watermelon Pink (hex: E37383; rgb: 227, 115, 131) / Almond rgb(234, 221, 202) / Brass rgb(255, 193, 110)
	Golden rod rgb(218, 165, 32) / Ecru rgb(194, 178, 128) / Wheat rgb(245, 222, 179) / giallo ocra rgb(174, 160, 75) / 244 233 226 / light tan 214 181 136*/
	/* Color to fade to the Page background & HeaderTitle: Ivory HEX #ff3333 RGB 255, 255, 240 / Beige 	rgb(245, 245, 220) / Cornsilk rgb(255, 248, 220)*/
	/* Header Navigation Bar & Top Footer: Pastel red (hex: FAA0A0; rgb: 250, 160, 160 ) / Darkening almond rgb(210.6, 198.9, 181.8); */
	/* Footer Banner: Watermelon Pink (hex: FAA0A0; rgb: 250, 160, 160 ) / Dark Almond (rgb(163.8, 154.7, 141.4)) / dark red rgb(136, 8, 8) / Oxblood rgb(74, 4, 4) */
	/* Footer Banner border-color: Dark Almond rgb(117, 110.5, 101);*/ 
	--pageBckGndColorRed: 234;
	--pageBckGndColorGreen: 221;
	--pageBckGndColorBlue: 202;
	--pageAccessoriesColorRed: 74;
	--pageAccessoriesColorGreen: 4;
	--pageAccessoriesColorBlue: 4;
	--ToColorRed: 234;
	--ToColorGreen: 221;
	--ToColorBlue: 202;
	--headerTitleBckGndColorRed: 214;
	--headerTitleBckGndColorGreen: 181;
	--headerTitleBckGndColorBlue: 136;
	--headerNavBarBckGndColorRed: 210.6;
	--headerNavBarBckGndColorGreen: 198.9;
	--headerNavBarBckGndColorBlue: 181.8;
	--footerTopBckGndColorRed: 210.6;
	--footerTopBckGndColorGreen: 198.9;
	--footerTopBckGndColorBlue: 181.8;
	--footerBannerBckGndColorRed: 163.8;
	--footerBannerBckGndColorGreen: 154.7;
	--footerBannerBckGndColorBlue: 141.4;
	--footerBannerBorderColorRed: 117;
	--footerBannerBorderColorGreen: 110.5;
	--footerBannerBorderColorBlue: 101;
	
	--pageMainSectPaddingLeft: 0vw;
	--pageMainSectPaddingRight: 0vw;
}

.page_wrapper {
	min-height: 100%;
	width: 100%;
	display: flex;
	flex-direction: column;
	color: green;
	background: linear-gradient(45deg, rgb(var(--pageBckGndColorRed), var(--pageBckGndColorGreen), var(--pageBckGndColorBlue)), 
	10%, rgb(var(--ToColorRed), var(--ToColorGreen), var(--ToColorBlue))); /* (Millenial Pink) #F3CFC6 / #F8C8DC (Pastel Pink) to rigth #EADDCA */
	/* background-color: #EADDCA; */
	background-image: linear-gradient(45deg, rgb(var(--pageBckGndColorRed), var(--pageBckGndColorGreen), var(--pageBckGndColorBlue)), 
	10%, rgb(var(--ToColorRed), var(--ToColorGreen), var(--ToColorBlue)) );
	background-size: cover;
	background-repeat: no-repeat;
	background-attachment: local;
	background-blend-mode: darken;
}

.sticky_header, .sticky_footer {
	flex-grow: 0;
	flex-shrink: 0;
	width: 100%;
	color: green;
}

.sticky_footer {
	color: #FAA0A0; /* (Claret) #811331; */
	background-color: rgb(var(--footerTopBckGndColorRed), var(--footerTopBckGndColorGreen), var(--footerTopBckGndColorBlue));} /* (Pastel red) */

/* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% PAGE MAIN DIV LANDSCAPE %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */

.pageMainSection { 
	flex-grow: 1;
	width: 100%;
	display: flex;
	flex-flow: row wrap;
	align-items: stretch;
	/* --articleWidth: 62vw; */
	--articleWidth: 57vw;
	--marginTopFirst: 1vh;
	/* --marginTopBetween: 40vh; */
	--marginTopBetween: 2vh;
	--marginLeftSmall: 5vw;
	--marginRightSmall: 5vw;
	--marginLeftBig: 15vw;
	--marginRightBig: 15vw;
	padding-right: var(--pageMainSectPaddingRight);
	padding-left: var(--pageMainSectPaddingLeft);
}

/* .pageMainSection > div {
flex: 0 0 45vw;
	} */

.pageMainSection > div:nth-child(odd) {
	flex: 0 0 var(--articleWidth);
	margin-bottom: 0;
	}
	
	.pageMainSection > div:nth-child(even) {
	flex: 0 0 calc( 100vw - ( var(--pageMainSectPaddingLeft) + var(--articleWidth) + var(--marginLeftSmall) 
	+ var(--marginRightSmall) + var(--pageMainSectPaddingRight) ) );
	margin-top: var(--marginTopBetween);
    margin-bottom: 0;
	order: 1;
	color: orange;
	}

.pageMainSection > div:nth-child(1) {
	margin-top: var(--marginTopFirst);
	/* margin-bottom: 2vmin; */
	margin-left: var(--marginLeftSmall);
	color: yellow;
}
	
.pageMainSection > div:nth-child(2) {
	margin-top: var(--marginTopFirst);
	display: flex;
	flex-direction: column;
	align-items: start;
	justify-content: end;
	color: orange;
	perspective: 100vmin;
	perspective-origin: center right;
	}

.pageMainSection > div:nth-child(3) {
	margin-top: var(--marginTopBetween);
	margin-right: var(--marginRightSmall);
	/* margin-bottom: 2vmin; */
	order: 2;
}
	
.pageMainSection > div:nth-child(4) {
	margin-left: var(--marginLeftSmall);
	display: flex;
	flex-direction: row;
	box-sizing: border-box;
	align-items: end;
	justify-content: end;
	/* border-style: solid;
	color: orange; */
	}
	
.pageMainSection > div:nth-child(5) {
	display: flex;
	flex-flow: row nowrap;
	margin-top: var(--marginTopBetween);
	margin-bottom: 0;
	order: 3;
	flex: 1 1 max-content;
	margin-left: var(--marginLeftBig);
	margin-right: var(--marginRightBig);
	color: blue;
	z-index: 1;}

.pageMainSection > div:last-child {
	margin-bottom: 1vmin;}
	
.pageMainSection > div:nth-child(6) {
	order: 4;
	flex: 0 0 70vw;
	margin-bottom: 0;
	margin-top: 0;
	margin-left: 15vw;
	margin-right: 15vw;
	display: flex;
	justify-content: space-evenly;
	color: blue;
}

article {
	width: 100%;
	border-style: groove; /* outset */
	border-style: none;
	border-radius: 2vmin;
	border-width: 1vmin;
	border-color: #FAA0A0; /* rgb(250, 160, 160) (Pastel red) /#DC143C (Crimson) / #E37383 (Watermelon Pink) / #FAA0A0 (Pastel Red) / #DE3163 (Cerise) / #811331 (Claret) */
	text-align: justify;
	padding: 7%;
	/* font-size: 2vmin; */
	font-size: var(--fontArt, 2vmin);
	font-weight: bold;
	line-height: 1.6;
	font-family: normal_text;
	color: black; /* #811331 */
}

article h2 {
	display: block;
	text-align: center;
}

article p {
	text-align: justify;
	padding: 0 1vmin;
}

article ul {
	/* display: inline-block; */
	text-align: justify;
}

article strong {
/* color: rgb(136, 8, 8); */
color: rgb(74, 4, 4);
}

/* %%%%%%%%%%%%%%%%%%%%  SECTION  @scope (.pageMainSection > div:nth-of-type(2), .pageMainSection > div:nth-of-type(4)) to (:scope > img)  */
.mainSectionContent__image {
	margin-bottom: calc( var(--marginTopBetween) * -1);
	width: calc( 100vw - ( var(--articleWidth) + var(--marginLeftSmall) + var(--marginRightBig) ) );
	min-height: var(--marginTopBetween);
	max-height: calc( var(--marginTopBetween) + 60% );
	/* aspect-ratio: minmax(1/1, 1/2); */
	aspect-ratio: 1;
	object-fit: fill;
}

.image_orient_mirrored {
	transform: rotateY(180deg);
	/* filter: sepia(100%) hue-rotate(290deg) saturate(400%) brightness(0.75) contrast(200%); */
}
	
.colonnato {
	position: relative;
	display: block;
	aspect-ratio: 1/1.7;
	width: 15%;
	margin-bottom: 0;
	padding: 0;
	/* border-style: solid;
	color: blue; */
	box-sizing: content-box;
}

.colonnato > img {
	position: absolute;
	width: 100%;
	height: 100%;
	object-fit: cover; 
	object-position: 0 0;
	/* border-style: solid;
	color: green; */
	/* filter: brightness(0) saturate(100%) invert(90%) sepia(27%) saturate(149%) hue-rotate(353deg) brightness(95%) contrast(93%);
	opacity: 0.2; */
	/* filter: brightness(0.58) contrast(400%) sepia(10%) hue-rotate(353deg); */
	opacity: 0.8;
}

*[lang="en"], *[lang="en_flex"] {
display: none;}

*[lang="fr"], *[lang="fr_flex"] {
display: none;}

*[lang="de"], *[lang="de_flex"] {
display: none;}

/* *[lang="it"], *[lang="it_flex"] {
display: none;} */

@media screen and (orientation: portrait) {
	
	.page_wrapper{
		/* background: linear-gradient(to right, #E37383, 5%, white, 95%, #E37383); */
		background: linear-gradient(to right, rgb(var(--pageBckGndColorRed), var(--pageBckGndColorGreen), 
		var(--pageBckGndColorBlue)), 5%, white, 95%, rgb(var(--pageBckGndColorRed), var(--pageBckGndColorGreen), var(--pageBckGndColorBlue)));
	}

	.pageMainSection { 
		/* flex-direction: column; */
		flex-flow: column nowrap;
		/* align-items: stretch; */
		--marginTopBetween: 0;
	}

	.pageMainSection > div {
		flex: 0 0 auto;
		margin-left: 5%;
		margin-right: 5%;
		margin-top: 0;
		margin-bottom: 0;
		/* border-style: solid;
		color: blue; */
	}

	.pageMainSection > div:nth-child(odd) {
		flex: 0 0 auto;
		}
	
	.pageMainSection > div:nth-child(even) {
		flex: 0 0 auto;
		order: 0;
		margin-left: 0;
		margin-right: 0;
		margin-top: 0;
	}

	.pageMainSection > div:nth-child(1) {
		margin-bottom: 0;
	}
	
	.pageMainSection > div:nth-child(2) {
		/* flex: 0 0 36vw; */
		flex: 0 0 auto;
		position: relative;
		perspective: none;
		color: orange;
		margin-top: 0;
		margin-bottom: 0;
	}
	
/* .pageMainSection > div:nth-child(2) > img {
	position: absolute;
	height: 100%;
	bottom: 0;
} */
	
	.pageMainSection > div:nth-child(3) {
		order: 0; 
		margin-top: 0;
		margin-bottom: 0; 
		z-index: 2;
}
	
.pageMainSection > div:nth-child(5) {
	order: 0; 
	flex: 0 0 auto;
	margin-top: 0;
	margin-bottom: 0;
	padding: 0;
	margin-left: 5%;
	margin-right: 5%;
}

.pageMainSection > div:nth-child(6) {
	order: 0;
	margin-left: 10%;
	margin-right: 10%;
	flex-flow: row nowrap;
	flex: 0 0 auto;
	align-content: space-around;
	color: gold;
	}

.mainSectionContent__image {
	position: static;
	margin-top: 0;
	margin-bottom: 0;
	margin-right: 15%;
	margin-left: 40%;
	width: 45%;
	aspect-ratio: 1 / 1;
	max-height: 100%;
	min-height: 0;
	filter: brightness(1.22);
}

.colonnato > img {
	filter: none;
}
.colonnato::before {
		background-color: rgba(var(--pageBckGndColorRed), var(--pageBckGndColorGreen), var(--pageBckGndColorBlue), 0.0.5);
	}
	
/* .colonnato:nth-last-of-type(3)::before {
background-color: rgba(var(--pageBckGndColorRed), var(--pageBckGndColorGreen), var(--pageBckGndColorBlue), 0.1);}
	
.colonnato:nth-last-of-type(2)::before  {
background-color: rgba(var(--pageBckGndColorRed), var(--pageBckGndColorGreen), var(--pageBckGndColorBlue), 0.05);}
	
.colonnato:last-of-type::before {
background-color: rgba(var(--pageBckGndColorRed), var(--pageBckGndColorGreen), var(--pageBckGndColorBlue), 0);} */

.sticky_footer {
/* background: linear-gradient(to right, #FAA0A0, 10%, white); */
/* border-top: solid #F88379; */
border-top: solid rgb(var(--footerBannerBorderColorRed), var(--footerBannerBorderColorGreen), var(--footerBannerBorderColorBlue));
}

}