add logo tooltip

src/components/Header.tsx

@@ -6,6 +6,7 @@ function Logo() {
 		<div className="logo">
 			<p>Janis</p>
 			<p>Meister</p>
+			<p className="tooltip">"DerTyp7"</p>
 		</div>
 	);
 }

src/styles/Header.scss

@@ -8,15 +8,46 @@
 
 	.logo {
 		flex: 0.5;
+		cursor: text;
 
 		p {
 			font-size: 2rem;
 			line-height: 0.8;
+
+			&:nth-child(2) {
+				padding-left: 20px;
+				font-weight: bold;
+			}
+
+			&.tooltip {
+				display: none;
+				background-color: var(--color-accent);
+				color: #000;
+				animation: moveFromTop 0.05s ease-in-out;
+				font-size: 1.5rem;
+			}
 		}
 
-		p:nth-child(2) {
-			padding-left: 20px;
-			font-weight: bold;
+		&:hover {
+			.tooltip {
+				display: block;
+				position: absolute;
+				margin-top: 10px;
+				padding: 10px;
+				border-radius: 5px;
+				box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+				z-index: 1;
+				font-weight: bold;
+			}
+		}
+
+		@keyframes moveFromTop {
+			0% {
+				transform: translateY(-30px);
+			}
+			100% {
+				transform: translateY(-10px);
+			}
 		}
 	}