+
-
\ No newline at end of file
diff --git a/src/routes/legacy.css b/src/routes/legacy.css
new file mode 100644
index 00000000..92c30c87
--- /dev/null
+++ b/src/routes/legacy.css
@@ -0,0 +1,929 @@
+:root {
+ /* Resurrect 64 Palette */
+ --color-coal-1: #2e222f;
+ --color-coal-2: #3e3546;
+ --color-coal-3: #625565;
+ --color-coal-4: #966c6c;
+ --color-coal-5: #ab947a;
+
+ --color-silver-1: #694f62;
+ --color-silver-2: #7f708a;
+ --color-silver-3: #9babb2;
+ --color-silver-4: #c7dcd0;
+ --color-silver-5: #ffffff;
+
+ --color-red-1: #6e2727;
+ --color-red-2: #b33831;
+ --color-red-3: #ea4f36;
+ --color-red-4: #f57d4a;
+
+ --color-orange-1: #ae2334;
+ --color-orange-2: #e83b3b;
+ --color-orange-3: #fb6b1d;
+ --color-orange-4: #f79617;
+ --color-orange-5: #f9c22b;
+
+ --color-brown-1: #7a3045;
+ --color-brown-2: #9e4539;
+ --color-brown-3: #cd683d;
+ --color-brown-4: #e6904e;
+ --color-brown-5: #fbb954;
+
+ --color-toxic-1: #4c3e24;
+ --color-toxic-2: #676633;
+ --color-toxic-3: #a2a947;
+ --color-toxic-4: #d5e04b;
+ --color-toxic-5: #fbff86;
+
+ --color-green-1: #165a4c;
+ --color-green-2: #239063;
+ --color-green-3: #1ebc73;
+ --color-green-4: #91db69;
+ --color-green-5: #cddf6c;
+
+ --color-stone-1: #313638;
+ --color-stone-2: #374e4a;
+ --color-stone-3: #547e64;
+ --color-stone-4: #92a984;
+ --color-stone-5: #b2ba90;
+
+ --color-teal-1: #0b5e65;
+ --color-teal-2: #0b8a8f;
+ --color-teal-3: #0eaf9b;
+ --color-teal-4: #30e1b9;
+ --color-teal-5: #8ff8e2;
+
+ --color-blue-1: #323353;
+ --color-blue-2: #484a77;
+ --color-blue-3: #4d65b4;
+ --color-blue-4: #4d9be6;
+ --color-blue-5: #8fd3ff;
+
+ --color-violet-1: #45293f;
+ --color-violet-2: #6b3e75;
+ --color-violet-3: #905ea9;
+ --color-violet-4: #a884f3;
+ --color-violet-5: #eaaded;
+
+ --color-plume-1: #753c54;
+ --color-plume-2: #a24b6f;
+ --color-plume-3: #cf657f;
+ --color-plume-4: #ed8099;
+
+ --color-rose-1: #831c5d;
+ --color-rose-2: #c32454;
+ --color-rose-3: #f04f78;
+ --color-rose-4: #f68181;
+ --color-rose-5: #fca790;
+ --color-rose-6: #fdcbb0;
+
+ --color-sand-1: #f6d7b0;
+ --color-sand-2: #f2d2a9;
+ --color-sand-3: #eccca2;
+ --color-sand-4: #e7c496;
+ --color-sand-5: #e1bf92;
+}
+
+body, html {
+ font-family: "Noto Serif", serif;
+ font-optical-sizing: auto;
+ font-weight: 500;
+ font-style: normal;
+ font-variation-settings: "wdth" 100;
+}
+
+.bg-primary {
+ background-color: #FFE7B3;
+}
+
+.bg-accent-violet {
+ background-color: #473876;
+}
+
+.bg-progress-bar {
+ background-color: #DBB594;
+}
+
+.bg-twitch-command {
+ background-image: linear-gradient(to right, #56468B 0%, #664282 100%);
+ border: 2px solid #7D66D9;
+}
+
+.text-primary {
+ color: #38352E
+}
+
+.text-accent-sand {
+ color: #FFE7B3
+}
+
+.text-secondary-sand {
+ color: #DBB594
+}
+
+.border-primary {
+ border-color: #978365
+}
+
+.border-secondary {
+ border-color: #CBB99F
+}
+
+.bg-coal-1 {
+ background-color: var(--color-coal-1);
+}
+
+.bg-coal-2 {
+ background-color: var(--color-coal-2);
+}
+
+.bg-coal-3 {
+ background-color: var(--color-coal-3);
+}
+
+.bg-coal-4 {
+ background-color: var(--color-coal-4);
+}
+
+.bg-coal-5 {
+ background-color: var(--color-coal-5);
+}
+
+.border-coal-1 {
+ border-color: var(--color-coal-1);
+}
+
+.border-coal-2 {
+ border-color: var(--color-coal-2);
+}
+
+.border-coal-3 {
+ border-color: var(--color-coal-3);
+}
+
+.border-coal-4 {
+ border-color: var(--color-coal-4);
+}
+
+.border-coal-5 {
+ border-color: var(--color-coal-5);
+}
+
+.bg-silver-1 {
+ background-color: var(--color-silver-1);
+}
+
+.bg-silver-2 {
+ background-color: var(--color-silver-2);
+}
+
+.bg-silver-3 {
+ background-color: var(--color-silver-3);
+}
+
+.bg-silver-4 {
+ background-color: var(--color-silver-4);
+}
+
+.bg-silver-5 {
+ background-color: var(--color-silver-5);
+}
+
+.border-silver-1 {
+ border-color: var(--color-silver-1);
+}
+
+.border-silver-2 {
+ border-color: var(--color-silver-2);
+}
+
+.border-silver-3 {
+ border-color: var(--color-silver-3);
+}
+
+.border-silver-4 {
+ border-color: var(--color-silver-4);
+}
+
+.border-silver-5 {
+ border-color: var(--color-silver-5);
+}
+
+.text-silver-1 {
+ color: var(--color-silver-1);
+}
+
+.text-silver-2 {
+ color: var(--color-silver-2);
+}
+
+.text-silver-3 {
+ color: var(--color-silver-3);
+}
+
+.text-silver-4 {
+ color: var(--color-silver-4);
+}
+
+.text-silver-5 {
+ color: var(--color-silver-5);
+}
+
+.bg-red-1 {
+ background-color: var(--color-red-1);
+}
+
+.bg-red-2 {
+ background-color: var(--color-red-2);
+}
+
+.bg-red-3 {
+ background-color: var(--color-red-3);
+}
+
+.bg-red-4 {
+ background-color: var(--color-red-4);
+}
+
+.border-red-1 {
+ border-color: var(--color-red-1);
+}
+
+.border-red-2 {
+ border-color: var(--color-red-2);
+}
+
+.border-red-3 {
+ border-color: var(--color-red-3);
+}
+
+.border-red-4 {
+ border-color: var(--color-red-4);
+}
+
+.text-red-1 {
+ color: var(--color-red-1);
+}
+
+.text-red-2 {
+ color: var(--color-red-2);
+}
+
+.text-red-3 {
+ color: var(--color-red-3);
+}
+
+.text-red-4 {
+ color: var(--color-red-4);
+}
+
+.bg-violet-1 {
+ background-color: var(--color-violet-1);
+}
+
+.bg-violet-2 {
+ background-color: var(--color-violet-2);
+}
+
+.bg-violet-3 {
+ background-color: var(--color-violet-3);
+}
+
+.bg-violet-4 {
+ background-color: var(--color-violet-4);
+}
+
+.bg-violet-5 {
+ background-color: var(--color-violet-5);
+}
+
+.border-violet-1 {
+ border-color: var(--color-violet-1);
+}
+
+.border-violet-2 {
+ border-color: var(--color-violet-2);
+}
+
+.border-violet-3 {
+ border-color: var(--color-violet-3);
+}
+
+.border-violet-4 {
+ border-color: var(--color-violet-4);
+}
+
+.border-violet-5 {
+ border-color: var(--color-violet-5);
+}
+
+.text-violet-1 {
+ color: var(--color-violet-1);
+}
+
+.text-violet-2 {
+ color: var(--color-violet-2);
+}
+
+.text-violet-3 {
+ color: var(--color-violet-3);
+}
+
+.text-violet-4 {
+ color: var(--color-violet-4);
+}
+
+.text-violet-5 {
+ color: var(--color-violet-5);
+}
+
+.bg-orange-1 {
+ background-color: var(--color-orange-1);
+}
+
+.bg-orange-2 {
+ background-color: var(--color-orange-2);
+}
+
+.bg-orange-3 {
+ background-color: var(--color-orange-3);
+}
+
+.bg-orange-4 {
+ background-color: var(--color-orange-4);
+}
+
+.bg-orange-5 {
+ background-color: var(--color-orange-5);
+}
+
+.border-orange-1 {
+ border-color: var(--color-orange-1);
+}
+
+.border-orange-2 {
+ border-color: var(--color-orange-2);
+}
+
+.border-orange-3 {
+ border-color: var(--color-orange-3);
+}
+
+.border-orange-4 {
+ border-color: var(--color-orange-4);
+}
+
+.border-orange-5 {
+ border-color: var(--color-orange-5);
+}
+
+.text-orange-1 {
+ color: var(--color-orange-1);
+}
+
+.text-orange-2 {
+ color: var(--color-orange-2);
+}
+
+.text-orange-3 {
+ color: var(--color-orange-3);
+}
+
+.text-orange-4 {
+ color: var(--color-orange-4);
+}
+
+.text-orange-5 {
+ color: var(--color-orange-5);
+}
+
+.bg-brown-1 {
+ background-color: var(--color-brown-1);
+}
+
+.bg-brown-2 {
+ background-color: var(--color-brown-2);
+}
+
+.bg-brown-3 {
+ background-color: var(--color-brown-3);
+}
+
+.bg-brown-4 {
+ background-color: var(--color-brown-4);
+}
+
+.bg-brown-5 {
+ background-color: var(--color-brown-5);
+}
+
+.border-brown-1 {
+ border-color: var(--color-brown-1);
+}
+
+.border-brown-2 {
+ border-color: var(--color-brown-2);
+}
+
+.border-brown-3 {
+ border-color: var(--color-brown-3);
+}
+
+.border-brown-4 {
+ border-color: var(--color-brown-4);
+}
+
+.border-brown-5 {
+ border-color: var(--color-brown-5);
+}
+
+.text-brown-1 {
+ color: var(--color-brown-1);
+}
+
+.text-brown-2 {
+ color: var(--color-brown-2);
+}
+
+.text-brown-3 {
+ color: var(--color-brown-3);
+}
+
+.text-brown-4 {
+ color: var(--color-brown-4);
+}
+
+.text-brown-5 {
+ color: var(--color-brown-5);
+}
+
+.bg-blue-1 {
+ background-color: var(--color-blue-1);
+}
+
+.bg-blue-2 {
+ background-color: var(--color-blue-2);
+}
+
+.bg-blue-3 {
+ background-color: var(--color-blue-3);
+}
+
+.bg-blue-4 {
+ background-color: var(--color-blue-4);
+}
+
+.bg-blue-5 {
+ background-color: var(--color-blue-5);
+}
+
+.border-blue-1 {
+ border-color: var(--color-blue-1);
+}
+
+.border-blue-2 {
+ border-color: var(--color-blue-2);
+}
+
+.border-blue-3 {
+ border-color: var(--color-blue-3);
+}
+
+.border-blue-4 {
+ border-color: var(--color-blue-4);
+}
+
+.border-blue-5 {
+ border-color: var(--color-blue-5);
+}
+
+.text-blue-1 {
+ color: var(--color-blue-1);
+}
+
+.text-blue-2 {
+ color: var(--color-blue-2);
+}
+
+.text-blue-3 {
+ color: var(--color-blue-3);
+}
+
+.text-blue-4 {
+ color: var(--color-blue-4);
+}
+
+.text-blue-5 {
+ color: var(--color-blue-5);
+}
+
+.bg-teal-1 {
+ background-color: var(--color-teal-1);
+}
+
+.bg-teal-2 {
+ background-color: var(--color-teal-2);
+}
+
+.bg-teal-3 {
+ background-color: var(--color-teal-3);
+}
+
+.bg-teal-4 {
+ background-color: var(--color-teal-4);
+}
+
+.bg-teal-5 {
+ background-color: var(--color-teal-5);
+}
+
+.border-teal-1 {
+ border-color: var(--color-teal-1);
+}
+
+.border-teal-2 {
+ border-color: var(--color-teal-2);
+}
+
+.border-teal-3 {
+ border-color: var(--color-teal-3);
+}
+
+.border-teal-4 {
+ border-color: var(--color-teal-4);
+}
+
+.border-teal-5 {
+ border-color: var(--color-teal-5);
+}
+
+.text-teal-1 {
+ color: var(--color-teal-1);
+}
+
+.text-teal-2 {
+ color: var(--color-teal-2);
+}
+
+.text-teal-3 {
+ color: var(--color-teal-3);
+}
+
+.text-teal-4 {
+ color: var(--color-teal-4);
+}
+
+.text-teal-5 {
+ color: var(--color-teal-5);
+}
+
+.bg-green-1 {
+ background-color: var(--color-green-1);
+}
+
+.bg-green-2 {
+ background-color: var(--color-green-2);
+}
+
+.bg-green-3 {
+ background-color: var(--color-green-3);
+}
+
+.bg-green-4 {
+ background-color: var(--color-green-4);
+}
+
+.bg-green-5 {
+ background-color: var(--color-green-5);
+}
+
+.border-green-1 {
+ border-color: var(--color-green-1);
+}
+
+.border-green-2 {
+ border-color: var(--color-green-2);
+}
+
+.border-green-3 {
+ border-color: var(--color-green-3);
+}
+
+.border-green-4 {
+ border-color: var(--color-green-4);
+}
+
+.border-green-5 {
+ border-color: var(--color-green-5);
+}
+
+.text-green-1 {
+ color: var(--color-green-1);
+}
+
+.text-green-2 {
+ color: var(--color-green-2);
+}
+
+.text-green-3 {
+ color: var(--color-green-3);
+}
+
+.text-green-4 {
+ color: var(--color-green-4);
+}
+
+.text-green-5 {
+ color: var(--color-green-5);
+}
+
+.bg-stone-1 {
+ background-color: var(--color-stone-1);
+}
+
+.bg-stone-2 {
+ background-color: var(--color-stone-2);
+}
+
+.bg-stone-3 {
+ background-color: var(--color-stone-3);
+}
+
+.bg-stone-4 {
+ background-color: var(--color-stone-4);
+}
+
+.bg-stone-5 {
+ background-color: var(--color-stone-5);
+}
+
+.border-stone-1 {
+ border-color: var(--color-stone-1);
+}
+
+.border-stone-2 {
+ border-color: var(--color-stone-2);
+}
+
+.border-stone-3 {
+ border-color: var(--color-stone-3);
+}
+
+.border-stone-4 {
+ border-color: var(--color-stone-4);
+}
+
+.border-stone-5 {
+ border-color: var(--color-stone-5);
+}
+
+.text-stone-1 {
+ color: var(--color-stone-1);
+}
+
+.text-stone-2 {
+ color: var(--color-stone-2);
+}
+
+.text-stone-3 {
+ color: var(--color-stone-3);
+}
+
+.text-stone-4 {
+ color: var(--color-stone-4);
+}
+
+.text-stone-5 {
+ color: var(--color-stone-5);
+}
+
+@keyframes animation-tree-shake {
+ 0% {
+ transform: skewX(0deg);
+ }
+ /* Chop */
+ 10% {
+ transform: skewX(-5deg);
+ }
+ 12% {
+ transform: skewX(5deg);
+ }
+ 15% {
+ transform: skewX(0deg);
+ }
+ /* Chop */
+ 30% {
+ transform: skewX(-5deg);
+ }
+ 32% {
+ transform: skewX(5deg);
+ }
+ 35% {
+ transform: skewX(0deg);
+ }
+
+ 50% {
+ transform: skewX(0deg);
+ }
+ 60% {
+ transform: skewX(0deg);
+ }
+
+ /* Chop */
+ 65% {
+ transform: skewX(-5deg);
+ }
+ 67% {
+ transform: skewX(5deg);
+ }
+ 70% {
+ transform: skewX(0deg);
+ }
+ 100% {
+ transform: skewX(0deg);
+ }
+}
+
+.animation-tree-shake {
+ animation: animation-tree-shake 2.6s infinite;
+}
+
+@keyframes animation-tree-wind-shake {
+ 0% {
+ transform: skewX(0deg);
+ }
+ 10% {
+ transform: skewX(-5deg);
+ }
+ 15% {
+ transform: skewX(0);
+ }
+ 50% {
+ transform: skewX(0);
+ }
+ 57% {
+ transform: skewX(2deg);
+ }
+ 65% {
+ transform: skewX(-4deg);
+ }
+ 73% {
+ transform: skewX(0);
+ }
+ 100% {
+ transform: skewX(0deg);
+ }
+}
+
+.animation-tree-wind-shake {
+ animation: animation-tree-wind-shake 10s infinite;
+}
+
+@keyframes animation-tree-chopping {
+ 0% {
+ transform: translate(0, 0) rotate(0deg);
+ }
+ /* Chop */
+ 10% {
+ transform: translate(0, 0) rotate(0deg);
+ }
+ 12% {
+ transform: translate(-5px, 8px) rotate(-45deg);
+ }
+ 15% {
+ transform: translate(0, 0) rotate(0deg);
+ }
+ /* Chop */
+ 30% {
+ transform: translate(0, 0) rotate(0deg);
+ }
+ 32% {
+ transform: translate(-5px, 8px) rotate(-45deg);
+ }
+ 35% {
+ transform: translate(0, 0) rotate(0deg);
+ }
+
+ 50% {
+ transform: translate(0, 0) rotate(0deg);
+ }
+ 60% {
+ transform: translate(0, 0) rotate(0deg);
+ }
+
+ /* Chop */
+ 65% {
+ transform: translate(0, 0) rotate(0deg);
+ }
+ 67% {
+ transform: translate(-5px, 8px) rotate(-45deg);
+ }
+ 70% {
+ transform: translate(0, 0) rotate(0deg);
+ }
+
+ 100% {
+ transform: translate(0, 0) rotate(0deg);
+ }
+}
+
+.animation-tree-chopping {
+ animation: animation-tree-chopping 2.6s infinite;
+}
+
+@keyframes animation-stone-little-shake {
+ 0% {
+ transform: skewY(0deg);
+ }
+ 10% {
+ transform: skewY(-1deg);
+ }
+ 15% {
+ transform: skewY(0);
+ }
+ 50% {
+ transform: skewY(0);
+ }
+ 57% {
+ transform: skewY(1deg);
+ }
+ 65% {
+ transform: skewY(-1deg);
+ }
+ 73% {
+ transform: skewY(0);
+ }
+ 100% {
+ transform: skewY(0deg);
+ }
+}
+
+.animation-stone-little-shake {
+ animation: animation-stone-little-shake 10s infinite;
+}
+
+@keyframes animation-rabbit-hop {
+ 0% {
+ transform: translate(0, 0) rotate(0deg);
+ }
+ 70% {
+ transform: translate(0, 1px) rotate(0deg);
+ }
+ 80% {
+ transform: translate(0, -6px) rotate(-8deg) scale(0.7);
+ }
+ 90% {
+ transform: translate(0, 2px) rotate(2deg);
+ }
+ 100% {
+ transform: translate(0, 0) rotate(0deg);
+ }
+}
+
+.animation-rabbit-hop {
+ animation: animation-rabbit-hop 0.7s infinite;
+}
+
+@keyframes animation-wolf-move {
+ 0% {
+ transform: translate(0, 0) rotate(0deg);
+ }
+ 70% {
+ transform: translate(0, 1px) rotate(0deg);
+ }
+ 80% {
+ transform: translate(0, -1px) rotate(-4deg) scale(0.88);
+ }
+ 90% {
+ transform: translate(0, 1px) rotate(2deg);
+ }
+ 100% {
+ transform: translate(0, 0) rotate(0deg);
+ }
+}
+
+.animation-wolf-move {
+ animation: animation-wolf-move 0.8s infinite;
+}
+
+@keyframes animation-player-move {
+ 0% {
+ transform: translate(0, 0) rotate(0deg);
+ }
+ 70% {
+ transform: translate(0, 1px) rotate(0deg);
+ }
+ 80% {
+ transform: translate(0, -1px) rotate(-4deg) scale(0.88);
+ }
+ 90% {
+ transform: translate(0, 1px) rotate(2deg);
+ }
+ 100% {
+ transform: translate(0, 0) rotate(0deg);
+ }
+}
+
+.animation-player-move {
+ animation: animation-player-move 0.6s infinite;
+}
diff --git a/src/routes/styles.css b/src/routes/styles.css
index ef4e81e1..2b12d1cf 100644
--- a/src/routes/styles.css
+++ b/src/routes/styles.css
@@ -13,6 +13,7 @@
--color-rare: #0090FF;
--color-epic: #7D66D9;
--color-legendary: #F76B15;
+ --color-bg-loader: #7D66D9;
}
html {