style.css: use "rem" instead fo "px"

style.css

@@ -28,49 +28,28 @@
 }
 
 * {
-	padding: 0px;
-	margin: 0px;
-
 	scrollbar-color: var(--foreground-color) var(--background-color);
 }
 
 body {
 	font-family: system-ui, sans-serif;
-	font-size: 30px;
+	font-size: 1rem;
-	line-height: 42px;
+	line-height: 1.5em;
-	margin: 20px;
+	margin: 1rem;
+	padding: 0;
 
 	background-color: var(--background-color);
 	color: var(--foreground-color);
 }
-@media (max-width: 420px) {
-	body {
-		font-size: 26px;
-		line-height: 38px;
-	}
-}
 
 main {
-	margin-left: 20%;
+	max-width: 40rem;
-	margin-right: 20%;
+	margin-left: auto;
-}
+	margin-right: auto;
-@media (max-width: 1400px) {
-	main {
-		margin-left: 10%;
-		margin-right: 10%;
-	}
-}
-@media (max-width: 800px) {
-	main {
-		margin-left: 0px;
-		margin-right: 0px;
-		padding-left: 0px;
-		padding-right: 0px;
-	}
 }
 
-a, a:visited {
+a, a:visited, a[title], a[title]:visited {
-	text-decoration: underline;
+	text-decoration: solid underline;
 	transition-property: color, border-color;
 	transition-duration: 0.05s;
 	transition-timing-function: linear;
@@ -135,30 +114,62 @@ pre, code, var, samp {
 	word-break: break-all;
 }
 
-abbr[title] {
-	text-decoration: dotted underline;
-}
-
 address {
 	font-style: normal;
 }
 
 ul {
-	padding-left: 35px;
+	padding-left: 1.5rem;
+}
+ol {
+	padding-left: 2rem;
 }
 
+dl {
+	margin: 0;
+}
 dt {
-	font-weight: 500;
+	padding-top: 0.8rem;
+	font-size: 1.2rem;
+}
+dd {
+	margin-left: 0.6rem;
+	padding-left: 1.2rem;
+	position: relative;
+}
+dd::before {
+	content: '↳';
+	top: 0;
+	left: 0;
+	position: absolute;
 }
 
-dd {
+blockquote {
-	margin-left: 25px;
+	position: relative;
-	padding-bottom: 10px;
+	margin: 0;
+	padding-left: 1.5rem;
+	padding-right: 1.5rem;
+	font-style: italic;
+}
+blockquote::before, blockquote::after {
+	position: absolute;
+	font-size: 1.3rem;
+}
+blockquote::before {
+	content: '«';
+	top: 0;
+	left: 0;
+}
+blockquote::after {
+	content: '»';
+	bottom: 0;
+	right: 0;
 }
 
 p {
-	padding-top: 8px;
+	margin: 0;
-	padding-bottom: 8px;
+	margin-top: 0.5rem;
+	margin-bottom: 0.5rem;
 }
 
 header, footer, .centered {
@@ -171,18 +182,49 @@ footer {
 	flex-direction: column;
 }
 
+[title] {
+	text-decoration: dotted underline;
+}
+
+[hreflang=en]::after {
+	content: ' (en)';
+}
+[hreflang=fr]::after {
+	content: ' (fr)';
+}
+
+[hreflang]::after {
+	font-size: 0.8rem;
+}
+
+.level2, .level3 {
+	margin-top: 1.2rem;
+}
+.level2 {
+	border-left: 0.16rem solid var(--foreground-color);
+	padding-left: 1rem;
+}
+.level3 {
+	border-left: 0.16rem solid var(--foreground-color);
+	padding-left: 1rem;
+}
+
+:target {
+	border: 0.16rem solid var(--foreground-color);
+}
+
 /* ----- TITLES ----- */
 
 h1, h2, h3, h4, h5, h6 {
 	font-weight: normal;
 	line-height: 100%;
+	margin-top: 1rem;
+	margin-bottom: 0.5rem;
 }
 
 h1 {
-	font-size: 70px;
+	font-size: 2.6rem;
 	text-align: center;
-	padding-top: 15px;
-	margin-bottom: 20px;
 }
 @media (max-width: 420px) {
 	h1 {
@@ -191,9 +233,7 @@ h1 {
 }
 
 h2 {
-	font-size: 60px;
+	font-size: 2.2rem;
-	margin-top: 30px;
-	margin-bottom: 15px;
 }
 @media (max-width: 420px) {
 	h2 {
@@ -202,9 +242,7 @@ h2 {
 }
 
 h3 {
-	font-size: 42px;
+	font-size: 1.5rem;
-	margin-top: 30px;
-	margin-bottom: 15px;
 }
 @media (max-width: 420px) {
 	h3 {