.stop-scrolling {
    max-height: 100%;
    overflow: hidden;
    background-color: black;
}

.video-layer {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.video-player {
    width: 380px;
    height: 660px;
    background-color: black;
    cursor: pointer;
    transform: translate(10px, 8px) scale(1.02);
}

.background-layer {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: none;
}

.background-layer img {
    max-width: 100%;
    max-height: 100%;
    pointer-events: none;
}

.ui-layer {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
}

#textbox,
.bubble {
    pointer-events: auto;
}

#current-name {
    color: #ff3366;
    font-size: 27px;
    font-weight: bold;
    position: absolute;
    inset-inline-start: 43%;
    inset-block-start: 8%;
    z-index: 2;
    text-shadow:
        0 0 20px #ff3366,
        0 0 40px #ff3366;
    animation: glow 2s ease-in-out infinite alternate;
}

@keyframes glow {
    to {
        text-shadow:
            0 0 30px #ff3366,
            0 0 50px #ff3366;
    }
}

.bubble {
    transform: scale(0.33);
    position: absolute;
    z-index: 3;
}

#vilem {
    inset-inline-start: 7%;
    inset-block-start: 24%;
}
#byung {
    inset-inline-start: 14%;
    inset-block-start: 29%;
}
#forrest {
    inset-inline-start: 9%;
    inset-block-start: 43%;
}
#joseph {
    inset-inline-start: 15%;
    inset-block-start: 51%;
}
#dierk {
    inset-inline-start: 11%;
    inset-block-start: 66%;
}
#venkatesh {
    inset-inline-start: 66%;
    inset-block-start: 23%;
}
#douglas {
    inset-inline-start: 72%;
    inset-block-start: 28%;
}
#satoshi {
    inset-inline-start: 67%;
    inset-block-start: 42%;
}
#wendy {
    inset-inline-start: 71%;
    inset-block-start: 52%;
}
#joker {
    inset-inline-start: 66%;
    inset-block-start: 67%;
}