:root {
	--deep-red: #BC1D2C;
	--deep-red-darker: #892428;
	--gold: #d59e59;
	--paper: #FCFAF6;
	--darker-paper: #F9F4ED;
	--darker2-paper: #F6EFE4;
	
	--main-bg-color: var(--paper); /*var(--deep-red);*/
	
	
	--header-font: Parisienne;
	--general-font: Marcellus;
	
	--light-text: white;
}

@font-face {
	font-family: 'Marcellus';
	src: url('/s/fonts/Marcellus-Regular-bb1d012c294458b07877ca389621ff2f.ttf');
	font-display: swap;
}

@font-face {
	font-family: 'Parisienne';
	src: url('/s/fonts/Parisienne-Regular-10e58dd4dab8f7ef68c8fdeef492536e.ttf');
	font-display: swap;
}

@media screen, print {

	body {
		background-color: var(--main-bg-color);
		color: black;
		font-family: var(--general-font);
		letter-spacing: 0.0075rem;
		
		margin: 0;
		display: flex;
		flex-direction: column;
		min-height: 100vh;
	}
	
	header{
		background-color: var(--deep-red);
		padding: 0.5rem;
		display: flex;
		order: -1;
		color: white;
	}
	header a:link,header a:visited {
		color: var(--light-text);
	}
	
	
	footer{
		background-color: var(--gold);
		padding: 0.5rem;
		text-align: center;
		font-size: 0.8rem;
		color: var(--light-text);
		
	}
	footer a:link,footer a:visited {
		color: var(--light-text);
	}
	
	.HolyGrail {
	  display: flex;
	  height: 100%;
	  flex-grow: 1;
	  flex-direction: row;
	}
	
	main{
		padding: 0.5rem;
		max-width: 800px;
		flex-basis: 800px;
		user-select: none;
		-webkit-user-select: none;
		/*cursor: default;*/
		
	}
	.leftBar{
		order: -1;
	}
	.leftBar, .rightBar{
		background-color: var(--darker-paper);
	}
	
	.flexContainer{
		display: flex;
	}
	.flexCell{
		flex: 1;
	}
	/* Links */
	a:link {
	  color: var(--deep-red);
	  text-decoration: none;
	}
	
	a:visited {
	  color: var(--deep-red);
	  text-decoration: none;
	}
	
	a:hover {
	  color: var(--gold);
	  text-decoration: underline;
	}
	
	a:active {
	  color: var(--gold);
	} 
	
	h1 {
		font-family: var(--header-font);
		color: var(--gold);
		font-weight: normal;
	}
	
	h2, h3 {
		font-family: var(--general-font);
		font-size: 1.5rem;
		color: var(--gold);
		font-weight: normal;
	}
	
	 h3 {
	 	font-size: 1.25rem;
	 }
	
	
	.left{text-align: left;}
	.center{text-align: center;}
	.right{text-align: right;}
	.middle{vertical-align: middle;}
	
	.ribbon{
		background-image: url("/s/img/Ribbon_1_edited_320w-7088c7b6de617ec13f528fa1ce001e6b.png");
		background-size: 100%;
		background-position: center center; 
		background-repeat: no-repeat;
		padding: 1rem;
		margin-left: auto;
		margin-right: auto;
		display: block;
		width:160px;
		height: 73px;
		border: none;
	}
	
	#headerMenuBtn{
		user-select: none;
		-webkit-user-select: none;
		cursor: pointer;
	}
	.headerMenuIcon{
		width: 1rem;
		height: 1rem;
		vertical-align: middle;
	}
	
	
	.headerSearchField{
		background-color: var(--deep-red-darker);
		border: none;
		border-radius: 1rem;
		color: white;
		padding-left: 1.5rem;
		padding-right: 0.5rem;
		font: var(--general-font);
		
		width: 100%;
		
		background-repeat: no-repeat;
		background-image: url("/s/icons/search-white-fbd704090ac864ab6ab2d57e4aa29b45.svg");
		background-size: 1rem;
		background-position-y: 0.25rem;
		background-position-x: 0.25rem;
		
		z-index: 101;
	}

	/* headerSearchField mobile */
	@media (max-width: 800px) {
		.headerSearchField:focus{
			position: fixed;
    		max-width: calc(100% - 5rem);
    		left: 28px;
			top: 0.5rem;
		}
	}
	
	.headerSearchField:focus {
		/* Outline and border-radius not working in safari */
		/*outline: 1px solid var(--gold);*/
		outline:none;
		box-shadow: 0 0 0 1px var(--gold);
		
	}
	
	.headerSearchResults{
		position: absolute;
		background-color: var(--deep-red-darker);
		
		padding-top: 0.8rem;
		padding-left: 0.5rem;
		padding-right: 0.5rem;
		
		margin-top: 1rem; /*0.8*/
		
		
		min-height: 10rem;
		border: 1px solid var(--gold);
		border-top: none;
		text-align: left;
		color: white;
		z-index: 100;
		
		box-sizing: border-box;
	}
	
	.headerSearchResults a{
		display: block;
		border-bottom: 1px solid rgba(255,255,255,0.2);
		overflow-wrap: break-word;
		line-height: 1.8rem;
	}
	
	.headerMenu{
		position: absolute;
		margin-top: 1.8rem;
		color: white;
		background-color: var(--deep-red);
		min-width: max(33vw,20ch);
		left: 0px;
		padding: 0.5rem;
		line-height: 1.8rem;
	}
	.headerMenu a{
		display: block;
	}
	
	article{
		font-size: 1rem;
		line-height: 1.1rem;
		word-wrap: break-word;
		hyphens: auto;
		-webkit-hyphens: auto;
	}
	
	.rightSideImageLarge, .imageLarge{
		max-width: 100% !important;
		padding: 0.5rem 0rem 0.5rem 0rem !important;
		cursor: zoom-out !important;
		pointer-events: none;
	}
	
	.rightSideImage{
		float: right;
		max-width: 40%;
		height: auto;
		padding: 1rem;
		pointer-events: none;
		clear: right;
		cursor: zoom-in;
		
		-webkit-transition: all 0.2s linear;
	    -moz-transition: all 0.2s linear;
	    -o-transition: all 0.2s linear;
	    transition: all 0.2s linear;
	}
	
	.centerImage{
		margin-left: auto;
		margin-right: auto;
		display: block;
		  
		clear: both;
		max-width: 40%;
		height: auto;
		padding: 1rem;
		pointer-events: none;
	}
	
	.rightSideImageClickable{
		float: none;
		height: auto;
		width: auto;
		max-width: none;
		padding: unset;
	}
	
	.rightSideImageClickableLink{
		float: right;
		max-width: 40%;
		height: auto;
		padding: 1rem;
		width: 100%;
	}
	
	.clear{
		clear: both;
	}
	
	/*.breadcrumb {
	    padding: 0 .5rem;
	}*/
	
	.breadcrumb ul {
	    display: flex;
	    flex-wrap: wrap;
	    list-style: none;
	    margin: 0;
	    padding: 0;
	}
	    
	.breadcrumb li::after {
	    display: inline-block;
	    margin: 0 .25rem;
	    content: ">";
	}
	
	.tag{
		border: 1px solid var(--deep-red);
		 background-color: var(--deep-red);
		 color: var(--light-text);
		 border-radius: 0.75rem 0.75rem;
		 padding-left: 0.5rem;
		 padding-right: 0.5rem;
		 margin-right: 0.1rem;
		 cursor: pointer;
		
		 user-select: none;
		 -webkit-user-select: none;
		 white-space: nowrap;
		 line-height: 1.8rem;
	}
	
	.tag:hover{
		text-decoration: none;
	}
	
	.tag.unselected{
		/*border: 1px solid var(--deep-red);*/
		background-color: var(--paper);
		color: var(--deep-red);
	}
	
	ul.ingredients {
		list-style-type: ' - ';
		list-style-position: inside;
		padding-left: 0px;
		width: fit-content;
		min-width: 30%;
	}

	ul.ingredients li:nth-child(2n-1) {
	  background: var(--darker-paper);
	  z-index: -1;
	}
	ul.ingredients li{
		padding-bottom: 0.25rem;
		padding-left: 0.25rem;
	}
	
	
	ol.metod {
		counter-reset: li;
		list-style: none;
		*list-style: decimal;
		padding-left: 0.25rem;
	}
	
	ol.metod li {
		position: relative;
		padding-left: 2rem;
		padding-bottom: 0.5rem;
		/*min-height: 2rem;*/
	}
	
	ol.metod > li:before{
	content: counter(li);
		counter-increment: li;
	}
	ol.metod li:before {
		color: #fff;
		background: var(--deep-red);
		border-radius: 50%;
		font-size: 1rem;
		width: 1.5rem;
		height: 1.5rem;
		line-height: 1.5rem;
		text-align: center;
		display: block;
		position: absolute;
		top: 0;
		left: 0;
	}
	ol.metod li:nth-child(2n-1) {
	  background: var(--darker-paper);
	  z-index: -1;
	}
	
	ol.metod > li > ol {
	  padding-left: 1rem;
	  padding-top: 0.5rem;
	}
	ol.metod > li > ol > li {
  		list-style: none;
  		counter-increment: another-counter;
	}
	ol.metod > li > ol > li:last-child {
		padding-bottom: 0rem;
	}
	ol.metod > li > ol  li:before {
		content: counters(another-counter, '.', upper-alpha);
		background: green;
	}
	
	
	.margin-bottom-half{
		margin-bottom: 0.5rem;
	}
	
	.margin-bottom-one{
		margin-bottom: 1rem;
	}
	
	.frontpageTumbImg{
		width: 10rem;
		height: 14rem;
		object-fit: cover;
		
		user-select: none;
		-webkit-user-select: none;
		cursor: pointer;
	}
	.frontpageTumb{
		width: 10rem;
		height: auto;
		text-align: center;
		display: inline-block;
		margin: 0.25rem;
		font-size: 1.20rem;
	}
	.pageLinks{
		column-count: auto;
		column-width: 20rem;
		column-gap: 2rem;
		margin-bottom: 1rem;
	}
	.pageLinks a{
	    line-height: 1.8rem;
	}
	.pageLinks a::after{
	    content: "\a";
	    white-space: pre;
	}
	/*.pageLinks a:nth-child(2n-1) {
	  background: var(--darker-paper);
	}*/
	
	.error{
		color: var(--deep-red);
	}
	.error:before {
	    content: '\A';
	    white-space: pre;
	}
	
	/*input:focus, textarea:focus {
   	 outline-color: var(--gold) !important;
   	 outline-width: 1px;
    }*/
	
	textarea{
		height: 4rem;
		width: 100%;
	    width: -moz-available;
	    width: -webkit-fill-available;
	    width: fill-available;
	    width: stretch;
	}
	
	button, input[type=button], input[type=submit] {
	  border-radius: 7px;
	  box-shadow: 0 2px 5px 0 rgb(200 200 200 / 50%);
	  border-color: rgb(210 210 210);
	  background-color: #d59e59;
	  color: white;
	  border-style: solid;
	  border-width: 1px;
	  cursor: pointer;
	  padding: 0.5em 1em 0.5em 1em;
	  text-align: center;
	  text-decoration: none !important;
	  font-weight: bold;
	  vertical-align: middle;
	}
	
	button:hover, input[type=button]:hover, input[type=submit]:hover {
	  background-color: #d09245;
	}
	
	button:active, input[type=button]:active, input[type=submit]:active {
	  background-color: #c88633;
	}
		
	
	.border{
	  outline: 5px solid green;
	  outline-offset: 3px;
	  margin: 1rem;
	  border: 1px solid red;
	  padding: 0.5rem;
	}
	
	/*****/
	table.narrow_img_book{min-width: 10rem; width: 100%; max-width: 30rem;border-spacing: 0;margin-left: auto;margin-right: auto; }
    table.narrow_img_book td{padding:0}
    table.narrow_img_book td.narrow_img_book_text{border: 5px solid #DDCCAA; border-top: 0; border-bottom: 0; padding: 0.5rem; }
    table.narrow_img_book img{vertical-align: bottom; width:100%}
    
    .sbht{
    	display:none;
    }

}

@media print{    
    .no-print, .no-print * {
        display: none !important;
    }
    
    @page{
	    size: A4 portrait;
    }
    
    body{
        width: 21cm !important;
        height: 29.7cm !important;
        margin: 0 !important; /*30mm 45mm 30mm 45mm*/
   	} 
   	
   	/* Print background */
   	.ribbon {
	    -webkit-print-color-adjust: exact !important;   /* Chrome, Safari 6 – 15.3, Edge */
	    color-adjust: exact !important;                 /* Firefox 48 – 96 */
	    print-color-adjust: exact !important;           /* Firefox 97+, Safari 15.4+ */
	}
}