:root{--glitch-cyan: cyan;--glitch-red: red;--star-color: #fff;--glitch-duration: .2s;--star-scroll-duration: 30s;--logo-glitch-duration: 5s;--bg-gradient-duration: 8s;--spotify-fade-duration: 2s;--star-field-height: 4000px;--star-field-offset: 2000px;--bg-gradient: linear-gradient( 132deg, #050505, #0a0f1c, #1b263b, #2c0a12, #3b0a1e, #0d1b2a, #050505 );--star-field-small: radial-gradient(1px 1px at 5% 5%, var(--star-color) 100%, transparent 0), radial-gradient(1px 1px at 10% 90%, var(--star-color) 100%, transparent 0), radial-gradient(1px 1px at 15% 25%, var(--star-color) 100%, transparent 0), radial-gradient(1px 1px at 20% 75%, var(--star-color) 100%, transparent 0), radial-gradient(1px 1px at 25% 40%, var(--star-color) 100%, transparent 0), radial-gradient(1px 1px at 30% 60%, var(--star-color) 100%, transparent 0), radial-gradient(1px 1px at 35% 10%, var(--star-color) 100%, transparent 0), radial-gradient(1px 1px at 40% 90%, var(--star-color) 100%, transparent 0), radial-gradient(1px 1px at 45% 20%, var(--star-color) 100%, transparent 0), radial-gradient(1px 1px at 50% 80%, var(--star-color) 100%, transparent 0), radial-gradient(1px 1px at 55% 30%, var(--star-color) 100%, transparent 0), radial-gradient(1px 1px at 60% 70%, var(--star-color) 100%, transparent 0), radial-gradient(1px 1px at 65% 50%, var(--star-color) 100%, transparent 0), radial-gradient(1px 1px at 70% 15%, var(--star-color) 100%, transparent 0), radial-gradient(1px 1px at 75% 85%, var(--star-color) 100%, transparent 0), radial-gradient(1px 1px at 80% 35%, var(--star-color) 100%, transparent 0), radial-gradient(1px 1px at 85% 65%, var(--star-color) 100%, transparent 0), radial-gradient(1px 1px at 90% 45%, var(--star-color) 100%, transparent 0), radial-gradient(1px 1px at 95% 25%, var(--star-color) 100%, transparent 0);--star-field-medium: radial-gradient(2px 2px at 12% 60%, var(--star-color) 100%, transparent 0), radial-gradient(2px 2px at 18% 10%, var(--star-color) 100%, transparent 0), radial-gradient(2px 2px at 27% 95%, var(--star-color) 100%, transparent 0), radial-gradient(2px 2px at 34% 45%, var(--star-color) 100%, transparent 0), radial-gradient(2px 2px at 43% 70%, var(--star-color) 100%, transparent 0), radial-gradient(2px 2px at 52% 5%, var(--star-color) 100%, transparent 0), radial-gradient(2px 2px at 63% 85%, var(--star-color) 100%, transparent 0), radial-gradient(2px 2px at 76% 60%, var(--star-color) 100%, transparent 0), radial-gradient(2px 2px at 87% 30%, var(--star-color) 100%, transparent 0);--star-field-large: radial-gradient(3px 3px at 22% 38%, var(--star-color) 100%, transparent 0), radial-gradient(3px 3px at 48% 25%, var(--star-color) 100%, transparent 0), radial-gradient(3px 3px at 66% 12%, var(--star-color) 100%, transparent 0), radial-gradient(3px 3px at 79% 92%, var(--star-color) 100%, transparent 0), radial-gradient(3px 3px at 92% 58%, var(--star-color) 100%, transparent 0)}iframe#spotify-player{border:none;opacity:0;margin-top:1rem}@keyframes spotify-fade-in{0%{transform:translateY(50%) scale(.95);opacity:0}30%{transform:translateY(-5%) scale(1.02);opacity:0}55%{transform:translateY(2%) scale(.99);opacity:.5}80%{transform:translateY(0) scale(1);opacity:1.05}to{transform:translateY(0) scale(1);opacity:1}}.animate-spotify-fade-in{animation:spotify-fade-in var(--spotify-fade-duration) ease-out forwards}body{margin:0;padding:0;text-align:center;overflow:hidden;background:var(--bg-gradient);background-size:300% 300%;animation:backgroundGradient var(--bg-gradient-duration) ease-in-out infinite}#logo{animation:logoGlitch var(--logo-glitch-duration) infinite}@keyframes logoGlitch{0%,78%,to{transform:rotate(0) translate(0) scale(1);filter:none;opacity:1}79%{filter:drop-shadow(8px 0 var(--glitch-cyan)) drop-shadow(-8px 0 var(--glitch-red)) brightness(220%) contrast(130%);transform:rotate(-3deg) translate(4px,1px) scale(1.12);opacity:.9}80%{filter:drop-shadow(-7px 4px var(--glitch-cyan)) drop-shadow(7px -4px var(--glitch-red)) brightness(200%) contrast(120%);transform:rotate(3deg) translate(-4px,-1px) scale(1.12);opacity:.95}81%{filter:drop-shadow(6px -6px var(--glitch-cyan)) drop-shadow(-6px 6px var(--glitch-red)) brightness(210%) contrast(125%);transform:rotate(-2deg) translate(3px,2px) scale(1.1);opacity:.9}82%{filter:drop-shadow(-8px 0 var(--glitch-cyan)) drop-shadow(8px 0 var(--glitch-red)) brightness(220%) contrast(130%);transform:rotate(2deg) translate(-4px,2px) scale(1.12);opacity:.95}83%{filter:none;transform:rotate(0) translate(0) scale(1);opacity:1}}@keyframes backgroundGradient{0%{background-position:0 50%}50%{background-position:100% 50%}to{background-position:0 50%}}body:before,body:after{z-index:-1;content:"";position:absolute;width:100%;height:var(--star-field-height);top:0;left:0;background:var(--star-field-small),var(--star-field-medium),var(--star-field-large);animation:starScroll var(--star-scroll-duration) linear infinite}body:after{top:var(--star-field-offset)}@keyframes starScroll{0%{transform:translateY(0)}to{transform:translateY(calc(-1 * var(--star-field-offset)))}}.container{display:flex;justify-content:center;align-items:flex-start;flex-direction:column;min-height:100dvh}.container>*{align-self:center}@keyframes glitch{0%{filter:drop-shadow(5px 4px 0 var(--glitch-cyan)) drop-shadow(-5px -6px 0 var(--glitch-red));transform:rotate(0)}25%{filter:drop-shadow(-5px -6px 0 var(--glitch-cyan)) drop-shadow(5px 4px 0 var(--glitch-red))}50%{filter:drop-shadow(5px -4px 0 var(--glitch-cyan)) drop-shadow(-8px 4px 0 var(--glitch-red));transform:rotate(10deg)}75%{filter:drop-shadow(-8px -4px 0 var(--glitch-cyan)) drop-shadow(-5px -4px 0 var(--glitch-red))}to{filter:drop-shadow(-5px 0px 0 var(--glitch-cyan)) drop-shadow(5px -4px 0 var(--glitch-red));transform:rotate(0)}}.social{display:flex;flex-direction:row;justify-content:center;align-items:flex-start;padding:1rem}.social a{color:#dc143c;text-decoration:none;font-size:1.7rem;padding:1rem}.social a svg{width:2rem;height:2rem;display:inline-block;vertical-align:middle}.social a:hover,.social a:focus,.social a:active,.glitch{animation:glitch var(--glitch-duration) infinite}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation:none!important;transition:none!important}}