#pagewrapper-home {
    overflow: hidden !important;
}

main {
    position: absolute;
    top: 0;
    height: 100vh;
    width: 100vw;
}

/* Background objects */
#background {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#sealing {
    position: absolute;
    width: 100%;
    height: 100%;
        object-fit: cover;
    top: 0;
    z-index: 2;
}

#counter {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    top: 0;
    left: 0;
    z-index: 4;
    user-select: none;
}

#main-character {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    top: 0;
    left: 0;
    z-index: 3;
}

#customer-in {
    position: absolute;
    width: 58vh;
    height: 58vh;
    object-fit: cover;
    top: 280px;
    right: -58vh; /* Start off-screen on the right */
    z-index: 6;
    transform: scaleX(-1); /* Flip horizontally */
}

#customer-in:hover {
    cursor: pointer;
}

.customer-image-1.stopped {
    content: url('../../green_girl_walk/green_girl_walk.svg') !important;
}

.customer-image-2.stopped {
    content: url('../../blue_girl_walk/blue_girl_walk.svg') !important;
}

.customer-image-3.stopped {
    content: url('../../brown_girl_walk/brown_girl_walk.svg') !important;
}

@keyframes moveFromRightToLeft {
    0% {
        right: -58vh; /* Start off-screen on the right */
    }
    100% {
        right: 50%; /* Move to the left edge */
    }
}

@keyframes moveFromLeftToRight {
    0% {
        right: 50%;
    }
    100% {
        right: -58vh;
    }
}

/* Chat message */

.chat {
    display: none;
}

.chat.is-active {
    display: block;
    position: absolute;
    top: 0;
    z-index: 9;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
}

.chat:hover {
    cursor: pointer;
}

.chat .text-box {
    position: absolute;
    z-index: 7;
    bottom: 0;
    width: 1000px;
    height: 220px;
    background-color: var(--turqoise);
    margin: 2.6rem;
}

.chat .text-box .container {
    margin: 1.3rem;
    padding: 0;
    border: 2px dashed #677e79;
    width: calc(100% - 2.6rem);
    height: calc(100% - 2.6rem);
}

.chat .text-box .container h2 {
    margin: 1.3rem;
    color: var(--white);
    font-size: var(--font-size-lg);
    font-family: var(--heading);
}

.chat .text-box .container h2#opening{
    display: none;
}

.chat .text-box .container h2#closing{
    display: none;
}