body { 
    margin:0; 
    overflow:hidden; 
    font-family:Arial,sans-serif; 
    color:white; 
    background:black; 
}

#bg { 
    position:fixed; 
    width:100%; 
    height:100%; 
    background-size:cover; 
    background-position:center; 
    filter:brightness(.45); 
    z-index:-3; 
}

#enter { 
    position:fixed; 
    width:100%; 
    height:100%; 
    display:flex; 
    align-items:center; 
    justify-content:center; 
    background:black; 
    z-index:10; 
    font-family:'Press Start 2P'; 
    font-size:22px; 
    letter-spacing:3px; 
    cursor:pointer; 
    transition:opacity 1s; 
}

.enter-text { 
    animation:pulse 2s infinite; 
}

@keyframes pulse { 
    0% { opacity:.4 } 
    50% { opacity:1 } 
    100% { opacity:.4 } 
}

.hidden { display:none; }

.banner-container {
    position:absolute;
    top:50%;           /* Center vertically */
    left:50%;          /* Center horizontally */
    width:340px;       /* Match card width */
    height:230px;      /* Banner height */
    transform:translate(-50%, -50%); /* Center the container */
    overflow:hidden;
    pointer-events:none;
    z-index:-1;        /* Behind the card */
}

.banner-window { 
    position:absolute; 
    width:120%; 
    height:120%; 
    transition:transform .08s; 
    border-radius:12px; 
    top:0; 
    left:0; 
    pointer-events:none; 
    background-size:cover; 
    background-position:center; 
    opacity:0.25; 
}

.banner-blur { 
    backdrop-filter:blur(20px); 
    background-color:rgba(255,255,255,0.1); 
}

.card { 
    position:absolute; 
    top:50%; 
    left:50%; 
    transform:translate(-50%, -50%); 
    transform-style: preserve-3d; 
    transition: transform 0.1s ease-out; 
    background:rgba(20,20,20,.65); 
    backdrop-filter:blur(12px); 
    border-radius:18px; 
    padding:40px; 
    width:340px; 
    text-align:center; 
    box-shadow:0 0 40px rgba(0,0,0,.6); 
}

.glow { 
    box-shadow:0 0 20px white,0 0 50px white; 
}

.avatar { 
    width:90px; 
    height:90px; 
    border-radius:50%; 
    margin-top:-70px; 
    border:3px solid white; 
}

.links { 
    margin-top:15px; 
    display:flex; 
    flex-direction:column; 
    gap:8px; 
}

.links a { 
    text-decoration:none; 
    color:white; 
    background:rgba(255,255,255,.08); 
    padding:8px; 
    border-radius:8px; 
    transition:.2s; 
}

.links a:hover { 
    background:rgba(255,255,255,.2); 
    transform:scale(1.05); 
}

.bio { 
    margin-top:10px; 
    opacity:.85; 
}

#particles { 
    position:fixed; 
    top:0; 
    left:0; 
    width:100%; 
    height:100%; 
    z-index:-2; 
    pointer-events:none; 
}

#visualizer { 
    position:fixed; 
    bottom:0; 
    width:100%; 
    height:120px; 
    z-index:-1; 
}

.spark { 
    position:fixed; 
    width:5px; 
    height:5px; 
    background:white; 
    border-radius:50%; 
    pointer-events:none; 
    animation:sparkFade .8s linear forwards; 
}

@keyframes sparkFade { 
    to { opacity:0; transform:scale(2); } 
}