notLinkTst, fixed fadeout notlink anim

style.css

@@ -60,7 +60,7 @@
 .contentPush{
 	height: 65px;
 }
-.notLink {
+.ntLnk {
 	position: fixed;
 	top: 47.5px;
 	width: 100%;
@@ -90,6 +90,7 @@
 		display: block;
 		text-decoration: none;
 		font-size: 20px;
+		color: #222;
 		padding: 9.2px 12px;
 	}
 	.barItem h1 {
@@ -118,8 +119,20 @@
 	}
 	html:has(.barItem a:hover) . {}
 	/* not Link toast*/
-		#notLinkToast {
-			visibility: hidden;
+.tool {
+	text-decoration: none;
+	position: relative;
+}
+.tip * {
+	display: none;
+}
+.tip:hover * {
+	display: block;
+	position: fixed;
+	overflow: hidden;
+}
+		#ntLnkToast {
+			display: none;
 			min-width: 250px;
 			margin-left: -125px;
 			background-color: rgba(255, 255, 255, 0.25);
@@ -136,23 +149,18 @@
 			backdrop-filter: blur(2.5px);
 
 		}
-		#notLinkToast.show {
-			visibility: visible;
-			-webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s forwards;
-			animation: fadein 0.5s, fadeout 0.5s 2.5s forwards;
+		#ntLnkToast.show {
+			display: block;
+			animation-name: fadein;
+			animation-duration: 0.5s;
+			animation-name: fadeout;
+			animation-delay: 2.6s;
+			animation-duration: 0.5s;
 		}
-			@-webkit-keyframes fadein {
-				from {top: 0; opacity: 0;} 
-				to {top: 45px; opacity: 1;}
-			}
 			@keyframes fadein {
 				from {top: 0; opacity: 0;}
 				to {top: 45px; opacity: 1;}
 			}
-			@-webkit-keyframes fadeout {
-				from {top: 45px; opacity: 1;} 
-				to {top: 0; opacity: 0;}
-			}
 			@keyframes fadeout {
 				from {top: 45px; opacity: 1;}
 				to {top: 0; opacity: 0;}
@@ -171,7 +179,9 @@
 	.bar {
 		background-color: rgba(0, 0, 0, 0.25);
 	}
-
+	.barItem * {
+		color: #ddd;
+	}
 	.barItem h1 {
 		border-color: #ddd;
 	}
@@ -186,7 +196,7 @@
 		-moz-box-shadow: 0px 0px 5px 5px rgba(255, 255, 255, 0.25);
 		box-shadow: 0px 0px 5px 5px rgba(255, 255, 255, 0.25);
 	}
-	#notLinkToast {
+	#ntLnkToast {
 		background-color: rgba(0, 0, 0, 0.25);
 	}
 }