body {
    /* background-color:#385ed1; */
    background-color:#aa4478;
    animation:background 30s linear infinite;
    /* color:#e4dfda; */
    color:#DAE3E5;
    /* text-shadow:#333 2px 2px 0px; */
    font-family:sans-serif;
    --warp-text-scale-x: 0;
    --warp-text-scale-y: 0.4;
}
@keyframes background {
    0%  {
        background-color: #aa4478;
    }
    50% {
        background-color: #4478aa;
    }
    100% {
        background-color: #aa4478;
    }
}
a {
    color:hsl();
    text-shadow:0 0 5px #222;
    animation:a 30s linear infinite;
}
#escapist-banner {
    color:HSL(0, 50%, 50%);
    text-shadow:5px 5px 0 var(--shadow-color-1), 5px -5px 0 var(--shadow-color-1), -5px -5px 0 var(--shadow-color-1), -5px 5px 0 var(--shadow-color-1);
    filter:blur(0px);
    /* animation:blurry 17s ease-in-out infinite; */
    transform-origin:center;
    /* transform-box:content-box; */
    animation:melt 10s ease-in-out infinite, shadow 7s ease-in-out infinite, hue-shift 13s ease-in-out infinite;
}
@keyframes a {
    0% {
        color:HSL(200,75%,70%);
    }
    50% {
        color:HSL(340,75%,70%);
    }
    100% {
        color:HSL(200,75%,70%);
    }
}
.warp-text span.warp-char-0 {
    display:inline-block;
    animation:warp-text 10s ease infinite;
    animation-delay:-6s;
}
.warp-text span.warp-char-1 {
    display:inline-block;
    animation:warp-text 10s ease infinite;
    animation-delay:-8s;
}
.warp-text span.warp-char-2 {
    display:inline-block;
    animation:warp-text 10s ease infinite;
    animation-delay:-5s;
}
.warp-text span.warp-char-3 {
    display:inline-block;
    animation:warp-text 10s ease infinite;
    animation-delay:-7s;
}
.warp-text span.warp-char-4 {
    display:inline-block;
    animation:warp-text 10s ease infinite;
    animation-delay:-3s;
}
.warp-text span.warp-char-5 {
    display:inline-block;
    animation:warp-text 10s ease infinite;
    animation-delay:-9s;
}
.warp-text span.warp-char-6 {
    display:inline-block;
    animation:warp-text 10s ease infinite;
    animation-delay:-2s;
}
.warp-text span.warp-char-7 {
    display:inline-block;
    animation:warp-text 10s ease infinite;
    animation-delay:-0s;
}
.warp-text span.warp-char-8 {
    display:inline-block;
    animation:warp-text 10s ease infinite;
    animation-delay:-4s;
}
.warp-text span.warp-char-9 {
    display:inline-block;
    animation:warp-text 10s ease infinite;
    animation-delay:-1s;
}
.warp-text span.warp-char-space {
    display:inline-block;
    width:5px;
}
@keyframes warp-text {
    0% {
        transform:translate(calc(4px * var(--warp-text-scale-x)), calc(-4px * var(--warp-text-scale-y)));
    }
    10% {
        transform:translate(calc(1px * var(--warp-text-scale-x)), calc(1px * var(--warp-text-scale-y)));
    }
    20% {
        transform:translate(calc(-1px * var(--warp-text-scale-x)), calc(-3px * var(--warp-text-scale-y)));
    }
    30% {
        transform:translate(calc(2px * var(--warp-text-scale-x)), calc(4px * var(--warp-text-scale-y)));
    }
    40% {
        transform:translate(calc(5px * var(--warp-text-scale-x)), calc(5px * var(--warp-text-scale-y)));
    }
    50% {
        transform:translate(calc(-5px * var(--warp-text-scale-x)), calc(-2px * var(--warp-text-scale-y)));
    }
    60% {
        transform:translate(calc(-3px * var(--warp-text-scale-x)), calc(3px * var(--warp-text-scale-y)));
    }
    70% {
        transform:translate(calc(3px * var(--warp-text-scale-x)), calc(-5px * var(--warp-text-scale-y)));
    }
    80% {
        transform:translate(calc(-4px * var(--warp-text-scale-x)), calc(0px * var(--warp-text-scale-y)));
    }
    90% {
        transform:translate(calc(0px * var(--warp-text-scale-x)), calc(2px * var(--warp-text-scale-y)));
    }
    100% {
        transform:translate(calc(4px * var(--warp-text-scale-x)), calc(-4px * var(--warp-text-scale-y)));
    }
}
/*
:root {
    --shadow-blur:0vw;
    --shadow-color-1:green;
    --shadow-color-2:blue;
    --shadow-color-3:red;
    --shadow-color-4:yellow;
}
body {
    color:deeppink;
    background-color:deeppink;
    font-size:8vw;
    font-family:system-ui;
    text-shadow:5px 5px 0 var(--shadow-color-1);
    animation:shadow-colors 13s linear infinite;
}
main {
    height:100%;
    width:100%;
    display:flex;
    position:fixed;
    align-items:center;
    justify-content:center;
}
*/
@keyframes melt {
    0%, 100% {
        transform:rotate(0.25turn);
    }
    25% {
        transform:rotate(0turn);
    }
    50% {
        transform:rotate(-0.25turn);
    }
    75% {
        transform:rotate(0turn);
    }
}
@keyframes melt-orig {
    0%, 100% {
        transform:skew(-15deg, 0deg);
    }
    25% {
        transform:skew(10deg, -20deg);
    }
    50% {
        transform:skew(-20deg, 10deg);
    }
    75% {
        transform:skew(0deg, -15deg);
    }
}
@keyframes hue-shift {
    0%, 100% {
        filter:hue-rotate(0deg);
    }
    50% {
        filter:hue-rotate(180deg);
    }
}
@keyframes shadow {
    0%, 100% {
        text-shadow:0.5vw -0.5vw var(--shadow-blur) var(--shadow-color-1), -0.2vw 0.5vw var(--shadow-blur) var(--shadow-color-2), -0.9vw -0.4vw var(--shadow-blur) var(--shadow-color-3), 0.6vw 0.7vw var(--shadow-blur) var(--shadow-color-4);
    }
    25% {
        text-shadow:-0.7vw 0.3vw var(--shadow-blur) var(--shadow-color-1), 0.7vw -0.3vw var(--shadow-blur) var(--shadow-color-2), 0.3vw 0.8vw var(--shadow-blur) var(--shadow-color-3), -0.5vw -0.1vw var(--shadow-blur) var(--shadow-color-4);
    }
    50% {
        text-shadow:0.3vw -0.4vw var(--shadow-blur) var(--shadow-color-1), -0.3vw 0.4vw var(--shadow-blur) var(--shadow-color-2), -0.1vw -0.5vw var(--shadow-blur) var(--shadow-color-3), 0.8vw 0.3vw var(--shadow-blur) var(--shadow-color-4);
    }
    75% {
        text-shadow:-0.4vw 0.7vw var(--shadow-blur) var(--shadow-color-1), 0.4vw -0.7vw var(--shadow-blur) var(--shadow-color-2), 0.7vw 0.6vw var(--shadow-blur) var(--shadow-color-3), -0.4vw -0.9vw var(--shadow-blur) var(--shadow-color-4);
    }
}
/* @keyframes shadow-colors {
    0%, 100% {
        --shadow-color-1:hsl(90deg 100%, 50%);
        --shadow-color-2:hsl(180deg 100%, 50%);
        --shadow-color-3:hsl(270deg 100%, 50%);
        --shadow-color-4:hsl(0deg 100%, 50%);
    }
    50% {
        --shadow-color-1:hsl(270deg 100%, 50%);
        --shadow-color-2:hsl(0deg 100%, 50%);
        --shadow-color-3:hsl(90deg 100%, 50%);
        --shadow-color-4:hsl(180deg 100%, 50%);
    }
} */
@keyframes blurry {
    0%, 100% {
        filter:blur(0px);
    }
    75% {
        filter:blur(1px);
    }
}
@keyframes shadow-colors {
    0%,100% {
        --shadow-color-1:grey;
    }
    10% {
        --shadow-color-1:white;
    }
    20% {
        --shadow-color-1:red;
    }
    30% {
        --shadow-color-1:green;
    }
    40% {
        --shadow-color-1:blue;
    }
    50% {
        --shadow-color-1:yellow;
    }
    60% {
        --shadow-color-1:hotpink;
    }
    70% {
        --shadow-color-1:cyan;
    }
    80% {
        --shadow-color-1:purple;
    }
    90% {
        --shadow-color-1:white;
    }
}