:root {
--noshuffle: darkgray;
--empty: rgb(112 112 112);
}



html,body {
    box-sizing: border-box;
    background-position: fixed;
    margin: 0;
    padding: 0;
    height: 100vh;
    width: 100vw;
    overflow-y: auto;
    
}

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

#wrapper {
    display: grid;
    height: 100vh;
    width: 100vw;
    grid-template-rows: 70% 30%;
    background-color: black;
}

.empty {
    color: var(--empty)
}

.outer-tracks {
    font-size: large;
}

#tracks-outer {
    overflow-y: scroll;
    display: grid;
    justify-content: center;
    align-items: center;
}

.trackgroup {
    justify-self: center;
    font-size: xxx-large;
    font-weight: bold;
}

.trackgroup:hover {
    cursor: pointer;
}

.fifties {
    justify-self: center;
    font-size: x-large;
    font-weight: bold;
}

.fifties:hover {
    cursor: pointer;
}

.tracks {
    justify-self:left;
}

.tracks:hover {
    cursor: pointer;
}

.controls:hover {
    cursor: pointer;
}

#one-hundred {
    justify-self: center;
}

.hide {
    display: none;
}

.nohide {
    display: grid;
}

.modes {
    justify-self: center;
}

.controls {
    display: grid;
    justify-self: center;
}

.mutecontrols {
    justify-self: center;
}

#playlist {
    display: none;
}

footer {
    width: 100%;
    justify-self: center;
    border-top: 2px black solid;
}

#footer-wrap {
    height: 100%;
    display: grid;
    grid-template-rows: 1fr 1fr 1fr 1fr;
}

.footer-row {
    display: grid;
    justify-items: center;
    align-items: center;
}

.footer-text {
    font-size: x-large;
    font-weight: bold;
}

.number-text {
    font-size: x-large;
    font-weight: bold;
}

.white {
    color: var(--noshuffle);
}

.black {
    color: black;
}

#volume-controls {
    grid-template-columns: 1fr 1fr;
}

#pause-control {
    display: none;
}

#progress-time-outer {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    justify-items:center;
}

.smallcontrols {
    margin-left: 1px;
    margin-right: 1px;
}

#control-outer {
    grid-template-columns: 1fr 1fr 1fr 1fr;

}

.fa, .fas {
    font-weight: 900;
    font-size: xx-large;
}

input[type=range]{
    -webkit-appearance: none;
}

@-moz-document url-prefix() {

    input[type="range"]::-moz-range-thumb {
        border: none;
    height: 1.1em;
    width: 1.1em;
    border-radius: 50%;
    background: black;
    margin-top: -4px;
    cursor: pointer;
}

    input[type="range"]::-moz-range-track {
        height: .35em;
    background: var(--noshuffle);
    border: none;
    border-radius: 3px;
    }
}

input[type=range]::-webkit-slider-runnable-track {
    height: .35em;
    background: var(--noshuffle);
    border: none;
    border-radius: 3px;
}

input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    border: none;
    height: 1.1em;
    width: 1.1em;
    border-radius: 50%;
    background: black;
    margin-top: -4px;
    cursor: pointer;
}

@media (orientation: portrait) {

    .tracks {
        font-size: large;
    }

    .fifties {
        font-size: x-large;
    }

    .footer-text {
        font-size: large;
    }
}