* {
    user-select: none;
}
html, body {
    overflow: hidden;
}
main {
    width: 85%;
    height: 35rem;
    display: flex;
    justify-content: space-evenly;
    position: absolute;
    left: 50%;
    top: 20rem;
    transform: translateX(-50%);
    color: white;

    background-color: rgba(255, 255, 255, .05);
    backdrop-filter: blur(15px);
    border-radius: 15px;
}

main div {
    display: flex;
    justify-content: center;
    margin-bottom: 4rem;
    position: relative;
    transition: .3s all;
}
main div h4 {
    position: absolute;
    bottom: -3rem;
    font-size: 1.8rem;
    text-shadow: 0 0 10px white;
}

main div span {
    display: flex;
    column-gap: 2rem;
}

main div span object {
    top: 50%;
    transform: translateY(-50%);
    position: relative;
    height: 22rem;
    width: 5rem;
    display: block;
    border-radius: 100px;
}

main .green object {
    background-color: rgb(128, 255, 0);
    box-shadow: 0 0 20px 5px rgb(128, 255, 0);
}

main .pink object {
    background-color: rgb(255, 0, 217);
    box-shadow: 0 0 20px 5px rgb(255, 0, 217);
}

main .yellow object {
    background-color: rgb(234, 255, 0);
    box-shadow: 0 0 20px 5px rgb(234, 255, 0);
}

main .blue object {
    background-color: rgb(0, 81, 255);
    box-shadow: 0 0 20px 5px rgb(0, 81, 255);
}

main div {
    opacity: 40%;
}

main .active {
    opacity: 100%;
}

main .active span > .first {
    animation: speaking_child_1 .8s infinite;
}

main .active span > .last {
    animation: speaking_child_2 .6s infinite;
}

main .active span > .middle {
    animation: speaking .7s infinite;
}

main .side {
    animation-fill-mode: forwards;
    height: 15rem;
}

main.active {
    animation: .5s music infinite;
}