:root {
    --glow-rgb: 245 245 245;
    --light-gold-rgb: 249 181 51;
    --dark-gold-rgb: 215 147 23;
    --primary-stripe-rgb: 230 230 230;
    --secondary-stripe-rgb: 240 240 240;
}

@keyframes pan {
    0% { background-position: 0% 0%; }
    100% { background-position: 100% 0%; }
}

@keyframes textShine {
    0% { background-position: 0% center; }
    100% { background-position: 100% center; }
}

@keyframes twinkle {
    0%, 100% { opacity: 0.1; }
    50% { opacity: 0.2; }
}

body {
    height: 100vh;
    width: 100vw;
    margin: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    font-family: 'Source Sans Pro', sans-serif;
    font-weight: bold;
}

/* The stars background */
#star-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 0; /* behind */
    background: radial-gradient(rgb(var(--light-gold-rgb)), rgb(var(--dark-gold-rgb)));
}

/* Moving star pattern */
#star-pattern {
    background-image: url("./star-pattern.svg");
    background-size: 10%;
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    width: 100%;
    height: 100%;
    min-width: 1200px;
    opacity: 0.1;
    animation:
            pan 180s linear infinite, /* existing slow movement */
            twinkle 5s ease-in-out infinite; /* new twinkle effect */
    will-change: background-position;
}

/* Darker gradient overlay */
#star-gradient-overlay {
    background: radial-gradient(circle, transparent 75%, rgb(var(--dark-gold-rgb)));
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.9;
    z-index: 1;
}

/* The centered container */
.container {
    position: relative;
    z-index: 2; /* above background */
    height: auto; /* let it size naturally */
    width: 50%;
    display: flex;
    flex-direction: column; /* <--- STACK instead of side-by-side */
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.31);
    border-radius: 16px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    border: 1px solid rgba(0, 0, 0, 0.35);
    padding: 40px; /* a bit of space inside */
}


.profile-picture img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
}

/* The text */
.username {
    font-size: 50px;
    background: linear-gradient(
            to right,
            #7953cd 20%,
            #00affa 30%,
            #0190cd 70%,
            #764ada 80%
    );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-fill-color: transparent;
    background-size: 500% auto;
    animation: textShine 5s ease-in-out infinite alternate;
}