:root {
		--main-color-rgb: 70, 80, 70;
		--main-color: rgba(var(--main-color-rgb));
	}
	
	body, html {
		font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
		
		color: var(--main-color);
	}
	
	header {
		display:flex;
		align-items: center;
		justify-content:flex-start;
	}
	header img {
		width: 10vw;
		min-width:80px;
		height:auto;
		order:-10;
		margin-right:1rem;
		
	}
	
	body {
		max-width: 60rem;
		margin: 0 auto;
		padding: 2rem 6vw;
	}
	
	h1 {
		font-size:24px;
	}
	
	h1 span,
	h2 span,
	h3 span,
	h4 span,
	th span {
		font-size:64%;
		display:block;
	}
	
	section {
		margin-bottom:4em;
	}
	
	@counter-style books {
	  system: cyclic;
	  symbols: "\1F4D5", "\1F4D7", "\1F4D8", "\1F4D9";
	  suffix: "  ";
	}
	
	[lang="en-CA"] {
		font-style:italic;
		font-size:95%;
	}
	
	section > h2:before {
		position: absolute;
		transform:translateX(-150%);
		right:0;
	}
	
	.semences h2:before {
		content:"🌿";
	}
	
	.outils h2:before {
		content:"⚒️";
	}
	
	.livres h2:before {
		content:"📚";
	}
	
	.revues h2:before {
		content:"📚";
	}
	
	.youtube h2:before {
		content:"📺";
	}
	
	th {
		text-align: left;
		display:none;
	}
	
	td {
		padding: 0.25em 2em 0.25em 0;
		vertical-align: top;
		display:block;
	}
	td span.lang {
		display:block;
		font-size:85%;
		font-style: italic;
	}
	
	

	
	ul {
		margin:0;
		padding:0;
		list-style-type: books;
	}
	
	li {
		margin:0.75em 0;
		line-height:1.2em;
		
	}
	
	
	
	.intro {
		font-style:italic;
		font-size:0.82rem;
	}
	
	img {
		max-width: 80vw;
		height:auto;
	}
	
	hr {
		padding: 0;
		border: none;
		height:1px;
		background-image: linear-gradient(to right, rgba(var(--main-color-rgb), 0), rgba(var(--main-color-rgb), 0.75), rgba(var(--main-color-rgb), 0));
		color: var(--main-color);
		text-align: center;
		
		margin: 3em 0;
	}
	hr:after {
		content: "🌱";
		display: inline-block;
		position: relative;
		top: -0.7em;
		font-size: 1.5em;
		padding: 0 0.25em;
		background: white;
	}
	
	.return-home {
		text-align: center;
	}
	
	@media screen and (min-width:600px) {
		header {
			justify-content:space-between;
		}
		header img {
			order:1;
			margin-bottom:2rem;
			margin-right:0;
		}
		
		header h1 {
			font-size:1.64rem;
		}
		
		section > h2:before {
			right:auto;
		}
		
		table {
			border:0 none;
			border-collapse: collapse;
			
		}
		th, td {
			display:table-cell;
			width: 30%;
			max-width: 300px;
			border:0 none;
			border-bottom: 1px solid var(--main-color);
		}
		
		tr:hover {
			background-color: antiquewhite;
		}
		
		
	}