hell page development + heaven page creation

1 files changed, 34 insertions, 8 deletions

diff --git a/style.css b/style.css
index a612e06..58e8d3b 100644
--- a/style.css
+++ b/style.css
@@ -7,7 +7,7 @@
     src: url("/assets/unifont_upper.woff2");
 }
 
-html {
+:root {
     --red: #e67e80;
     --orange: #e69875;
     --yellow: #dbbc7f;
@@ -41,6 +41,7 @@ body {
     font-family: unifont;
     font-size: 16px;
     color: var(--fg);
+    perspective-origin: top left
 }
 
 .section {
@@ -110,19 +111,26 @@ h3 {
     animation: blinker 1s linear infinite;    
 }
 
-@keyframes evilGlow {
+@keyframes glow {
   50% {
-    text-shadow: 0 0 10px #f00,
-                 0 0 20px #f00,
-                 0 0 40px #f00,
-                 0 0 80px #8b0000,
-                 0 0 120px #8b0000;
+    text-shadow: 0 0 10px var(--glow-color),
+                 0 0 20px var(--glow-color),
+                 0 0 40px var(--glow-color),
+                 0 0 80px hsl(from var(--glow-color) h s calc(l - 10)),
+                 0 0 120px hsl(from var(--glow-color) h s calc(l - 10));
   }
 }
 
 .evil {
     color: var(--red);
-    animation: evilGlow 4s linear infinite;
+    --glow-color: red;
+    animation: glow 4s linear infinite;
+}
+
+.holy {
+    color: var(--yellow);
+    --glow-color: white;
+    animation: glow 4s linear infinite;
 }
 
 a.evil:visited {
@@ -154,3 +162,21 @@ a.evil:hover {
 .huge {
     font-size: 128px;
 }
+
+.struck {
+    opacity: 0.5;
+    position: absolute;
+    z-index: -999;
+    user-select: none;
+}
+
+@keyframes pan {
+  from {
+    background-position: 0 0;
+  }
+  to {
+    background-position: var(--pan);
+  }
+}
+
+