From cc74ab5dba7eed69fb90c688bf7750aaf503480c Mon Sep 17 00:00:00 2001
From: Sarimoko <travis@sarimoko.com>
Date: Sun, 13 Feb 2022 05:39:12 +0000
Subject: [PATCH] Add 'www/alert.css'

---
 www/alert.css | 139 ++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 139 insertions(+)
 create mode 100644 www/alert.css

diff --git a/www/alert.css b/www/alert.css
new file mode 100644
index 0000000..7ed3c85
--- /dev/null
+++ b/www/alert.css
@@ -0,0 +1,139 @@
+body {
+  font-family: canada-type-gibson, sans-serif;
+  font-size: .5rem;
+  font-weight: 300;
+  font-size: 1.25rem;
+  display: grid;
+  flex-direction: column;
+  justify-content: center;
+  overflow: hidden;
+}
+
+img {
+  border-radius: 8px;
+  margin: auto;
+}
+
+.alerts {
+  display: grid;
+  justify-content: center;
+  width: 1040px;
+  text-align: center;
+}
+
+.content {
+  display: flex;
+  align-content: center;
+  justify-content: center;
+}
+
+.text-shadows {
+  text-shadow: 3px 3px 0 #f49b90, 6px 6px 0 #f28b7d,
+    9px 9px #f07a6a, 12px 12px 0 #f07a6a;
+  font-family: bungee, sans-serif;
+  font-size: calc(.25rem + 5vw);
+  font-weight: 400;
+  text-transform: uppercase;
+  text-align: center;
+  margin: 0;
+  color: #f6aca2;
+  animation: shadows 1.5s ease-in infinite, move 1.5s ease-in infinite;
+  letter-spacing: 0.4rem;
+}
+
+
+.fade-in {
+  animation: fadeIn ease 6s;
+  -webkit-animation: fadeIn ease 6s;
+  -moz-animation: fadeIn ease 6s;
+  -o-animation: fadeIn ease 6s;
+  -ms-animation: fadeIn ease 6s;
+}
+
+@keyframes fadeIn {
+  0% {opacity:0;}
+  100% {opacity:1;}
+}
+
+@-moz-keyframes fadeIn {
+  0% {opacity:0;}
+  100% {opacity:1;}
+}
+
+@-webkit-keyframes fadeIn {
+  0% {opacity:0;}
+  100% {opacity:1;}
+}
+
+@-o-keyframes fadeIn {
+  0% {opacity:0;}
+  100% {opacity:1;}
+}
+
+@-ms-keyframes fadeIn {
+  0% {opacity:0;}
+  100% {opacity:1;}
+}
+@keyframes shadows {
+  0% {
+    text-shadow: none;
+  }
+  10% {
+    text-shadow: 3px 3px 0 #f49b90;
+  }
+  20% {
+    text-shadow: 3px 3px 0 #f49b90,
+      6px 6px 0 #f28b7d;
+  }
+  30% {
+    text-shadow: 3px 3px 0 #f28b7d,
+      6px 6px 0 #f28b7d, 9px 9px #f07a6a;
+  }
+  40% {
+    text-shadow: 3px 3px 0 #f49b90,
+      6px 6px 0 #f28b7d, 9px 9px #f07a6a,
+      12px 12px 0 #ee6352;
+  }
+  50% {
+    text-shadow: 3px 3px 0 #f49b90,
+      6px 6px 0 #f28b7d, 9px 9px #f07a6a,
+      12px 12px 0 #ee6352;
+  }
+  60% {
+    text-shadow: 3px 3px 0 #f49b90,
+      6px 6px 0 #f28b7d, 9px 9px #f07a6a,
+      12px 12px 0 #ee6352;
+  }
+  70% {
+    text-shadow: 3px 3px 0 #f49b90,
+      6px 6px 0 #f28b7d, 9px 9px #f07a6a;
+  }
+  80% {
+    text-shadow: 3px 3px 0 #f49b90,
+      6px 6px 0 #f28b7d;
+  }
+  90% {
+    text-shadow: 3px 3px 0 #f49b90;
+  }
+  100% {
+    text-shadow: none;
+  }
+}
+
+@keyframes move {
+  0% {
+    transform: translate(0px, 0px);
+  }
+  40% {
+    transform: translate(-12px, -12px);
+  }
+  50% {
+    transform: translate(-12px, -12px);
+  }
+  60% {
+    transform: translate(-12px, -12px);
+  }
+  100% {
+    transform: translate(0px, 0px);
+  }
+}