@font-face {
    font-family: "Dingbats";
    src: url("./Dingbats-Regular.otf");
}


html, body {
    height: 99%;
}


body {
    background: rgb(8, 30, 48);
    color: #fff;
    font-family: "Roboto", "Segoe UI";
    display: flex;
    height: stretch;
    align-items: center;
}

.mus-content-div img {
    width: 200px;
    z-index: 1;
    aspect-ratio: 1/1;
    border-radius: 10px;
    box-shadow: 1px 1px 8px 3px #0009;
}

.mus-content-div {
    margin-left: 20px;
    display: flex;
    height: max-content;
    align-items: center;
}

.aero * {
    filter: drop-shadow(0px 0px 5px #0005);
}


.aero-button {
    background: linear-gradient(0deg, #d2d5d8 0%, #a9acb0 50%, #d2d5d8 50.1%);
    border: 1px #0009 solid;
    border-radius: 5px;
    
    margin: 0px;
    padding: 5px 25px;
    position: relative;
    box-shadow: inset 0px 0px 4px 1px #def8, 0px 2px 4px 1px #0007;
}

.aero-button:hover, .window-option:hover {
    background: linear-gradient(0deg, #bcd9eb 0%, #729eb5 50%, #bcd9eb 50.1%);
    border: 1px solid #066;
}

.aero-button:active, .window-option:active {
    background: radial-gradient(ellipse farthest-corner at bottom, #2ff, #0000), linear-gradient(0deg, #bcd9eb 0%, #729eb5 50%, #bcd9eb 50.1%);
    box-shadow: 0px 0px 12px 2px #4ffb, inset 0px 0px 0.5px 1px #0cc9;
    border: 0px solid #0cc5;
}

.music-content {
    display: flex;
    flex-direction: column;
    margin-left: 20px;
    filter: drop-shadow(1px 1px 8px #000);
}

* [hidden]{
    display: none !important;
}

.controls {
    margin-top: 40px;
    display: flex;
    flex-direction: row;
    position: fixed;
    bottom: 0px;
    width: 80vw;
    padding: 20px 10vw;
    padding-top: 50px;
    left: 0;
    background: linear-gradient(
0deg, black, transparent);
    transform: translateY(80%);
    opacity: 0.45;
    transition: 1s;
}

icon, .icon {
    font-family: "Dingbats";
}

.controls::before {
    content: "▲";
    position: absolute;
    left: calc(50% - 15px);
    bottom: 80px;
    font-size: 30px;
    width: 50px;
    text-align: center;
}

.controls:hover {
    transform: translateY(0px);
    opacity: 1;
}


.selector {
    display: flex;
    flex-direction: column;
    position: absolute;
    padding: 20px 40px;
    border-radius: 10px;
    align-items: flex-start;
    z-index: 999;
    right: 10px;
    width: 50%;
    transition: 1s;
    max-height: 90vh;
    overflow: auto;

    p, h1 {
        color: #fff;
    }
}

.player-backdrop {
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0px;
    left: 0px;
    overflow: hidden;
}

.player-backdrop::before {
    content: "";
    z-index: -1;
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0px;
    left: 0px;
    box-shadow: 0px 0px 80px 5px #0005 inset;
}

#music {
    opacity: 0;
    position: fixed;
    display: none;
}

.player-backdrop::after {
    content: "";
    z-index: 2;
    width: 100vw;
    height: 100vh;
    opacity: .3;
    background: radial-gradient(#fff0 30%, #00124171 120%),
                repeating-linear-gradient(60deg, #fff0 10px, #fff6 15px, #fff6 30px, #fff0 35px, #fff0 80px, #fff6 85px, #fff6 130px, #fff0 135px, #fff0 200px, #fff6 205px, #fff6 270px, #fff0 275px, #fff0 300px, #fff6 305px, #fff6 345px, #fff0 350px 400px),
                linear-gradient(0deg, rgba(102, 153, 170, 0.247), transparent),
                linear-gradient(180deg, #ffffff62 20px, #fff0 80px);
    backdrop-filter: blur(2px);
    position: fixed;
    top: 0px;
    left: 0px;
}

#playlist {
    display: flex;
    gap: 8px;
    padding: 8px;
    margin: 4px 0;
    cursor: grab;
    align-items: stretch;
    z-index: 100;
    flex-direction: column;
    flex-wrap: nowrap;
    backdrop-filter: blur(2px);
    align-content: space-between;
    min-width: 280px;
    max-width: 340px;
    position: fixed;
    max-height: 80%;
    overflow: auto;
    padding-bottom: 50px;

    .play {
        cursor: pointer;
    }
}


.right-pannel {
    display: flex;
    flex-wrap: nowrap;
    min-width: 280px;
    max-width: 340px;
    position: fixed;
    max-height: 80%;
}

#playlist[-is-active="false"], .right-pannel[-is-active="false"] {
    transform: translateX(105%);
}

.right-pannel-extreme {
    position: fixed;
}

.right-pannel-extreme[-is-active="false"] {
    transform: translateX(121%);
}

.playlist-item {
    min-width: 280px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

#playlist button {
    background: #00000069;
    padding: 5px;
    border-radius: 5px;
    border: none;
    color: white;
}

canvas {
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: -5;
    /* min-width: 100vw; */
    /* min-height: 100vh; */
    aspect-ratio: 198/108;
    filter: blur(1.5px) brightness(0.7);
}


.player-backdrop * {
    z-index: -5;
    aspect-ratio: 198/108;
    filter: blur(1.5px) brightness(0.7);
}

@media (max-aspect-ratio: 99/54) {
    canvas {
        height: 100vh;
        width: unset;
    }
}
@media (min-aspect-ratio: 99/54) {
    canvas {
        height: unset;
        width: 100vw;
    }
}


.controls .button {
    border: none;
    padding: 0px;
    color: white;
    background: transparent;
    height: 20px;
    font-size: 30px;
    position: relative;
}

.controls #time {
    width: stretch;
    margin-left: 10px;
}

.controls #spd {
    width: 80px;
    margin-left: 10px;
}

#spd::before {
    content: "Speed";
    width: 80px;
    text-align: center;
    bottom: 35px;
    position: fixed;
    color: white;
}

.player-div {
    z-index: 10;
    padding: 60px 40px 40px 40px;
    /*min-width: 600px;*/
    border-radius: 15px;
}

.aero {
    background: linear-gradient(0deg, rgba(102, 153, 170, 0.192)), 
                linear-gradient(0deg, #fff0 0%, #8af2 100%),
                repeating-linear-gradient(60deg, #fff0 10px, #fff2 15px, #fff2 30px, #fff0 35px, #fff0 80px, #fff2 85px, #fff2 130px, #fff0 135px, #fff0 200px, #fff2 205px, #fff2 270px, #fff0 275px, #fff0 300px, #fff2 305px, #fff2 345px, #fff0 350px 400px),
                linear-gradient(0deg, rgba(102, 153, 170, 0.719), transparent),
                linear-gradient(180deg, #ffffffa8 20px, #fff0 80px),
                radial-gradient(circle farthest-side at bottom, #fff0 100%, #fff4 103%, #fff2 125%);
    backdrop-filter: blur(4px);
    box-shadow: inset 0px 0px 0px 1px #fff9, 
                inset 0px 0px 15px 1px #fff9,  
                2px 2px 12px 3px #0009;
    border: rgb(7, 17, 37) 1px solid;
}

.top-buttons {
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 2147483001;
    display: flex;
    flex-direction: row;
    max-width: 80vw;
    padding: 20px 10vw;
    justify-content: center;
    transform: translateY(-45px);
    transition: 0.6s;
    opacity: 0.7;
    background: linear-gradient(180deg, #0005, transparent);
    
    button {
        border-radius: 15px;
        padding: 9px 25px;
        color: white;
        text-shadow: #333333c7 0px 0px 2px, #333333c7 0px 0px 5px, #333333c7 0px 0px 5px;
        margin-right: 8px;
        max-width: 100%;
        
            icon {
                font-size: 2em;
            }
    }
}
.top-buttons:hover {
    transform: translateY(0px);
    opacity: 1;
}

@media (max-width: 540px) {
    .mus-content-div {
        flex-direction: column;
        max-width: 70vw;
         text-align: center;

    }
    .top-buttons{ 
        left: 0px;
        transform: translateY(-65px);
        button {
            max-width: 25%;
        }
    }
    
    .music-content {
        align-items: center;
    }
    .controls {
        width: 100vw;
        padding: 20px 5px;
    }
    .welcome {
        transform: scale(0.75);
        height: 80vh;
        overflow: auto;
    }
    body {
        background: url("https://img.wallpapic.com/i3537-915-79/medium/windows-vista-blue-green-light-wallpaper.jpg");
        background-size: 380vh;
background-position: center;
background-repeat: no-repeat;
    }
    #rotating_disk {
        position: relative !important;
        top: 100px;
        left: 50px;
    }
    #cover {
        right: 30px
    }
    #cover, .player-div .music-content {
        position: relative !important;
        top: -100px;
    }
}

#rotating_disk {
    position: absolute;
    box-shadow: none;
    border-radius: 100%;
    animation: rotate 2s infinite linear;
    z-index: 0;
    transition: 2s;
    opacity: 0;
    animation-play-state: paused;
}

#rotating_disk[playing] {
    bottom: calc(50% - 25px);
    opacity: 2;
}

#rotating_disk[spinning="true"] {
    animation-play-state: running;
}

@keyframes rotate {
    0% {transform: rotate(0deg);}
    50% {transform: rotate(180deg);}
    99.999% {transform: rotate(360deg);}
    100% {transform: rotate(0deg);}
}


.rotate {
    border-radius: 100%;
    animation: rotate 10s infinite linear;
}

h1 icon {font-weight: 400;font-size: 1.5em;}

*[isWarning] {
    color: yellow !important;
    text-decoration: underline;
}

*[isWarning]::before {
    content: "";
    font-size: 2.5em;
    color: yellow;
    font-family: 'Dingbats';
    position: absolute;
    right: 100%;
    bottom: 0px;
}

.aero a {
    color: #00ceff;
}

@media (max-width: 900px) {
    .selector {
        z-index: 999;
        max-width: 100vw;
        min-width: 75%;
    }
    #playlist_selector {
        max-width: 80% !important;
        min-width: 60%;
    }
}

button.export {
    width: stretch;
    background: #8adeff !important;
    border-radius: 20px !important;
    color: #000000 !important;
    font-size: 1.2em;
    box-shadow: -1px 4px 8px #0000007d;
    font-weight: 500;
    font-family: "Segoe UI", "Roboto", system-ui;
    
    position: sticky;
    bottom: -45px;
}

#alert_div {
    position: absolute;
    top: 0px;
    width: stretch;
    display: flex;
    justify-content: center;
}

#alert {
    padding: 20px 80px;
    text-shadow: 0 0 5px #555, 0 0 5px #555, 0 0 5px #555, 0 0 5px #555, 0 0 5px #555;
    border-radius: 1em;
    transition: 0.6s;
    transform: translateY(-200px);
    z-index: 2147483002;
}

#alert[--show="true"] {
    transform: translateY(50px);
}

@keyframes bg-rotate {
    25% {background-position-x: -350px;}
    75% {background-position-x: 350px;}
}

#alert::before {
    background: repeating-linear-gradient(90deg, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00);
    display: flex;
    position: absolute;
    width: 100%;
    animation: bg-rotate 8s infinite cubic-bezier(0.21, 0.01, 0.58, 1);
    height: 100%;
    content: " ";
    left: 0px;
    top: 0px;
    z-index: -1;
    border-radius: 1em;
    opacity: .2;
    background-blend-mode: multiply;
    mix-blend-mode: multiply;
}


button#hide_button {
    position: fixed;
    z-index: 999;
    color: white;
    text-shadow: 0 0 5px #353535,  0 0 5px #353535;
    padding: 8px 12px;
    border-radius: 1em;
    transition: 1s;
    right: 10px;
    transform: translateY(-225px);
}

button#hide_button[-is-active="false"] {
    transform: translateX(105vw) translateY(-225px);
}

@media (max-height: 685px) {
    button#hide_button {
            transform: translateY(225px);
    }
    
    button#hide_button[-is-active="false"] {
        transform: translateX(105vw) translateY(225px);
    }
}