html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    overflow-x: hidden;
    
    font-family: "Nunito";
    font-optical-sizing: auto;
    font-style: normal;
}

:root {
    --websiteColor: #081D18;
    --coverColor: 0,255,200;
    --artworkBg: url("");
}

body{
    color:white;
    background: linear-gradient(
        0deg,
        rgb(18, 98, 99) 0%,
        rgb(23, 26, 28) 100%
    );
}
body::before{
    content:"";
    position:fixed;
    inset:0;

    background-image:var(--artworkBg);
    background-size:cover;
    background-position:center;

    filter:blur(15px) brightness(0.6);
    transform:scale(1.3);

    opacity:0.9;

    mask-image:linear-gradient(
        to left,
        rgba(0,0,0,0) 0%,
        rgba(0,0,0,0.3) 20%,
        rgba(0,0,0,1) 60%
    );

    -webkit-mask-image:linear-gradient(
        to left,
        rgba(0,0,0,0) 0%,
        rgba(0,0,0,0.3) 20%,
        rgba(0,0,0,1) 60%
    );

    z-index:-1;
}

/* Hauptcontainer */
#rsdRadioPlayerApp{
    position: relative;
    display:flex;
    flex-direction:column;
    align-items:center;
}


/* Visualizer */

#visualizer {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1;
    pointer-events: none;
    transition: transform .45s cubic-bezier(.25,.8,.25,1);
    transform: scale(1);
}

#visualizer canvas {
    width: 100%;
    height: 100%;
}

/* Logo */

#rsdRadioLogo {
    margin-top:1vh;
    display:flex;
    justify-content:center;
}

#rsdRadioLogo img {
    width: 90vw;
    max-width: 50vh;
}
/* BIG TRACK */
#bigTrack{
    flex:1;
    width:100%;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:center;
    position: relative;
    margin-top: 3vh;
}
#bigTrack::before{
    content:"";
    position:absolute;
    inset:-25vh;

    background: radial-gradient(
        circle at center,
        rgba(var(--coverColor),0.65) 0%,
        rgba(var(--coverColor),0.25) 40%,
        transparent 70%
    );

    filter: blur(10vh);
    opacity:0.9;
    z-index:-1;
}
#bigTrack .text{
    opacity: 0.5;
    font-size: 1.8vh;
}

#bigTrack .artwork{
    margin-top: 2vh;
    width:25vh;
    border-radius:3vh;

    border:0.25vh solid rgba(var(--coverColor),0.6);

    box-shadow:
        0 0 4vh rgba(var(--coverColor),0.6),
        0 0 10vh rgba(var(--coverColor),0.35),
        0 2vh 4vh rgba(0,0,0,0.5);
}

#bigTrack::after{
    content:"";
    position:absolute;
    width:30vh;
    height:8vh;
    bottom:-4vh;

    background: radial-gradient(
        ellipse,
        rgba(var(--coverColor),0.55),
        transparent 70%
    );

    filter: blur(3vh);
    z-index:-1;
}


#bigTrack .title{
    font-weight:bold;
    font-size: 2.5vh;
    margin-top:3vh;

    text-shadow:0 0.5vh 2vh rgba(0,0,0,0.4);
}

#bigTrack .artist{
    font-size:2.1vh;
    opacity:0.75;
    margin-top: 1.5vh;
}

#bigTrack .genre {
    font-size:1.8vh;
    opacity:0.45;
    margin-top: 0.6vh;
}

/* Controls */

.controlIcon {
    width: 5vh;
    min-width: 2vw;
    object-fit: contain;
}

#controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap:6vh;
    height: 100%;
    padding: 2vh;
}

#controls > div {
    display: flex;
    justify-content: center;
    align-items: center;
}

#playButton img {
    height: 70%;
    transition: transform 0.18s ease;
}

#playButton img.pressed {
    transform: scale(0.95);
}

#playButton img.loading {
    animation: spin 1s linear infinite;
}

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

#heartButton img,
#volumeButton img {
    width: 2.3vh;
    min-width: 1vw;

}

/* Bottom */

#bottom {
    position: fixed;
    bottom: 0;
    width: 100%;
    max-width: 80vh;
    min-height: 18vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 1000;
    background: linear-gradient(
        180deg,
        rgb(24, 72, 71) 0%,
        rgb(25, 35, 42) 100%
    );

    border-radius: 4vh 4vh 0 0;

    box-shadow:
    0 -2vh 5vh rgba(0,0,0,0.45),
    inset 0 0.15vh 0 rgba(255,255,255,0.08);
}

#bottomControls{
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
#bottomMenuContent {
    width:100%;
    max-height:0;
    overflow:hidden;
    transition:max-height 0.35s ease, padding 0.35s ease;
    padding:0 3vh;
}
#bottomHeader{
    display:flex;
    width:100%;
    border-radius:8vh 8vh 0 0;
    overflow:hidden; 
}


#bottomMenuContent.open {
    max-height:50vh;
    padding:0 3vh 3vh 3vh;
}

#bottomMenuContent > div {
    display: none;
}

#bottomMenuContent > div.activeContent {
    display: block;
}
#bottomMenu {
    width: 100%;
    height: 7vh;
}

#menu{
    display:flex;
    width:100%;
    height:100%;
    gap:1px;
    position:relative;
}
#menu::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:0.15vh;

    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,0.3),
        transparent
    );
}
.nav {
    flex:1;
    display:flex;
    justify-content:center;
    align-items:center;
    cursor:pointer;
    border-radius: 1vh 1vh 0vh 0vh;
}
.nav img{
    height:3vh;
    opacity:0.8;
    transition: transform 0.15s ease, opacity 0.15s ease;
}

.nav:hover img{
    transform:scale(1.15);
    opacity:1;
}

.nav:active img{
    transform:scale(0.9);
}
.nav:last-child {
    border-right: none;
}

.nav:hover {
    background: rgba(255,255,255,0.08);
}

.nav.active{
    background: rgba(0,255,200,0.08);
}

.nav img {
    height: 3.5vh;
    width: auto;
}
#syncStreamButton{
    background:none;
    border:none;
    color:rgba(255,255,255,0.6);
    font-size: 1.6vh;
    text-decoration:underline;
    cursor:pointer;
    transition:all .2s ease;
}