body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    font-family: Arial, sans-serif;
    overflow: hidden;
    background: black;
    color: white;
}
.stars {
    position: absolute;
    width: 100%;
    height: 100%;
    background: transparent;
    box-shadow: 
        100px 200px white,
        300px 400px white,
        500px 100px white,
        800px 300px white,
        1200px 200px white,
        200px 700px white;
    animation: twinkle 2s infinite alternate;
}
@keyframes twinkle {
    from { opacity: 0.3; }
    to { opacity: 1; }
}
.aurora {
    position: absolute;
    width: 200%;
    height: 200%;
    background: radial-gradient(ellipse at center, rgba(0,255,150,0.3) 0%, transparent 70%),
                radial-gradient(ellipse at bottom, rgba(0,150,255,0.2) 0%, transparent 80%);
    animation: moveAurora 10s infinite linear;
}
@keyframes moveAurora {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
.container {
    position: relative;
    z-index: 2;
    text-align: center;
    top: 30%;
}
.animated-text {
    font-size: 3em;
    background: linear-gradient(270deg, #ff0000, #00ff00, #0000ff, #ffff00);
    background-size: 800% 800%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: colorMove 5s infinite linear;
}
@keyframes colorMove {
    0% { background-position: 0% 50%; }
    100% { background-position: 100% 50%; }
}
.buttons {
    margin-top: 40px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}
.btn-container {
    text-align: center;
    width: 250px;
}
.btn {
    display: inline-block;
    padding: 12px 24px;
    font-size: 1.2em;
    background: rgba(255, 255, 255, 0.2);
    border: 2px solid white;
    border-radius: 10px;
    color: white;
    text-decoration: none;
    transition: 0.3s;
}
.btn:hover {
    background: white;
    color: black;
}