miru/app/css2.css

:root {
    font-family: -apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    --accent-color: #e5204c;
    --volume-level: 100%;
    --progress: 0%;
    --buffer: 0%;
    color: #b6b6b6;
    font-size: 62.5%;
    --nav-size: 19rem
}

.material-icons {
    font-size: 18px
}
.close{
    font-family: Arial;
}
/* NAVBAR */
.page-wrapper.with-sidebar[data-sidebar-hidden]>.sidebar {
    left: var(--nav-size);
}
.sidebar {
    width: var(--nav-size);
}
.page-wrapper.with-sidebar>.content-wrapper {
    left: var(--nav-size);
    width: calc(100% - var(--nav-size));
}

/*PLAYER*/

#player:target {
    bottom: 0;
    right: 0;
    position: relative;
    align-self: center;
    width: 100%;
    height: 100%;
    transition: none !important;
}

.immersed {
    cursor: none;
}

.immersed .player {
    opacity: 0;
}

#player {
    position: fixed;
    display: flex;
    bottom: 2rem;
    right: 2rem;
    width: 25%;
    transition: width .2s ease;
    z-index: 10
}

#player:target a {
    display: none;
}

#player a {
    position: absolute;
    z-index: 10
}

#player:target .player {
    display: flex !important
}

.controls {
    background: linear-gradient(to top, rgba(0, 0, 0, .8), rgba(0, 0, 0, .4) 25%, rgba(0, 0, 0, .2) 50%, rgba(0, 0, 0, .1) 75%, transparent);
}
.stats {
    background: linear-gradient(to bottom, rgba(0, 0, 0, .8), rgba(0, 0, 0, .4) 25%, rgba(0, 0, 0, .2) 50%, rgba(0, 0, 0, .1) 75%, transparent);
}
.player {
    position: absolute;
    user-select: none;
    opacity: 1;
    transition: .5s opacity ease;
    font-family: Roboto, monospace
}

.controls>*:hover {
    filter: drop-shadow(0 0 8px #000)
}
.controls span{
    cursor: pointer
}
.stats .ts{
    padding: 0 1.2rem 0 0 !important
}

.player span {
    font-size: 2.2rem !important;
    color: #ececec;
    padding: 1.2rem;
    transition: all .2s ease;
}

.player .ts {
    font-size: 2rem !important;
    white-space: nowrap;
    align-self: center;
    cursor: default;
    padding: 0 1.2rem;
    font-weight: 600
}

#prog {
    width: 100%;
    align-self: center;
    padding: 1rem 0;
}

.volume {
    display: flex;
    width: auto
}

.volume:hover>input[type=range] {
    width: 5vw;
    display: inline-block;
    transition: all .1s ease;
    margin-right: 1rem
}

.volume>input[type=range] {
    width: 0;
    transition: all .1s ease;
    margin-right: 0
}

.controls input[type=range] {
    -webkit-appearance: none;
    background: transparent;
    margin: 0
}

.controls input[type=range]:focus {
    outline: none;
}

.controls input#vol[type=range]::-webkit-slider-runnable-track {
    width: 50%;
    height: 3px;
    cursor: pointer;
    background: linear-gradient(90deg, #e5204c var(--volume-level), rgba(255, 255, 255, .2) var(--volume-level))
}

.controls input#prog[type=range]::-webkit-slider-runnable-track {
    width: 50%;
    height: 3px;
    cursor: pointer;
    background: linear-gradient(90deg, #e5204c var(--progress), rgba(255, 255, 255, .4) var(--progress), rgba(255, 255, 255, .4) var(--buffer), rgba(255, 255, 255, .2) var(--buffer))
}

.controls input[type=range]:hover::-webkit-slider-thumb {
    height: 12px;
    width: 12px;
    margin-top: -4px
}

.controls input[type=range]::-webkit-slider-thumb {
    height: 0px;
    width: 0px;
    border-radius: 50%;
    background: var(--accent-color);
    cursor: pointer;
    -webkit-appearance: none;
    margin-top: 1px;
    transition: all .1s ease
}
.pointer {
    cursor: pointer
}

section{
    display: none;
}
section:target{
    display: block;
}