/* ——— PAGE BASE ——— */
body {
    margin: 0;
    padding: 0;
    background: black;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    overflow: hidden;
}

/* ——— BACKGROUND IMAGE ——— */
.bg {
    position: fixed;
    top: 0;
   left: 0;
   right: 0;
   bottom: 0;
    background: url('background.png') center / cover no-repeat;
    z-index: -10;
    animation: bgfloat 12s ease-in-out infinite;
}

@keyframes bgfloat {
    0%   { transform: translateY(0px); }
    50%  { transform: translateY(-10px); }
    100% { transform: translateY(0px); }
}

/* ——— MAIN CONTAINER ——— */
.container {
    position: relative;
    width: 900px;
    height: auto;
    display: inline-block;
}

/* ——— MAIN IMAGE (WELCOME) ——— */
.main-img {
    width: 900px;
    height: auto;
    display: block;
    animation: floatMain 4s ease-in-out infinite;
}

@keyframes floatMain {
    0%   { transform: translateY(0px); }
    50%  { transform: translateY(-12px); }
    100% { transform: translateY(0px); }
}

/* ——— ENTER BUTTON ——— */
.enter {
    position: absolute;
    width: 200px;
    height: auto;

    /* You can adjust these to match where your star is */
    left: 350px;
    bottom: 60px;

    cursor: pointer;
    z-index: 10;
}

/* ——— SEN PNG ——— */
.sen {
    position: absolute;
    width: 200px;
    height: auto;

    /* Adjust these for placement */
    left: 40px;
    bottom: 80px;

    animation: floatMain 4s ease-in-out infinite;
    z-index: 9;
}

/* ——— STAR FLOATING ——— */
.star {
    position: absolute;
    width: 200px;
    height: auto;
    animation: floatStars 7s ease-in-out infinite;
    z-index: 5;
    pointer-events: none;
}

@keyframes floatStars {
    0%   { transform: translateY(0px); }
    50%  { transform: translateY(-6px); }
    100% { transform: translateY(0px); }
}

/* ——— STAR POSITIONS (ADJUST IF NEEDED) ——— */
.s1 { top: 50px; left: 60px; }
.s2 { top: 120px; left: 700px; }
.s3 { top: 350px; left: 50px; }
.s4 { top: 400px; left: 780px; }
.s5 { top: 200px; left: 300px; }
.s6 { top: 500px; left: 620px; }
.s7 { top: 600px; left: 200px; }
.s8 { top: 450px; left: 430px; }