style.css

html, body {
    height: 100%;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background: #CDDD39;
}

#board {
    width: 290px;
    padding: 10px;
    background: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    border: 1px solid #000000;
    border-radius: 8px;
    transition: background 300ms;
}

#board.correct {
    background: green;
    pointer-events: none;
}
#board.wrong {
    background: orangered;
    pointer-events: none;
}

#board li {
    list-style: none;
    width: 80px;
    height: 80px;
    border: 1px solid #000000;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 67px;
    border-radius: 8px;
    margin: 6px;
    cursor: pointer;
    background: #ffffff;
}
#board li.play-sound {
    flex-grow: 0.9;
    background-color: green;
    background-image: url('data:image/svg+xml;utf8,<svg style="enable-background:new 0 0 512 512;" version="1.1" viewBox="0 0 512 512" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g><path d="M268.5,121.2c-4.1-1.4-8.7-0.6-12.1,2.1l-97.9,77.6h-46.4c-12.3,0-22.2,9.9-22.2,22.2v65.9c0,12.3,9.9,22.2,22.2,22.2h46.4 l97.9,77.6c3.4,2.7,8,3.5,12.1,2.1c9.4-3.2,16.2-12.2,16.2-22.7V143.8C284.7,133.3,277.9,124.4,268.5,121.2z"/><g><path d="M313.4,323.5c-2.3,0-4.7-0.8-6.6-2.5c-4.1-3.6-4.5-10-0.9-14.1c12.4-14.1,19.2-32.1,19.2-50.9c0-18.7-6.8-36.8-19.2-50.9 c-3.6-4.1-3.2-10.5,0.9-14.1c4.1-3.6,10.5-3.2,14.1,0.9c15.6,17.7,24.2,40.5,24.2,64.1c0,23.6-8.6,46.4-24.2,64.1    C318.9,322.3,316.2,323.5,313.4,323.5z"/></g><g><path d="M344.5,346.2c-2.2,0-4.5-0.7-6.4-2.3c-4.3-3.5-4.9-9.8-1.3-14.1c16.9-20.5,26.2-46.5,26.2-73.1c0-27.3-9.7-53.7-27.3-74.4 c-3.6-4.2-3.1-10.5,1.1-14.1c4.2-3.6,10.5-3.1,14.1,1.1c20.7,24.3,32.1,55.4,32.1,87.4c0,31.3-10.9,61.8-30.8,85.9 C350.3,345,347.4,346.2,344.5,346.2z"/></g><g><path d="M374.6,370.7c-2.2,0-4.5-0.7-6.4-2.3c-4.3-3.5-4.9-9.8-1.3-14.1c22.7-27.5,35.2-62.3,35.2-98c0-36-12.7-71-35.7-98.6 c-3.5-4.2-3-10.5,1.3-14.1c4.2-3.5,10.5-3,14.1,1.3c26,31.2,40.3,70.7,40.3,111.4c0,40.3-14.1,79.6-39.7,110.7 C380.4,369.4,377.5,370.7,374.6,370.7z"/></g></g></svg>');
    background-position: center center;
    background-repeat: no-repeat;
}