/* Personnalize font */
@font-face {
	font-family: Marianne;
	src: url(/assets/fonts/marianne/Marianne-Regular.woff2);
}

@font-face {
	font-family: baudot;
	src: url(/assets/fonts/baudot-400.woff2);
	font-display:auto;
	font-style:normal;
	font-weight:400;
	font-stretch:normal;
}

@font-face {
	font-family: baudot;
	src: url(/assets/fonts/baudot-300.woff2);
	font-display:auto;
	font-style:normal;
	font-weight:300;
	font-stretch:normal;
}

* {
	font-family: Marianne, "Trebuchet MS", Helvetica, sans-serif;
	letter-spacing: -1px;
}

#main-title {
	font-family: "baudot", Marianne, "Trebuchet MS", Helvetica, sans-serif;
	font-weight: 400; /* 300 is also available */
	font-style: normal;
	font-size: 18pt;
}

/* Used for sticky footer */
.main {
	display: flex;
	min-height: 100vh;
	flex-direction: column;
}

footer {
	padding: 3rem 1.5rem 3rem !important;
}

.page {
	flex: 1;
}

.section {
	margin-top: 1.5rem;
}

/* Misc */
.hidden {
	display: none;
}

.link-table {
	cursor: pointer;
}


.recipe {
	image-orientation: from-image !important;
	box-shadow: 0px 0px 11px -2px rgba(0,0,0,0.75);
}

@media (prefers-color-scheme: dark) {
	.recipe {
		box-shadow: 0px 0px 11px -2px rgba(90,90,90,0.75);
	}
}

.recipe-desktop {
	display: none;
}

.recipe-mobile {
	margin-top: 5%;
}

.width-modal {
	width: auto !important;
}

@media (min-width: 700px)  {
	.recipe {
		position: sticky;
		top: 4.5rem;
		width: 100%;
	}

	.recipe-desktop {
		display: initial;
	}
	.recipe-mobile {
		display: none;
	}

	.width-modal {
		width: 1200px !important;
	}

	#linkedRecipe-infos {
		width: initial !important;
		max-width: 30% !important;
		margin-left: 5%;
	}

	.recipeLinked-infos {
		width: initial !important;
		max-width: 40% !important;
	}
}

.filled {
	fill: currentColor;
}

.form-icons {
	font-size: 16pt;
}

.hearts {
	color: #FF3860;
}

.hearts-update {
	color: #FF3860;
	cursor: pointer;
}

.stars {
	color: #494949;
}

.stars-update {
	color: #494949;
	cursor: pointer;
}

.share-icons {
	color: #494949;
}

.share-icons-cards {
	color: #494949;
	font-size: 14pt;
}

.clickable-green {
	color: #4CAF50;
	cursor: pointer;
}

.clickable-red {
	color: #C92636;
	cursor: pointer;
}

.links-card {
	color: #494949;
}

.links-card:hover {
	color: #000;
}

.image-card {
	image-orientation: from-image !important;
}

.card {
	transition: box-shadow 0.2s;
}

.card:hover {
	box-shadow: 0 .5em 1em -.125em rgba(10,10,10,.2),0 0 0 1px rgba(10,10,10,.04);
	transition: box-shadow 0.2s;
}

@media (prefers-color-scheme: dark) {
	.card:hover {
		box-shadow: 0 .5em 1em -.125em rgba(90,90,90,.2),0 0 0 1px rgba(90,90,90,.04);
	}
}

.step-content {
	text-align: justify;
}

/* Popover card/notification used to display additional informations */
/* To show where the recipe is linked to */
#linkedRecipe-infos {
	/* On mobile */
	width: 87.5%;
	/* Else where */
	visibility: hidden;
	position: fixed;
	z-index: 1;
}

#linkedRecipe-icon:hover + #linkedRecipe-infos, #linkedRecipe-infos:hover {
	visibility: visible;
	box-shadow: 0 .5em 1em -.125em rgba(10,10,10,.2),0 0 0 1px rgba(10,10,10,.04);
	transition: box-shadow .2s;
}

/* To show an extract of the linked recipe */
.recipeLinked-infos {
	/* On mobile */
	width: 90%;
	/* Else where */
	visibility: hidden;
	position: absolute;
	z-index: 1;
}

.recipeLinked-trigger:hover + .recipeLinked-infos, .recipeLinked-infos:hover {
	visibility: visible;
	box-shadow: 0 .5em 1em -.125em rgba(10,10,10,.2),0 0 0 1px rgba(10,10,10,.04);
	transition: box-shadow .2s;
}