.hero{display:flex;flex-direction:column;justify-content:center;align-items:center;height:100vh;width:100%;background:#fff;color:#333}.hero h1{font-size:3rem;margin-bottom:1rem}.hero p{font-size:1.2rem;margin-bottom:2rem}.hero button{padding:1rem 2rem;font-size:1.2rem;background:#007bff;color:#fff;border:none;border-radius:5px;cursor:pointer;transition:background .3s ease}.hero button:hover{background:#0056b3}.bg{background-image:url(/bg2.png);height:100vh;width:100%;background-attachment:fixed;background-position:50%;background-repeat:no-repeat;background-size:cover}.floating{animation-name:floating;animation-duration:3s;animation-iteration-count:infinite;animation-timing-function:ease-in-out;margin-left:30px;margin-top:5px}@keyframes floating{0%{transform:translate(0)}50%{transform:translateY(15px)}to{transform:translate(0)}}.fly{animation-name:fly;animation-duration:10s;animation-iteration-count:infinite}@keyframes fly{0%{transform:translate(-10vw)}to{transform:translate(50vw)}}.rotate{animation-name:rotate;animation-duration:30s;animation-iteration-count:infinite;animation-timing-function:ease-in-out}@keyframes rotate{0%{transform:rotate(-10deg)}50%{transform:rotate(10deg)}to{transform:rotate(-10deg)}}.starfield{position:relative;overflow:hidden}.starfield:before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(8px 8px at 20px 30px,hsla(0,0%,100%,.9),hsla(0,0%,100%,0) 45%) 0 0/240px 240px repeat,radial-gradient(6px 6px at 100px 150px,hsla(0,0%,100%,.85),hsla(0,0%,100%,0) 45%) 0 0/300px 300px repeat,radial-gradient(4px 4px at 130px 80px,hsla(0,0%,100%,.75),hsla(0,0%,100%,0) 45%) 0 0/220px 220px repeat,radial-gradient(4px 4px at 60px 120px,hsla(0,0%,100%,.65),hsla(0,0%,100%,0) 45%) 0 0/280px 280px repeat,radial-gradient(12px 12px at 160px 40px,hsla(0,0%,100%,.5),hsla(0,0%,100%,0) 40%) 0 0/350px 350px repeat;animation:twinkle 8s ease-in-out infinite;opacity:.6;z-index:0}.starfield>:not(.fixed){position:relative;z-index:1}@keyframes twinkle{0%,to{opacity:.5}50%{opacity:.85}}