From 1a0dce9d85e3aa7572cd3e47b082a888cac9914a Mon Sep 17 00:00:00 2001
From: The Magician <themagician@engineer.com>
Date: Fri, 1 Dec 2023 16:43:12 +0000
Subject: [PATCH] Add "deal" animation

---
 tarotcard-deal.css | 14 ++++++++++++--
 test/index.html    |  4 +++-
 2 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/tarotcard-deal.css b/tarotcard-deal.css
index e5fb2f0..da24dac 100644
--- a/tarotcard-deal.css
+++ b/tarotcard-deal.css
@@ -1,3 +1,13 @@
-body {
-    color: green;
+@keyframes deal-card {
+    from {
+        transform: translateY(300vh);
+    }
+
+    to {
+        transform: translateY(0);
+    }
+}
+
+.tarot-card--deal {
+    animation: deal-card 1s both;
 }
diff --git a/test/index.html b/test/index.html
index f972004..89ab0e9 100644
--- a/test/index.html
+++ b/test/index.html
@@ -6,6 +6,8 @@
 			body {
 				height: 100vh;
 				background: #000056;
+
+				margin: 0 auto;
 			}
 
 			.center-grid {
@@ -35,7 +37,7 @@
 			</div>
 
 			<!-- Identical to The Simple Card, but uses the "deal" animation to slide in when the page is loaded. -->
-			<div id="deal-card" class="tarot-card">
+			<div id="deal-card" class="tarot-card tarot-card--deal">
 				<div class="tarot-card__section tarot-card__section--art">
 					<img class="tarot-card__art" src="images/card_art_std.jpg" alt="The Deal Card artwork image." title="The Simple Card artwork image.">
 				</div>