html {
	backgroun-color: black; 
	font-size: 2.5vh; /* Sets the root font size */
	color: white;
	}

Body {background-color: black;}
Main {background-color: black;}

hr {
	color: white;
	margin: 2px;
	}

h2, h3 {
	margin: 0;	
/*	text-transform: lowercase; */
	font-weight: normal;
	color: white;
	}

h1 {
	font-size: 2.5rem; /* 2.5 * 2 = 5vh */
	letter-spacing: -1px;
	color: white;
	}

h2 {
	font-size: 2rem; /* 2 * 2 = 4vh */
	color: white;
	}

h3 {
	font-size: 1.5rem; /* 1.5 * 2 = 30vh */
	color: white;
	}

li {
	color: white;
	}	

p, ul, ol {
	margin: 0 0 1em 0; 	
	font-size: 1rem; /* 1 * 2 = 2vh */
	color: white;
/*	text-align: justify;	
	line-height: 25px;  */
	}

img {
	max-width: 50%;
	height: auto;
	}

<!-- Test de compréhention  - un autre type d'essai -->
	 
.grid-container-1 {
    display: grid;
	background-color: #1fe0; 
	}

.grid-container-1--fill {
    grid-template-columns: repeat(auto-fill, minmax(80vh, 1fr));
	}

<!--.grid-container--fit {
    grid-template-columns: repeat(auto-fit, minmax(80vh, 1fr));
	}
-->

.grid-element {
	padding: 20px;
	color: #fff;
	border: 1px #fff; <!-- Bordure des zones -->
	}
	
.grid-sub-element {
	display: inline-grid;
	padding: 10px;
/*	color: solid yellow; */
	border: 1px #fff; <!-- Bordure des zones -->
	}

.grid-sub-element:hover {
  background-color: grey;
	}	

.grid-container-2 {
    display: grid;
	background-color: #1fe0; 
	}

.grid-container-2--fill {
    grid-template-columns: 30% 60% auto;
	}

.grid-container--fit {
    grid-template-columns: repeat(auto-fit, minmax(80vh, 1fr));
	}

.grid-element-2 {
	padding: 20px;
	color: #ffffff; 
	border: 1px solid blue; <!-- Bordure des zones -->
	}

.grid-sub-elemnt-2 {
	display: inline-grid;
	padding: 10px;
	color: #fff; 
	border: 1px solid cyan; <!-- Bordure des zones -->
	}

.grid-sub-element-2:hover {
  background-color: #ff99cc;
	}