body {
    /* display: grid
    grid-template-columns: 100%
    grid-template-rows: 1fr 1fr 1fr 1fr */
    height: 100vh;
    width: 100vw;
    margin: 0px;
}

.audio-player {
    width: 100vw;
    height: 30 rem;
    --player-button-width: 3em;
    --sound-button-width: 2em;
    --space: .5em;  
    --tw-bg-opacity: 1;
    --acc-background: rgb(239 239 239/var(--tw-bg-opacity));
    --acc-background: #d9d9d9;
    --acc-button: rgb(255 255 255/var(--tw-bg-opacity));
    --acc-black: rgb(0 0 0/var(--tw-bg-opacity));
}

.icon-container {
    width: 100%;
    height: 100%;
    background-color: #000000;
    background-color: var(--acc-black);
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
}

.audio-icon {
    width: 90%;
    height: 90%;
}

.controls {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
    /* margin-top: 10px; */
}

.player-button {
    background-color: transparent;
    border: 0;
    width: var(--player-button-width);
    height: var(--player-button-width);
    cursor: pointer;
    padding: 0;
    box-shadow: 0 0 20px 2px #00000040;
}


.timeline {
    -webkit-appearance: none;
    width: calc(100% - (var(--player-button-width) + var(--sound-button-width) + var(--space)));
    height: .5em;
    background-color: var(--acc-background);
    border-radius: 5px;
    background-size: 0% 100%;
    background-image: linear-gradient(#00000080, var(--acc-background));
    background-repeat: no-repeat;
    margin-right: var(--space);
    width: 100vw;
  }
  
  .timeline::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 1em;
    height: 1em;
    border-radius: 50%;
    cursor: pointer;
    opacity: 0;
    transition: all .1s;
    background-color: var(--acc-background);
  }
  
  .timeline::-moz-range-thumb {
    -webkit-appearance: none;
    width: 1em;
    height: 1em;
    border-radius: 50%;
    cursor: pointer;
    opacity: 0;
    transition: all .1s;
    background-color: var(--acc-background);
  }
  
  .timeline::-ms-thumb {
    -webkit-appearance: none;
    width: 1em;
    height: 1em;
    border-radius: 50%;
    cursor: pointer;
    opacity: 0;
    transition: all .1s;
    background-color: var(--acc-background);
  }
    
  .timeline::-webkit-slider-runnable-track {
    -webkit-appearance: none;
    box-shadow: none;
    border: none;
    background: transparent;
  }
  
  .timeline::-moz-range-track {
    -webkit-appearance: none;
    box-shadow: none;
    border: none;
    background: transparent;
  }
  
  .timeline::-ms-track {
    -webkit-appearance: none;
    box-shadow: none;
    border: none;
    background: transparent;
  }
  
  iframe {
    width: 100vw;
    height: 100vh;
    border: none; 
  }