make nthmail a link and addr copiable

pkg/web_server/header.templ

@@ -2,12 +2,12 @@ package web_server
 
 templ header(rcpt_addr string) {
 	<div class="header">
-		<h3>
+		<a href="/">
 			nthmail.xyz
-		</h3>
+		</a>
 		<div class="header-addr">
 			<p>inbox: </p>
-			<span>{ rcpt_addr }</span>
+			<button tooltip="Copied" id="mail-addr" onclick="navigator.clipboard.writeText(document.getElementById('mail-addr').innerText)">{ rcpt_addr }</button>
 		</div>
 	</div>
 }

pkg/web_server/styles.templ

@@ -106,20 +106,42 @@ templ styles() {
             font-family: monospace, "sans-serif";
         }
 
-        .header h3 {
+        .header a {
             font-weight: bold;    
+            font-size: 1.65rem;
+            text-decoration: none;
+            color: inherit;
         }
 
         .header .header-addr {
             display: flex;
             flex-direction: row;
+            padding-bottom: 4px;
+            position: relative;
         }
 
-        .header .header-addr span {
+        .header .header-addr button {
+            background: none;
+            color: inherit;
+            border: none;
+            font: inherit;
+            cursor: pointer;
+            outline: inherit;
+            user-select: text;
+
             margin-left: 18px;
             font-style: italic;
         }
 
+        *[tooltip]:focus:after {
+            content: attr(tooltip);
+            display:block;
+            position: absolute;
+            top: 130%;
+            left: 50%;
+            font-style: normal;
+        }
+
         /* FOOTER */
         footer {
             background-color: green;