body{margin:0;padding:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;background-color:#f0f0f0;color:#333}body,html{height:100vh;overflow:hidden}h1{font-size:3.5rem}h1,p{text-align:center}p{font-size:1.25rem;margin-top:1rem}.container{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100vh}.animated-bg{height:100vh;width:100vw;background:linear-gradient(-45deg,#667eea,#764ba2,#f093fb,#f5576c);background-size:400% 400%;animation:gradientShift 15s ease infinite;position:fixed;top:0;left:0;overflow:hidden}@keyframes gradientShift{0%{background-position:0 50%}50%{background-position:100% 50%}to{background-position:0 50%}}.floating-shapes{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:1}.shape{position:absolute;background:hsla(0,0%,100%,.1);border-radius:50%;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.shape-1{width:80px;height:80px;top:20%;left:10%;animation:float1 20s ease-in-out infinite}.shape-2{width:120px;height:120px;top:60%;right:10%;animation:float2 25s ease-in-out infinite;border-radius:20px}.shape-3{width:60px;height:60px;top:10%;right:30%;animation:float3 18s ease-in-out infinite}.shape-4{width:100px;height:100px;bottom:20%;left:20%;animation:float4 22s ease-in-out infinite;border-radius:30px}.shape-5{width:40px;height:40px;top:40%;left:50%;animation:float5 16s ease-in-out infinite}@keyframes float1{0%,to{transform:translateY(0) rotate(0deg)}33%{transform:translateY(-30px) rotate(120deg)}66%{transform:translateY(20px) rotate(240deg)}}@keyframes float2{0%,to{transform:translateX(0) translateY(0) rotate(0deg)}25%{transform:translateX(-20px) translateY(-20px) rotate(90deg)}50%{transform:translateX(20px) translateY(-40px) rotate(180deg)}75%{transform:translateX(-10px) translateY(10px) rotate(270deg)}}@keyframes float3{0%,to{transform:translateY(0) scale(1)}50%{transform:translateY(-40px) scale(1.1)}}@keyframes float4{0%,to{transform:translateX(0) rotate(0deg)}33%{transform:translateX(30px) rotate(90deg)}66%{transform:translateX(-20px) rotate(180deg)}}@keyframes float5{0%,to{transform:translateY(0) translateX(0) rotate(0deg)}25%{transform:translateY(-25px) translateX(15px) rotate(45deg)}50%{transform:translateY(10px) translateX(-15px) rotate(90deg)}75%{transform:translateY(-10px) translateX(25px) rotate(135deg)}}main{position:relative;z-index:2;height:100vh;display:flex;align-items:center;justify-content:center;text-align:center}