@import "base.css";
@media (min-aspect-ratio: 4/3) {
    .music-cover {flex-direction: row;}
    .music-area {width: 60vw; padding-top: 12vh; background: linear-gradient(to right, #00000080, transparent);}
    .music-area * {font-size: 1vh;}
    .music-player {width: 100%;}
    .lyric-area {--lyric-space: 2.5dvh; background: linear-gradient(to left, #00000080 80%, transparent);}
}

@media (min-aspect-ratio: 13/7) {.music-player {width: 75%;}}
@media (max-aspect-ratio: 4/3) {
    .music-cover {flex-direction: column;}
    .music-area {padding-top: 50px; padding-right: 3vh; background: linear-gradient(to bottom, #00000080, transparent);}
    .music-area * {font-size: 0.5vh;}
    .lyric-area {--lyric-space: 2dvh; background: linear-gradient(to top, #00000080, transparent);}
}

* {--dot-radius: 0.6vh;}
body {background-color: black;}
.music-cover {
    overflow: hidden;
    position: fixed;
    display: flex;
    height: 100vh;
    width: 100%;
    left: 0px;
    top: 0px;
}

.music-area {--shadow-blur: 1.5em; position: relative;}
.music-area b {
    background-color: var(--text-color);
    border-radius: 0.1em;
    margin-right: 0.6em;
    font-size: 3em;
    color: black;
}

.music-title b, .title {position: relative; bottom: -0.2em;}
.music-area * {white-space: nowrap;}
.music-area .title * {font-size: 7em;}
.music-area .artist {font-size: 5em;}
.music-area .album {font-size: 3.5em;}
.music-area .mday {
    text-align: center;
    font-size: 14em;
    position: relative;
    display: inline-block;
    opacity: 0.5;
    bottom: -0.2em;
    width: 1.5em;
}

.music-area .date {
    margin-top: 0.4em;
    text-align: center;
    font-size: 2.2em;
    opacity: 0.5;
    display: block;
    width: 10em;
}

.music-title {margin-bottom: 0.8em;}
.music-artist {margin-bottom: 6.5em; margin-left: 29em;}
.music-album {margin-bottom: 7.2em; margin-left: 35em;}
.music-title p, .music-artist p {
    border-bottom: 0.2em solid var(--text-color);
    display: inline-block;
}

.music-player {
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    border-radius: 0em 3em 3em 0em;
    margin-bottom: 7.5em;
    box-shadow: 8em 5em 15em black;
    position: relative;
    height: 15em;
}

.music-player .record {
    margin-left: 3em;
    background: url('../img/music-record.webp') center/cover;
    animation: rotate 12s infinite linear;
    position: relative;
    height: 30em;
    width: 30em;
    top: -7.5em;
}

.music-player .record::after {
    border-radius: 50%;
    position: absolute;
    content: '';
    height: 15em;
    width: 15em;
    left: 7.5em;
    top: 7.5em;
}

.music-player .player {position: absolute; right: 4em; left: 36em; top: 3em; z-index: 99;}
.music-player .player div {justify-content: space-between; align-items: end; display: flex;}
.music-player .music-duration {font-size: 2.5em;}
.music-player .music-time {font-size: 3.5em; color: var(--theme-color);}
.music-player .welcome ruby {font-size: 1.5em; color: #dddddd;}
.music-player .welcome rt {text-align: end; font-size: 2em; color: #dddddd;}
.music-player .welcome {margin-right: 0.5em;}
.music-player  img {height: 2.5em; margin: 0.5em;}
.music-player .slider {
    --val: 0%;
    --slider-height: 0.7em;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;

    background-color: #cccccc;
    border-radius: calc(var(--slider-height)/2);
    margin-top: 1.15em;
    position: relative;
    height: var(--slider-height);
    width: 100%;
    top: var(--slider-height);
}

.music-player .slider::before {
    border-radius: calc(var(--slider-height)/2);
    background: var(--theme-color);
    position: absolute;
    content: "";
    height: var(--slider-height);
    width: var(--val);
}

.music-player .slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    background-color: var(--theme-color);
    border-radius: 50%;
    position: relative;
    z-index: 99;
    border: calc(var(--slider-height)/1.8) solid var(--text-color);
    height: calc(var(--slider-height)*2.5);
    width: calc(var(--slider-height)*2.5);
}

.music-area .line-canvas {height: 10em; width: 100%;}
.lyric-area .bar-canvas {
    position: absolute;
    height: 100%;
    width: calc(var(--lyric-space)*3);
    right: 0px;
    top: 0px;
}

.lyric-area {
    --lyric-offset: calc(var(--lyric-space)*1.8);
    padding-left: calc(var(--lyric-space)*3);
    flex-grow: 1;
    position: relative;
    overflow: hidden;
}

.lyric-box {position: relative;}
.lyric-box::before {
    border-left: calc(var(--lyric-space)*0.08) solid var(--theme-color);
    position: absolute;
    content: '';
    bottom: -100vh;
    left: 0px;
    top: var(--lyric-offset);
}

.lyric-box * {white-space: nowrap;}
.lyric-box b {
    font-size: 0.9em;
    position: absolute;
    color: var(--theme-color);
    left: calc(var(--lyric-space)*0.7);
    top: calc(var(--lyric-space)*0.4 + var(--lyric-offset));
}

.lyric {
    font-size: var(--lyric-space);
    position: relative;
    padding: var(--lyric-space) 0px var(--lyric-space) calc(var(--lyric-space)*3.4);
}

.lyric::before {
    border-top: calc(var(--lyric-space)*0.08) solid var(--theme-color);
    position: absolute;
    content: '';
    width: calc(var(--lyric-space)*2.2);
    left: 0px;
    top: var(--lyric-offset);
}

.lyric::after {
    background-color: var(--theme-color);
    border-radius: 50%;
    position: absolute;
    content: '';
    height: calc(var(--dot-radius)*2);
    width: calc(var(--dot-radius)*2);
    left: calc(var(--dot-radius)*-1);
    top: calc(var(--lyric-offset) - var(--dot-radius));
}

.music-area span, .lyric-box * {
    text-shadow: 0px 0px var(--shadow-blur) black;
}

.music-area b, .lyric-box::before,
.lyric::before, .lyric::after {
    box-shadow: 0px 0px var(--shadow-blur) black;
}

@keyframes rotate {
    from {transform: rotate(0deg);}
    to   {transform: rotate(360deg);}
}