Discord Streamkit Overlay: Majora's Mask

/* Browser Source URL: https://streamkit.discordapp.com/overlay/voice/<SERVER ID HERE>/<VOICE CHANNEL ID HERE> */

@keyframes speaking {
    0% { margin-bottom: 0px; }
    50% { margin-bottom: var(--padding); }
    100% { margin-bottom: 0px; }
}

* {
    box-sizing: border-box;
}

html, body {
    width: 100%;
    height: 100%;

    --position-horizontal: start;
    --position-vertical: end;

    --padding: 10px;
    --size: 70px;
    --radius: calc(var(--padding) * 1);

    --font: 'Roboto Mono';
    --avatar-border: #A060F0;
    --avatar-back: #A060F040;
}

body {
    padding: var(--padding);
    display: flex;
    justify-content: var(--position-horizontal);
    align-items: var(--position-vertical);
}

.voice_states {
    display: flex;
    flex-direction: row;
    align-items: end;
    margin: 0;
    padding: 0;
}

.voice_state {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    height: calc(var(--size) - (var(--padding) / 2));
    background-color: #FFF4;
    border-radius: var(--radius);
    transition: 0.25s all ease-in-out;
}

.voice_state:not(:first-child) {
    margin-left: var(--padding);
}

.voice_avatar {
    margin: 0;
    padding: 0;
    width: calc(var(--size) - (var(--padding) / 2));
    height: calc(var(--size) - (var(--padding) / 2));
    border-color: transparent;
    border-radius: var(--radius);
    filter: grayscale(1);
    transition: 0.25s all ease-in-out;
}

.voice_username {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 var(--padding);
    height: 100%;
}

.voice_username > span {
    padding: 0;
    font-family: var(--font), sans-serif;
    font-size: 20px!important;
    line-height: initial;
    background: transparent!important;
    text-shadow: 1px 1px 0 #000;
}

.wrapper_speaking.voice_state {
    background-color: var(--avatar-back);
}
.wrapper_speaking.voice_state .voice_avatar {
    margin-bottom: var(--padding);
    border-color: var(--avatar-border);
    filter: grayscale(0);
    /*animation: speaking infinite 0.5s;*/
}

/*
If you want to give a specific user a specific color instead of the default
copy the two rules here and put in their unique ID and set the colors.

.wrapper_speaking.voice_state[data-userid="<ID HERE>"] { background-color: #0008; }
.wrapper_speaking.voice_state[data-userid="<ID HERE>"] .voice_avatar { border-color: #000; }
*/

/* Jimmie1717 */
.wrapper_speaking.voice_state[data-userid="82698809678757888"] { background-color: #20609080; }
.wrapper_speaking.voice_state[data-userid="82698809678757888"] .voice_avatar { border-color: #206090; }