diff --git a/styles/banners.css b/styles/elements/banners.css
similarity index 65%
rename from styles/banners.css
rename to styles/elements/banners.css
index 773e75a..5df6477 100644
--- a/styles/banners.css
+++ b/styles/elements/banners.css
@@ -1,28 +1,7 @@
 
-div.banner {
-	flex-wrap: wrap;
-	overflow: hidden;
-	width: 99vw;
-	margin: 10px 0px;
-}
-div.smallbanner {
-	height: 3.5ex;
-}
-div.bigbanner {
-	height: 21.5ex;
-}
-div.banner * {
-	margin: 0px;
-}
-div.banner p {
-	white-space: pre;
-}
-div.banner br {
-	display: block;
-}
 pre.banner {
 	position: relative;
-	margin-left: -100px;
+	margin: 10px 0px 10px -100px;
 	animation-name: slide;
 	animation-iteration-count: infinite;
 	animation-duration: 2s;
diff --git a/styles/elements/cv.css b/styles/elements/cv.css
new file mode 100644
index 0000000..d80daca
--- /dev/null
+++ b/styles/elements/cv.css
@@ -0,0 +1,2 @@
+#cv_infos {
+}
diff --git a/styles/elements/infos.css b/styles/elements/infos.css
new file mode 100644
index 0000000..b12c3ca
--- /dev/null
+++ b/styles/elements/infos.css
@@ -0,0 +1,3 @@
+
+#personnal_infos {
+}
diff --git a/styles/elements/mouses.css b/styles/elements/mouses.css
new file mode 100644
index 0000000..8bd98ae
--- /dev/null
+++ b/styles/elements/mouses.css
@@ -0,0 +1,46 @@
+
+.frames_container {
+	display: grid;
+	width: fit-content;
+	margin-left: 0px;
+
+	/*
+	border: 1px solid blue;
+	*/
+}
+pre.frame.hide {
+	display: none;
+}
+pre.frame {
+	position: relative;
+	grid-column: 1;
+	grid-row: 1;
+	margin: auto auto 0px 0px;
+
+	/*
+	width: fit-content;
+	height: fit-content;
+
+	border: 1px solid red;
+	*/
+
+	opacity: 0;
+	--tframes: 2s;
+	animation-name: ascii_frame;
+	animation-iteration-count: infinite;
+	animation-duration: var(--tframes);
+	animation-timing-function: linear;
+	animation-direction: normal;
+}
+
+pre.frame.f2  {animation-delay: calc(var(--tframes) * 25/100);}
+pre.frame.f3  {animation-delay: calc(var(--tframes) * 50/100);}
+pre.frame.f4  {animation-delay: calc(var(--tframes) * 75/100);}
+
+@keyframes ascii_frame {
+	0%    {opacity: 1;}
+	25%   {opacity: 1;}
+	25.1% {opacity: 0;}
+	100%  {opacity: 0;}
+}
+
diff --git a/styles/elements/title.css b/styles/elements/title.css
new file mode 100644
index 0000000..87d096f
--- /dev/null
+++ b/styles/elements/title.css
@@ -0,0 +1,2 @@
+#role_title {	
+}
diff --git a/styles/frames.css b/styles/frames.css
index 8bd98ae..139597f 100644
--- a/styles/frames.css
+++ b/styles/frames.css
@@ -1,46 +1,2 @@
 
-.frames_container {
-	display: grid;
-	width: fit-content;
-	margin-left: 0px;
-
-	/*
-	border: 1px solid blue;
-	*/
-}
-pre.frame.hide {
-	display: none;
-}
-pre.frame {
-	position: relative;
-	grid-column: 1;
-	grid-row: 1;
-	margin: auto auto 0px 0px;
-
-	/*
-	width: fit-content;
-	height: fit-content;
-
-	border: 1px solid red;
-	*/
-
-	opacity: 0;
-	--tframes: 2s;
-	animation-name: ascii_frame;
-	animation-iteration-count: infinite;
-	animation-duration: var(--tframes);
-	animation-timing-function: linear;
-	animation-direction: normal;
-}
-
-pre.frame.f2  {animation-delay: calc(var(--tframes) * 25/100);}
-pre.frame.f3  {animation-delay: calc(var(--tframes) * 50/100);}
-pre.frame.f4  {animation-delay: calc(var(--tframes) * 75/100);}
-
-@keyframes ascii_frame {
-	0%    {opacity: 1;}
-	25%   {opacity: 1;}
-	25.1% {opacity: 0;}
-	100%  {opacity: 0;}
-}
 
diff --git a/styles/global.css b/styles/global.css
index 6c7426f..cf6c733 100644
--- a/styles/global.css
+++ b/styles/global.css
@@ -1,75 +1,69 @@
 
-.left {
-	display: flex;
-	margin-left: 0px;
-}
-
-
 /*
- [-] horizontal  [/] content  [/] left    [/]-pack    [ ]-fit
- [-] vertical    [/]-parent   [/] right   [/] grow    [ ] stretch
-                              [/] top     [/] space
-                              [/] bottom  [/] spread
-                              [/]-center
+ DATA-FLEX
+
+ direction       width        position    main axis   cross axis
+
+ [/]-horizontal  [/]-parent   [/]-center  [/]-pack    [/]-fit
+ [/] vertical    [/] content  [/] left    [/]-wrap    [/] stretch
+                              [/] right   [/] nowrap
+                              [/] top     [/] grow
+                              [/] bottom  [/] space
+                                          [/] spread
+                                          [/] gap
+ -> for GAP, you can custom the value with 'style="--gap:?px;"'
 */
-
-.horizontal, .vertical { display: flex; justify-content: center; align-items: center; width: auto; }
-.horizontal { flex-direction: row; }
-.vertical   { flex-direction: column; }
-.horizontal > *, .vertical > * { margin: 0px; flex-grow: 0; }
-
-.width-parent  { width: auto; }
-.width-content { width: fit-content; }
-
-.horizontal.child-left   { justify-content: flex-start; }
-.horizontal.child-center { }
-.horizontal.child-right  { justify-content: flex-end; }
-.horizontal.child-top    { align-items: flex-start; }
-.horizontal.child-bottom { align-items: flex-end; }
-.vertical.child-left   { align-items: flex-start; }
-.vertical.child-center { align-items: center; }
-.vertical.child-right  { align-items: flex-end; }
-.vertical.child-top    { justify-content: flex-start; }
-.vertical.child-bottom { justify-content: flex-end; }
-
-.horizontal.child-pack > * { flex-grow: 0; }
-.horizontal.child-space    { justify-content: space-around; }
-.horizontal.child-spread   { justify-content: space-between; }
-.horizontal.child-grow > * { flex-grow: 1; }
-.vertical.child-pack > * { flex-grow: 0; }
-.vertical.child-space    { justify-content: space-around; }
-.vertical.child-spread   { justify-content: space-between; }
-.vertical.child-grow > * { flex-grow: 1; }
-
-.horizontal.child-fit,     .vertical.child-fit     { }
-.horizontal.child-stretch, .vertical.child-stretch { align-items: stretch; }
-
-
-.horizontal {
+[data-flex] {
 	display: flex;
-	flex-direction: row;
+	justify-content: center;
+	align-items: center;
+	width: auto;
+	flex-wrap: nowrap;
 }
-.vertical {
-	display: flex;
-	flex-direction: column;
-}
-.wrap {
-	display: flex;
-	flex-wrap: wrap;
+[data-flex] > * {
+	flex-grow: 0;
 }
+/*
+ direction :		-horizontal- vertical
+*/
+[data-flex~="horizontal"] { flex-direction: row; }
+[data-flex~="vertical"]   { flex-direction: column; }
+/*
+ width :		-parent- content
+*/
+[data-flex~="parent"]  { width: auto; }
+[data-flex~="content"] { width: fit-content; }
+/*
+ position :		-center- left right top bottom
+*/
+[data-flex~="horizontal"][data-flex~="left"]   { justify-content: flex-start; }
+[data-flex~="horizontal"][data-flex~="right"]  { justify-content: flex-end; }
+[data-flex~="horizontal"][data-flex~="top"]    { align-items: flex-start; }
+[data-flex~="horizontal"][data-flex~="bottom"] { align-items: flex-end; }
+[data-flex~="horizontal"][data-flex~="center"] { }
+[data-flex~="vertical"][data-flex~="left"]   { align-items: flex-start; }
+[data-flex~="vertical"][data-flex~="right"]  { align-items: flex-end; }
+[data-flex~="vertical"][data-flex~="top"]    { justify-content: flex-start; }
+[data-flex~="vertical"][data-flex~="bottom"] { justify-content: flex-end; }
+[data-flex~="vertical"][data-flex~="center"] { align-items: center; }
+/*
+ main axis :		-pack- space spread grow wrap gap
+*/
+[data-flex~="horizontal"][data-flex~="pack"] > * { flex-grow: 0; }
+[data-flex~="horizontal"][data-flex~="space"]    { justify-content: space-around; }
+[data-flex~="horizontal"][data-flex~="spread"]   { justify-content: space-between; }
+[data-flex~="horizontal"][data-flex~="grow"] > * { flex-grow: 1; }
+[data-flex~="vertical"][data-flex~="pack"] > * { flex-grow: 0; }
+[data-flex~="vertical"][data-flex~="space"]    { justify-content: space-around; }
+[data-flex~="vertical"][data-flex~="spread"]   { justify-content: space-between; }
+[data-flex~="vertical"][data-flex~="grow"] > * { flex-grow: 1; }
+[data-flex~="wrap"] { flex-wrap: wrap; }
+/*
+ cross axis :		-fit- stretch
+*/
+[data-flex~="horizontal"][data-flex~="fit"],
+	[data-flex~="vertical"][data-flex~="fit"]      { }
+[data-flex~="horizontal"][data-flex~="stretch"],
+	[data-flex~="vertical"][data-flex~="stretch"]  { align-items: stretch; }
 
-[class*="gap"] { display: flex; gap: 10px; }
-.gap-small  { gap: var(--small-space); }
-.gap-medium { gap: var(--medium-space); }
-.gap-big    { gap: var(--big-space); }
-
-[class*="margin"] { margin: 0px; --margin-size: var(--small-space); }
-.margin-small  { --margin-size: var(--small-space); }
-.margin-medium { --margin-size: var(--medium-space); }
-.margin-big    { --margin-size: var(--big-space); }
-.margin { margin:   var(--margin-size); }
-.margin-left   { margin-left:   var(--margin-size); }
-.margin-right  { margin-right:  var(--margin-size); }
-.margin-top    { margin-top:    var(--margin-size); }
-.margin-bottom { margin-bottom: var(--margin-size); }
 
diff --git a/styles/reset.css b/styles/reset.css
new file mode 100644
index 0000000..309ea35
--- /dev/null
+++ b/styles/reset.css
@@ -0,0 +1,3 @@
+body * {
+	margin: 0px;
+}
diff --git a/styles/style.css b/styles/style.css
index 9450bdb..1afaae9 100644
--- a/styles/style.css
+++ b/styles/style.css
@@ -7,8 +7,6 @@ html {
 	--big-space: calc(var(--small-space) * 10);
 }
 body {
-	/*
-	*/
 	overflow-x: hidden;
 }
 script, style {
@@ -17,3 +15,41 @@ script, style {
 pre {
 	margin: 10px 0px;
 }
+
+
+/*
+	grid
+*/
+
+#personnal_infos { grid-area: infos;   }
+#role_title      { grid-area: title;   }
+#cv_infos        { grid-area: cv;      }
+#mouse_1         { grid-area: mouse_1; }
+#mouse_2         { grid-area: mouse_2; }
+#mouse_3         { grid-area: mouse_3; }
+#mouse_4         { grid-area: mouse_4; }
+#banner_1        { grid-area: banner_1;}
+#banner_2        { grid-area: banner_2;}
+#banner_3        { grid-area: banner_3;}
+#banner_4        { grid-area: banner_4;}
+#banner_5        { grid-area: banner_5;}
+
+body {
+	/*
+	*/
+	display: grid;
+	grid:
+    ' title    ' 1fr
+    ' cv       ' 1fr
+    ' mouse_1  ' 1fr
+    ' mouse_2  ' 1fr
+    ' mouse_3  ' 1fr
+    ' mouse_4  ' 1fr
+    ' banner_1 ' 1fr
+    ' banner_2 ' 1fr
+    ' banner_3 ' 1fr
+    ' banner_4 ' 1fr
+    ' banner_5 ' 1fr
+    ' infos    ' 1fr
+	  / 100%     ;
+}
diff --git a/styles/text.css b/styles/text.css
index f3ab2c3..a7c6c25 100644
--- a/styles/text.css
+++ b/styles/text.css
@@ -1,3 +1,4 @@
+
 @font-face {
 	font-family: "notomono";
 	src:
@@ -25,3 +26,9 @@ li {
 li::marker {
 	font-size: 1.2rem;
 }
+a::after {
+	content: attr(href);
+}
+h1 {
+	margin: 30px 0px;
+}