html {
  background-color: #136e13;
}


ul {
  position: relative;
    display: block;
    text-align: center;
  }

  li {
    width: auto;
    display: inline;
    vertical-align: middle;
    margin-left: 20px;

  }

  a{
    text-decoration: none;
    color: #000;
    font-size: 16px;
    font-family: monospace;
    height: 50px;
    width: 100px;
    background-color: #00b300;
    border-radius: 25px;
    display: inline-flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
  }

audio{width: 100px;}
audio::-webkit-media-controls-panel{background:#00b300}
audio::-webkit-media-controls-play-button{margin-left:18px}
audio::-webkit-media-controls-timeline{display:none;}
audio::-webkit-media-controls-current-time-display{display:none;}
audio::-webkit-media-controls-time-remaining-display{display:none;}
audio::-webkit-media-controls-mute-button {display: none;}
audio::-webkit-media-controls-volume-slider {display: none;}
audio::-webkit-media-controls-volume-slider-container{display: none;}


  transform : translateX(-50%);
}

@media only screen and (max-width: 600px) {
  audio {
    width: 300px;
  }

    a{
    font-size: 30px;
    width: 300px;
}
}