@keyframes fade-select{

    0%{
        background-color: var(--main-color);
    }

    100%{

        background-color: var(--accent-color);
    }
}

/*audioUI div must always be large enough to accept 7 rows and 8 columns*/

#audioUI{
    display:grid;
    grid-template-rows: repeat(7 1fr);
    grid-template-columns: repeat(8 1fr);
    justify-items:center;
    align-items:center;

    height:100%;
    width:100%
}

#nowPlaying{

    grid-area:1/2/3/7;

    background: var(--accent-color);

    width: 100%;
    height: 50%;

    border-style:dotted;
    border-color: var(--main-color);
    border-width: 2px;
    border-radius: 4%;
}

#visualizer{

    grid-area: 3/3/6/6;

    border-style:double;
    border-color: var(--accaent-color);

    height:100%;
    width: 90%;


}

#play{

    width:70%;
    height:50%;

    max-width: 20px;
    max-height:20px;
    
    grid-area: 6/3/8/6;

}


#play>img{

    width:90%;
    height:90%;
    object-fit:contain;
}

#pause{

    width:70%;
    height:50%;

    max-width: 20px;
    max-height:20px;

    grid-area: 6/3/8/6;

    z-index: 2;
    
}

#pause>img{

    width:90%;
    height:90%;
    object-fit:contain;
}

#seek{

    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    cursor: pointer;
    width: 90%;



    grid-area: 7/3/9/6;

}

#seek::-webkit-slider-runnable-track{

    background: var(--accent-color);
    height: 0.3rem;

}

#seek::-moz-range-track{

    background: var(--accent-color);
    height: 0.3rem;

}

#seek::-moz-range-progress{

    background: var(--main-color);

}

#seek::-webkit-slider-thumb{

    -webkit-appearance: none;

    margin-top: -0.3rem;

    background: var(--main-color);

    border-style: solid;
    border-color: var(--accent-color);
    border-width: 2px;
    border-radius:100%;

    height: 1rem;
    width: 1rem;


}

#seek::-moz-range-thumb{

    -moz-appearance: none;

    background: var(--main-color);

    border-style: solid;
    border-color: var(--accent-color);
    border-width: 2px;
    border-radius:100%;

    height: 0.6rem;
    width: 0.6rem;

}

#seek:focus{

    appearance: none;
}

#seek:focus::-moz-range-thumb{

    background: var(--accent-color);

    animation-name: fade-select;
    animation-duration: 0.5s;
    animation-timing-function: ease-out;
}

#seek:focus::-webkit-slider-thumb{

    background: var(--accent-color);

    -webkit-animation-name: fade-select;
    -webkit-animation-duration: 1s;
    -webkit-animation-timing-function: ease-out;

}

#volume{

    grid-area: 3/1/6/2;

    background: transparent;

    width:70%;
    height:100%;
}

#current-time{

    font-size: 0.6em;

    grid-area: 8/1/9/3;
}

#duration{

    font-size: 0.6em;

    grid-area: 8/6/9/8;
}