div#controlBtns {
    width: 100px;
    margin: 50px auto 0 auto;
}

button.controlBtn {
    display: none;

    width: 50px;
    height: 50px;

    border: none;
    border-radius: 3px;

    background-color: var(--grayColorWeak);

    cursor: pointer;

    transition-property: opacity background-color;
    transition-duration: 0.4s;

    animation-name: displayMuteBtn;
    animation-duration: 0.8s;
    animation-fill-mode: both;
}

button.controlBtn > i {
    color: var(--grayColorLighten);

    transition-property: color;
    transition-duration: 0.4s;
}

button.controlBtn:hover { background-color: var(--lightColorDarken); }

button.controlBtn:hover > i { color: var(--darkColor); }

button.controlBtn:focus { outline: none; }

@keyframes displayMuteBtn {
    from {
        margin-top: 20px;
        opacity: 0;
    }

    to {
        margin-top: 0px;
        opacity: 1;
    }
}