added details

styles/elements/cv.css

@@ -1,2 +1,33 @@
+
 #cv_infos {
+	margin: 10px 10px 30px 10px;
+}
+#cv_infos h1,
+#cv_infos h2,
+#cv_infos h3,
+#cv_infos h4,
+#cv_infos h5,
+#cv_infos h6 {
+	/*
+	place-self: center;
+	margin-left: var(--list-padding);
+	*/
+}
+#cv_infos details {
+	margin: 10px 0px;
+}
+#cv_infos summary {
+	/*
+	*/
+	margin-left: var(--list-padding);
+}
+#cv_infos summary + * {
+	margin-top: 10px;
+}
+
+details summary {
+	/*
+	list-style-type: none;
+	*/
+	list-style-position: outside;
 }

styles/elements/mouses.css

@@ -1,7 +1,7 @@
 
 .mouse {
 	position: relative;
-	margin: 20px 0px 0px 0px;
+	margin: 0px;
 }
 .frames_container {
 	display: grid;

styles/elements/test.css

@@ -0,0 +1,24 @@
+
+#test::after {
+	content: "              \a                 \a                \a              \a     \a         \a          \a          \a      \a         \a         \a    \a         \a        \a   \a       ";
+	white-space: pre-wrap;
+/*
+
+              
+                
+               
+             
+    
+        
+         
+         
+     
+        
+        
+   
+        
+       
+  
+      
+*/
+}

styles/elements/title.css

@@ -1,2 +1,8 @@
-#role_title {	
+
+#role_title #name {	
+	margin:30px 0px 40px 0px;
 }
+#role_title #title {	
+	margin:30px 0px 40px 0px;
+}
+

styles/reset.css

@@ -1,3 +1,29 @@
 body * {
 	margin: 0px;
 }
+input, button, textarea, select {
+	/* Remove built-in form typography styles */
+  font: inherit;
+}
+body {
+  -webkit-font-smoothing: antialiased;
+}
+img, picture, video, canvas, svg {
+  display: block;
+  max-width: 100%;
+}
+li, p, h1, h2, h3, h4, h5, h6 {
+	/* Avoid text overflows
+  overflow-wrap: break-word;
+	*/
+  overflow-wrap: anywhere;
+}
+
+/* style details elements */
+details summary { 
+	cursor: pointer;
+}
+details summary > * {
+	/* allow to put h1 or anything inside the summary without breaking the line */
+	display: inline;
+}

styles/style.css

@@ -5,6 +5,7 @@ html {
 	--small-space: 10px;
 	--medium-space: calc(var(--small-space) * 3);
 	--big-space: calc(var(--small-space) * 10);
+	--list-padding: 40px;
 }
 body {
 	overflow-x: hidden;
@@ -44,16 +45,16 @@ body {
 	display: grid;
 	grid:
     ' title    ' auto
+    ' banner_1 ' auto
+    ' mouse_1  ' auto
     ' banner_2 ' auto
     ' cv       ' auto
-    ' mouse_1  ' auto
     ' banner_3 ' auto
-    ' mouse_2  ' auto
     ' banner_4 ' auto
+    ' mouse_2  ' auto
     ' mouse_3  ' auto
     ' banner_5 ' auto
     ' mouse_4  ' auto
-    ' banner_1 ' auto
     ' infos    ' auto
 	  / 1fr      ;
 }

styles/text.css

@@ -19,6 +19,7 @@ ul {
 	*/
 	display: block;
 	list-style-type: "• ";
+	padding-left: var(--list-padding);
 }
 li {
 	display: list-item;
@@ -29,9 +30,12 @@ li::marker {
 a::after {
 	content: attr(href);
 }
-h1 {
-	margin: 30px 0px;
-}
+h1 { margin: 30px 0px; font-size: 2.25rem; }
+h2 { margin: 30px 0px; font-size: 2.0rem; }
+h3 { margin: 20px 0px; font-size: 1.75rem; }
+h4 { margin: 20px 0px; font-size: 1.5rem; }
+h5 { margin: 10px 0px; font-size: 1.25rem; }
+h6 { margin: 10px 0px; font-size: 1.0rem; }
 pre {
 	line-height: 0.8;
 	font-size: min(2.2vw, 1.0rem);