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

html,
body{
    width:100%;
    height:100%;
}

/* BACKGROUND */
body {
    background: #000;
    font-family: Arial, Helvetica, sans-serif;
    overflow-x: hidden;
}

/* GALAXY PAGE WRAPPER */
.galaxy-page {
    width: 100%;
    min-height: 850vh;
    background-image: url("images/blueBlackUniverse.jpg");
    background-repeat: repeat-y;
    background-position: center top;
    background-attachment: scroll;
    background-size: 100% auto;
}

/* HERO */
.hero{
    min-height:100vh;
    display:flex;
    justify-content:center;
    align-items:center;
    padding:2rem;
}

/*
    MASTER SCALING CONTAINER

    Everything sizes from this container,
    so logo and PARTY remain proportional
    on all screen sizes.

*/.logo-brand-container{
    width: 95 vw;
    max-width: 1800px;
    display: flex;
    flex-direction: column;
    align-items: center; /* Horizontally centers flex children */
    justify-content: center;
    margin-left: auto;   /* Centers the container itself inside .hero */
    margin-right: auto;
}

.logo-wrapper {
    width: 100%;
    display: flex;
    justify-content: center; /* Horizontally centers the logo inside */
    align-items: center;     /* Vertically centers the logo inside */
    margin-bottom: clamp(0.25rem, 1vw, 1rem);
}

/* LOGO - Centered horizontally */
.logo{
    width: 100%;
    max-width: none;
    height: auto;
    display: block;
    mix-blend-mode: screen;

    /* Explicit 4-value margin: top right bottom left */
    margin: 0 auto clamp(0.25rem, 1vw, 1rem) auto;
    
    /* Forces flexbox to center this specific element */
    align-self: center;

    filter: drop-shadow(0 0 25px rgba(255,255,255,.35));
}

/* PARTY SIGN - Sized relative to maintain balance */
.party-sign{
    width: 100%;

    display: flex;
    justify-content: center;
    align-items: center;

    font-size: clamp(2rem, 8.5vw, 6.5rem); /* Slightly re-balanced to keep logo dominant */
    font-weight: 700;
    letter-spacing: 0.08em;
    line-height: 1;
    white-space: nowrap;
}

.party-sign span{
    transition:
        opacity 0.6s ease,
        color 0.6s ease,
        text-shadow 0.6s ease;
}

/* ON STATE */
.party-sign span.on{
    opacity:1;
    color:#ffffff;

    text-shadow:
        0 0 5px rgba(255,255,255,.9),
        0 0 10px rgba(255,255,255,.8),
        0 0 20px rgba(255,100,255,.5),
        0 0 30px rgba(0,200,255,.35);
}

/* OFF STATE */
.party-sign span.off{
    opacity:.25;
    color:transparent;
    -webkit-text-stroke:1px rgba(255,255,255,.65);
    text-shadow:none;
}

/* TABLETS */
@media (max-width:768px){

    .logo-brand-container{
        width:88vw;
    }

    .party-sign{
        font-size:clamp(1.6rem, 10vw, 4rem);
    }
}

/* SMALL PHONES */
@media (max-width:480px){

    .logo-brand-container{
        width:92vw;
    }

    .party-sign{
        letter-spacing:0.04em;
    }
}