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

body{

    overflow:hidden;
    font-family:'Pixelify Sans',sans-serif;

}

.scene{

    position:relative;

    width:100vw;
    height:100vh;

    background:url("assets/background/scene.png") center center/cover no-repeat;

}

/* ---------------- Speech ---------------- */

.speech{

    position:absolute;

    left:50%;
    top:120px;

    transform:translateX(-50%);

    width:1000px;
    max-width:90vw;

    background:white;

    border:6px solid #ff6ea8;

    border-radius:30px;

    padding:35px;

    z-index:100;

}

.speech h1{

    text-align:center;

    color:#d74b83;

    font-size:2rem;

}

/* ---------------- Buttons ---------------- */

.buttons{

    position:absolute;

    left:50%;
    top:330px;

    transform:translateX(-50%);

    display:flex;

    gap:35px;

    z-index:100;

}

button{

    border:none;

    border-radius:18px;

    padding:18px 42px;

    font-size:1.3rem;

    font-family:'Pixelify Sans',sans-serif;

    cursor:pointer;

}

#yes{

    background:#ff67a7;
    color:white;

}

#no{

    background:white;
    color:#444;

}

/* ---------------- LEFT DOG ---------------- */

#dog-left{

    position:absolute;

    left:28%;

    bottom:95px;

    width:340px;

    image-rendering:pixelated;

    animation:leftBob 2.5s ease-in-out infinite;

    z-index:20;

}

/* ---------------- RIGHT DOG ---------------- */

#dog-right{

    position:absolute;

    right:28%;

    bottom:95px;

    width:340px;

    transform:scaleX(-1);

    image-rendering:pixelated;

    animation:rightBob 2.5s ease-in-out infinite;

    z-index:20;

}

/* ---------------- HEART ---------------- */

.heart{

    position:absolute;

    left:50%;

    bottom:245px;

    transform:translateX(-50%);

    width:120px;

    animation:pulse 1.5s infinite;

    z-index:30;

}

@keyframes leftBob{

    0%,100%{transform:translateY(0);}
    50%{transform:translateY(-8px);}

}

@keyframes rightBob{

    0%,100%{transform:scaleX(-1) translateY(0);}
    50%{transform:scaleX(-1) translateY(-8px);}

}

@keyframes pulse{

    0%,100%{

        transform:translateX(-50%) scale(1);

    }

    50%{

        transform:translateX(-50%) scale(1.18);

    }

}

/* ---------------- Flying Dachshunds ---------------- */

.running-dog{

    position:fixed;

    width:70px;

    image-rendering:pixelated;

    pointer-events:none;

    z-index:5;

    animation:runAcross linear forwards;

}

.running-dog.flip{

    transform:scaleX(-1);

}

@keyframes runAcross{

    from{

        transform:translateX(-120px);

    }

    to{

        transform:translateX(calc(100vw + 120px));

    }

}

/* ---------------- Floating Bubbles ---------------- */

.bubble{

    position:fixed;

    bottom:-80px;

    border-radius:50%;

    pointer-events:none;

    z-index:3;

    background:rgba(255,255,255,.28);

    border:2px solid rgba(255,255,255,.55);

    backdrop-filter:blur(2px);

    animation:floatBubble linear forwards;

}

.bubble::after{

    content:"";

    position:absolute;

    top:18%;
    left:18%;

    width:28%;
    height:28%;

    border-radius:50%;

    background:rgba(255,255,255,.7);

}

@keyframes floatBubble{

    0%{

        transform:
            translateY(0)
            translateX(0);

        opacity:0;

    }

    10%{

        opacity:1;

    }

    100%{

        transform:
            translateY(-120vh)
            translateX(var(--drift));

        opacity:0;

    }

}