- wip new animation type

- nav is back to fixed to preserve the 100vh of first section

styles/elements/hero.css

@@ -1,12 +1,13 @@
 
 #hero {
 	grid-template-rows: 1fr auto auto;
-	height: 100vh;
+	min-height: 100vh;
 /*
 	grid-template-rows: 1fr 50px auto auto;
 */
 }
 #hero header {
+	padding-top: 50px;
 }
 #hero .mouse {
 }

styles/elements/mouses.css

@@ -5,6 +5,7 @@
 }
 .frames_container {
 	display: grid;
+	grid-template-rows: repeat(4, 1fr);
 	width: fit-content;
 	/*
 	border: 1px solid blue;
@@ -15,35 +16,50 @@ pre.frame.hide {
 }
 pre.frame {
 	position: relative;
+	margin: auto auto 0px 0px;
+	/*
 	grid-column: 1;
 	grid-row: 1;
-	margin: auto auto 0px 0px;
 
-	/*
 	width: fit-content;
 	height: fit-content;
 
 	border: 1px solid red;
-	*/
 
 	opacity: 0;
+	visibility: hidden;
+	*/
+
+	display: grid;
 	--tframes: 2s;
 	animation-name: ascii_frame;
 	animation-iteration-count: infinite;
 	animation-duration: var(--tframes);
-	animation-timing-function: linear;
+	animation-timing-function: steps(3);
 	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;}
+
+	from {opacity: 1;}
+	to   {opacity: 0;}
+
+	from {visibility: visible;}
+	to   {visibility: hidden;}
+*/
+	from {display: grid;}
+	to   {display: none;}
 }
 
 #mouse_1 {

styles/elements/nav.css

@@ -3,7 +3,7 @@ nav {
 	display: flex;
 	flex-direction: row;
 	justify-content: center;
-	position: sticky;
+	position: fixed;
 	top: 0;
 	background-color: #f6f6f6;
 	z-index: 1;