diff --git a/header.svg b/header.svg
index 8ee6fdb..1210126 100644
--- a/header.svg
+++ b/header.svg
@@ -1,14 +1,19 @@
-<svg fill="none" viewBox="0 0 800 400" width="800" height="400" xmlns="http://www.w3.org/2000/svg">
+<svg fill="none" viewBox="0 0 300 300" width="300" height="300" xmlns="http://www.w3.org/2000/svg">
 	<foreignObject width="100%" height="100%">
 		<div xmlns="http://www.w3.org/1999/xhtml">
 			<style>
 				@keyframes rotate {
 					0% {
-						transform: rotate(3deg);
-					}
-					100% {
-						transform: rotate(-3deg);
+						transform: rotateY(0deg);
 					}
+					47% {transform: rotateY(180deg); }
+					48% {transform: rotateY(180deg); }
+					49% {transform: rotateY(180deg); }
+					50% {transform: rotateY(180deg); }
+					97% { transform: rotateY(360deg); }
+					98% { transform: rotateY(360deg); }
+					99% { transform: rotateY(360deg); }
+					100% { transform: rotateY(360deg); }
 				}
 
 				@keyframes gradientBackground {
@@ -52,38 +57,83 @@
 					justify-content: center;
 					margin: 0;
 					width: 100%;
-					height: 400px;
-					background: linear-gradient(-45deg, #fc5c7d, #6a82fb, #05dfd7);
-					background-size: 600% 400%;
-					animation: gradientBackground 10s ease infinite;
+					height: 300px;
 					border-radius: 10px;
-					color: white;
 					text-align: center;
 				}
 
-				h1 {
-					font-size: 50px;
-					line-height: 1.3;
-					letter-spacing: 5px;
-					text-transform: uppercase;
-					text-shadow:
-						0 1px 0 #efefef,
-						0 2px 0 #efefef,
-						0 3px 0 #efefef,
-						0 4px 0 #efefef,
-						0 12px 5px rgba(0, 0, 0, 0.1);
-					animation: rotate ease-in-out 1s infinite alternate;
-				}
-
 				p {
-					font-size: 20px;
+					font-size: 40px;
 					text-shadow: 0 1px 0 #efefef;
-					animation: 5s ease 0s normal forwards 1 fadeIn;
 				}
+
+				.flip-card {
+					font-family: Arial, Helvetica, sans-serif;
+					background-color: transparent;
+					width: 300px;
+					height: 300px;
+					perspective: 1000px;
+				}
+
+				.flip-card-inner {
+					position: relative;
+					width: 100%;
+					height: 100%;
+					text-align: center;
+					background-color: #ccc;
+					color: black;
+					transition: transform 2.9s;
+					transform-style: preserve-3d;
+					box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
+					animation: rotate ease-in-out 9s infinite;
+				}
+
+				.flip-card:hover .flip-card-inner {
+					transform: rotateY(180deg);
+				}
+
+				.flip-card-front, .flip-card-back {
+					position: absolute;
+					width: 100%;
+					height: 100%;
+					-webkit-backface-visibility: hidden;
+					backface-visibility: hidden;
+				}
+
+				.flip-card-front {
+					color: black;
+				}
+
+				.flip-card-back {
+					transform: rotateY(180deg);
+				}
+
 			</style>
 			<div class="container">
-				<h1>Made with HTML &amp; CSS<br/>not an animated GIF</h1>
-				<p>Click to see the source</p>
+				<div class="flip-card">
+            		<div class="flip-card-inner">
+              			<div class="flip-card-front">
+							<picture>
+								<svg width="300" height="300" viewBox="0 50 260 200" xmlns="http://www.w3.org/2000/svg">
+									<text x="20" y="170" font-size="100" font-family="Arial" fill="black">d</text>
+
+									<rect x="80" y="130" width="30" height="40" fill="lightblue" stroke="black"/>
+									<circle cx="95" cy="100" r="15" fill="lightblue" stroke="black" />
+									<rect x="115" y="70" width="30" height="100" fill="darkgreen" stroke="black"/>
+									<rect x="150" y="130" width="30" height="40" fill="lightblue" stroke="black"/>
+									<circle cx="165" cy="100" r="15" fill="lightblue" stroke="black" />
+									<text x="185" y="170" font-size="100" font-family="Arial" fill="black">b</text>
+									<text x="60" y="235" font-size="50" font-family="Arial" fill="black">[ .org ]</text>
+								</svg>
+							</picture>
+						</div>
+						<div class="flip-card-back">
+							<p>distributed</p>
+							<p>digital</p>
+							<p>library</p>
+						</div>
+					</div>
+				</div>
 			</div>
 		</div>
 	</foreignObject>
diff --git a/readme.md b/readme.md
index d377f5e..eb791e3 100644
--- a/readme.md
+++ b/readme.md
@@ -1,11 +1,6 @@
 <div align="center">
 	<br>
-	<a href="https://github.com/sindresorhus/css-in-readme-like-wat/blame/main/header.svg">
-		<picture>
-		  <source media="(min-width: 720px)" srcset="header.svg">
-		  <img src="header-mobile.svg" width="800" height="400" alt="Click to see the source">
-		</picture>
-	</a>
+		<img src="header.svg" width="800" height="400" alt="Click to see the source">
 	<br>
 </div>
 <br>