@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@500&display=swap');

*{margin:0;padding:0;box-sizing:border-box;}

html,body{
    font-family:'Orbitron',sans-serif;
    min-height:100%;
    width:100%;
    cursor:auto;
    background:#000010;
    color:#00f0ff;
}

body{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;
    position:relative;
    overflow-x:hidden;
}

/* Hologram Header */
.holo-header{
    margin-top:50px;
    font-size:6vw;
    text-align:center;
    color:#00f0ff;
    text-shadow:0 0 5px #00f0ff,0 0 15px #00ffff,0 0 30px #00ffff,0 0 60px #00ffff;
    animation:flicker 2s infinite;
    position:relative;
    z-index:2;
}

@keyframes flicker{
    0%,18%,22%,25%,53%,57%,100%{opacity:1;}
    20%,24%,55%{opacity:0.5;}
}

/* Links */
.links{
    margin-top:80px;
    display:flex;
    flex-direction:column;
    gap:25px;
    z-index:2;
    position:relative;
    width:90%;
    max-width:400px;
}

.links a{
    text-decoration:none;
    background:linear-gradient(135deg,#00f0ff,#00ffff,#00bfff);
    color:#fff;
    padding:15px 25px;
    border-radius:15px;
    font-size:5vw;
    text-align:center;
    box-shadow:0 0 10px #00f0ff,0 0 20px #00ffff,0 0 40px #00ffff;
    transition: transform 0.3s, box-shadow 0.3s;
    position:relative;
    overflow:hidden;
}

.links a::before{
    content:'';
    position:absolute;
    top:0; left:-75%;
    width:50%;
    height:100%;
    background:linear-gradient(to right, rgba(255,255,255,0.3), rgba(255,255,255,0));
    transform:skewX(-25deg);
    transition:0.5s;
}

.links a:hover::before{
    left:125%;
}

.links a:hover{
    transform:scale(1.05) translateY(-3px);
    box-shadow:0 0 20px #00f0ff,0 0 40px #00ffff,0 0 80px #00ffff;
}

/* Footer */
footer{
    margin-top:80px;
    margin-bottom:50px;
    color:#00ffff;
    font-size:14px;
    text-align:center;
    z-index:2;
    position:relative;
    text-shadow:0 0 5px #00ffff,0 0 10px #00ffff,0 0 20px #00ffff;
}

/* Particle canvas & Nebula balls */
canvas{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:0;
    pointer-events:none;
}

.nebula-ball{
    position:fixed;
    border-radius:50%;
    width:120px;
    height:120px;
    background:radial-gradient(circle,#00f0ff80 0%,#0000 70%);
    animation:float 10s infinite alternate ease-in-out;
    z-index:1;
}

.nebula-ball.left{left:30px; top:200px; animation-delay:0s;}
.nebula-ball.right{right:30px; top:400px; animation-delay:2s;}

@keyframes float{
    0%{transform:translateY(0px) translateX(0px);}
    50%{transform:translateY(-50px) translateX(30px);}
    100%{transform:translateY(0px) translateX(-20px);}
}

body::before{
    content:"";
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:radial-gradient(circle at 20% 30%, #001033, #000010 70%);
    z-index:-1;
    animation:nebulaBG 20s infinite alternate;
}

@keyframes nebulaBG{
    0%{background:radial-gradient(circle at 20% 30%, #001033, #000010 70%);}
    50%{background:radial-gradient(circle at 80% 70%, #002050, #000010 70%);}
    100%{background:radial-gradient(circle at 40% 40%, #003366, #000010 70%);}
}

/* Responsive */
@media (min-width:768px){.links a{font-size:18px; padding:18px 40px;}}
@media (min-width:1024px){.links a{font-size:22px; padding:20px 50px;}}