:root {
    --button-height: 2rem;
    --button-color: #edd;
}

html {
    font-size: 30px;
}

body {
    padding: 0;
    margin: 0;
    background: #000030;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.fake-player {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 4rem;
    heigth: 4rem;
    padding: 2rem;
    border: 0.2rem solid var(--button-color);
    border-radius: 50%;
    filter: drop-shadow(0 0 3.1rem rgba(255,255,255, 0.8));
}

button {
    margin: 0;
    padding: 0;
}

.play {
    height: 0;
    width: 0;
    margin-left: calc(2 * 0.14 * var(--button-height));
    /*margin-left: 17px;*/
    background: none;
    border: none;
    border-top: var(--button-height) solid transparent;
    border-bottom: var(--button-height) solid transparent;
    border-left: calc(var(--button-height) * 2 * 0.86) solid var(--button-color);
    
}

.pause {
    position: relative;
    background: none;
    border: none;
    height: calc(var(--button-height) * 2);
    width: calc(var(--button-height) * 2 * 0.86);
    &:before, &:after {
        content: "";
        position: absolute;
        top: 0;
        height: 100%;
        width: 33%;
        background: var(--button-color);
    }
    &:before {
        left: 0;
    }
    &:after {
        right: 0;
    }
}

.hidden {
    display:none;
}

const player = document.querySelector('.fake-player');

function clickHandler () { 
    const buttons = Array.from(this.children);
    buttons.forEach(button => button.classList.toggle('hidden'))
};

player.addEventListener('click', clickHandler);