:root {
	--ff-body: Roboto, Arial, sans-serif;
	--ff-heading: "Elsie", serif;
	--fs-xl: clamp(3.3rem, 8vw + 1rem, 5rem);
	--fs-700: 2.125rem;
	--fs-600: 1.5rem;
	--fs-500: 1.25rem;
	--fs-400: 1rem;
	--color-link: #b03530;
	--color-hover: #cc0000;
}
a:active {color: var(--color-link)}
a:visited {color: var(--color-link)}
a:link {color: var(--color-link)}
a:hover {color: var(--color-hover)}
a {text-decoration: none;}

*,
*::before,
*::after {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
body{
  margin: 10px;
  font-family: var(--ff-body);
  font-size: var(--fs-400);
}
.header {
	grid-area: header; 
	align-content: end;
	}
.right {
	grid-area: right;
	align-content: end;
	}
.menu { grid-area: menu; }
.main { grid-area: main; }
.footer { 
	grid-area: footer;
	}
.grid_container{
	display: grid;
	gap: 5px;
	grid-template-columns: 1fr;
	grid-template-rows:  auto;
	grid-template-areas:
	'header'
	'right'
	'menu'
	'main'
	'footer';
	border: 0px solid red;
}
.grid_container > div{
	border: 0px solid blue;
}
.titre{
	transform: translateY(1rem); /* Adjust the value as needed */
	font-family: var(--ff-heading);
	font-size: var(--fs-xl);
}
h1{
	font-size: var(--fs-700);
}
ul, ol {
	padding: 0 0 0 1.25em; 
	margin: 0 0 0 0; 	
}
.button {
	background-color: var(--color-link);
	border-radius: 4px;
	border: none;
	color: white;
	padding: 5px 5px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 13px;
	margin: 4px 2px;
	transition-duration: 0.4s;
	cursor: pointer;
}
.button:hover {
	background-color: var(--color-hover);
	color: white;
}
/* RECETTE */
.div_recette{
	max-width: 100vw;
	border: 0px solid red;
}
.image_recette{
	height: 300px;
	max-width: 95vw;
	object-fit: cover;
}
@media only screen and (min-width: 700px) {
	.grid_container{
		display: grid;
		gap: 10px;
		grid-template-columns: auto 1fr;
		grid-template-rows:  auto 1fr 40px;
		grid-template-areas:
		'header header right'
		'menu main main'
		'footer footer footer';
		width: 98vw;
		height: 97vh;
		border: 0px solid red;
	}		
	/* RECETTE */
	.div_recette{
		max-width: clamp(700px, 70vw, 80vw); 
	}
	.image_recette{
		height: 400px;
		max-width: 900px;
		object-fit: cover;
	}

}