css is now in old form

styles/elements/cv.css

@@ -6,30 +6,32 @@
 .cv {
 	display: flex;
 	text-align: left;
-	summary {
+}
+.cv summary {
 	position: relative;
 	list-style-position: outside;
 	list-style-type: "▸ ";
 	font-size: 1.8rem;
 	margin: auto;
 	width: fit-content;
-		.open {
+}
+.cv summary .open {
 	display: none;
 }
-		.close {
+.cv summary .close {
 	display: inline;
 }
-	}
+
-	&[open] summary {
+.cv[open] summary {
 	list-style-type: "▾ ";
-		.open {
+}
+.cv[open] summary .open {
 	display: inline;
 }
-		.close {
+.cv[open] summary .close {
 	display: none;
 }
-	}
+
-	> *:last-child {
+.cv > *:last-child {
 	margin-bottom: 100px;
 }
-}

styles/elements/hero.css

@@ -9,13 +9,13 @@
 	grid-template-rows: 1fr auto 1fr;
 	*/
 	grid-template-rows: auto auto 1fr;
-	.subtitle {
+}
+#hero .subtitle {
 	text-align: center;
 }
-	.cv {
+#hero .cv {
-		#cv_download {
+}
+#hero .cv #cv_download {
 	margin-top: 20px;
 	text-align: center;
 }
-	}
-}

styles/elements/infos.css

@@ -1,4 +1,3 @@
-
 #infos article {
 	display: flex;
 	flex-direction: column;

styles/elements/mouses.css

@@ -7,22 +7,21 @@
 	margin: auto;
 	width: fit-content;
 	overflow: hidden;
-
+}
-	.frames {
+.mouse .frames {
 	position: relative;
 	animation: mouse_move infinite 2s normal steps(4);
-		&::before {
+}
+.mouse .frames::before {
 	position: relative;
 	top: 0px;
 	left: 0px;
 }
-		&::after {
+.mouse .frames::after {
 	position: absolute;
 	top: 100%;
 	left: 0px;
 }
-	}
-}
 
 /*
 * using 'transform' instead of 'top', because 'top' needs

styles/elements/projects.css

@@ -2,20 +2,21 @@
 	header {
 		height: 300px;
 	}
-	.projects_grid {
+}
+#projects .projects_grid {
 	display: grid;
 	grid-template-columns: repeat(auto-fit, minmax(200px, auto));
 	grid-template-columns: repeat(2, minmax(100px, auto));
 	grid-template-columns: repeat(2, minmax(100px, 500px));
 	grid-gap: 20px;
-		figure {
+}
-			figcaption {
+#projects .projects_grid figure {
+}
+#projects .projects_grid figure figcaption {
 	text-align: left;
 	margin-bottom: 100px;
 }
-		}
+
-	}
+#projects .mouse {
-	.mouse {
 	margin-top: 100px;
 }
-}

styles/sections.css

@@ -9,31 +9,30 @@ section {
 	min-height: 100vh;
 	justify-items: center;
 	text-align: center;
-
+}
-	header {
+section header {
 	display: flex;
 	flex-direction: column;
 	place-content: center;
-
+}
-		h1 {
+section header h1 {
 	display: flex;
 	flex-direction: row;
 	flex-wrap: wrap;
 	justify-content: center;
 }
-	}
+
-	article {
+section article {
 	text-align: left;
 }
 
-	> * {
+section > * {
 	grid-column: 2 / span 1;
 }
-	> .grid_full_width {
+section > .grid_full_width {
 	grid-column: 1 / span 3;
 }
 
-	.banner {
+section .banner {
 	overflow-x: hidden;
 }
-}