diff --git a/11ty-source/_layouts/blog-post.liquid b/11ty-source/_layouts/blog-post.liquid
index f3c25b1de..a7aaaada7 100644
--- a/11ty-source/_layouts/blog-post.liquid
+++ b/11ty-source/_layouts/blog-post.liquid
@@ -3,9 +3,9 @@ layout: default.liquid
 ---
 <!-- <%- @partial('header-menu.html.eco', {ablog:"class='active'"}) %> -->
 
-<div class="col-12">
-	<div>
-		<h1 class="title">
+<div class="col-md-9 mx-auto">
+	<div >
+		<h1 class="title text-center">
 			<a
 				class="icon-link icon-link-hover"
 				style="color:var(--bs-body-color)"
diff --git a/scss/style.scss b/scss/style.scss
index 59c303c35..09643e8b9 100644
--- a/scss/style.scss
+++ b/scss/style.scss
@@ -80,9 +80,25 @@ a.header-anchor::before {
 	animation-iteration-count: 3;
 }
 
+@keyframes fadeIn {
+	0% {
+		opacity: 0%;
+	}
+	100% {
+		opacity: 100%;
+	}
+}
+
 .icon-link-hover:active > i::after {
+	display: inline-block;
+	position: absolute;
+	width: auto;
+	font-size: medium;
+	top: 0.5em;
+	text-wrap: nowrap;
 	content: " link copied to clipboard";
-	opacity: 0.2;
+	opacity: 0.8;
+	animation: fadeIn 0.1s ease-out;
 }
 
 .icon-link-hover > i {