*, *::before, *::after { box-sizing: border-box; }

body {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background: #d3d3d3;
    color: #414141;
    padding: 5%;
}

#board {
    width: auto;
    background: #343a40;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    border-radius: 8px;
    box-shadow: 20px 20px 20px -10px rgba(0,0,0,.85);
    transition: background 300ms;
}

#board.correct {
    background: cornflowerblue;
    pointer-events: none;
}

#board.wrong {
    background: rgb(255, 75, 75);
    pointer-events: none;
}

#board li {
    list-style: none;
    width: 85px;
    height: 85px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    margin: 4px;
    cursor: pointer;
    background: #fefae0;
    box-shadow: 0 12px 30px -20px #fefae0;
    transition: all 250ms;
}

#board li:hover {
    background: #faedcd;
    transform: scale(1.02);
    border: 1px solid yellow;
    box-shadow: 0 8px 8px -8px #faedcd;
  }

  #board li.play-sound {
    width: 80%;
    background-color: rgb(243, 136, 64);
    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;
  }

  select, option {
    height: auto;
    width: auto;
    padding: 8px 15px;
    font-family: 'Rubik', sans-serif;
    font-size: 20px;
    background: #343a40 ;
    color: wheat;
    border-radius: 8px;
    outline: none;
    box-shadow: 0 15px 20px -10px rgba(0,0,0,.85);
    cursor: pointer;
    transition: box-shadow 300ms;
}
select:hover {
  box-shadow: 0 15px 20px -12px rgba(0,0,0,.85); 
}