@import url('https://fonts.googleapis.com/css2?family=Pangolin&display=swap');

body {
	background-image: url(imgs/bg.jpg);
	line-height: 1.2;
	font-family: trebuchet MS, sans-serif;
	padding: 20px;
	overflow-y: scroll
}

h1, h2, h3 {
	font-family: pangolin;
}

h1 {
		font-size: 300%
}

a {
	color: #6B82B6;
}
a:visited {
	color: #6551A7;
}
a:hover {
	color: #92B7D1;
}

.pied-lien {
	color: #515ca6;
}
.pied-lien:visited {
	color: #5c3e94;
}
.pied-lien:hover {
	color: #8659c2;
}

table {
		text-align: center;
		margin-left: auto;
		margin-right: auto;
}		

td, th {
		padding: 10px;
}

table, th, td {
	border: 1px solid;
	border-collapse: collapse;
}

ul {
	list-style: none;
}

.pronoms {
		border-style: hidden;
		line-height: 0.5;
}

.gribouillage {
	display: block;
	margin-left: auto;
	max-width: 30%;
}

.jaune {
	background-color: yellow;
}

.bleu {
	background-color: #93d7ed;
}

.rose {
	background-color: pink;
}

.rouge {
	background-color: #ff5a54;
}

.vert {
	background-color: #66d988;
}

.contenu {
		display: block;
		max-width: 50%;
		margin-left: auto;
		margin-right: auto;
		padding: 30px;
		background-image: url(imgs/carte.jpg);
		top: 0;
}

.pied {
		display: block;
		max-width: 50%;
		margin-left: auto;
		margin-right: auto;
		padding: 30px;
		text-align: center;
}

.conteneur {
		display: flex;
		flex-flow: row wrap;
		justify-content: space-evenly;
		text-align: center;
}

.conteneur div {
		width: 25%;
		min-width: 20%;
		padding: 10px;
}

.nav {
		display: block;
		position: fixed;
		justify-content: left;
		max-width: 20%;
		padding: 20px;
		background-image: url(imgs/carte.jpg);
		top: 5;
}