:root{
    --bar-height:4.5rem;
    --accent-color:rgb(90,15,200);
    --glass-color:rgba(220,220,220,0.5);
    --text-accent-color:white;
    --song-color-primary:black;
    --song-color-secondary:#606060;
}
body{
    background:white;
    color:black;
    font-family:sans-serif;
}
#navbar{
    position:fixed;
    z-index:99999;
    top:0; left:0; right:0; height:var(--bar-height);
    background:var(--glass-color);
    backdrop-filter:blur(0.5rem);
    box-shadow:0 0 2rem rgba(0,0,0,0.2), 0 0 0.2rem rgba(0,0,0,0.2);
    text-align:center;
}
#logo{
    height:var(--bar-height);
    width:auto;
}
#main{
    max-width:45rem;
    margin:0 auto;
    margin-top:calc(var(--bar-height) + 2rem);
}
h1{
    font-weight:lighter;
    color:var(--accent-color);
}
div.song{
    padding:0.5rem 0;
    border-bottom:1px solid #CCCCCC;
    position:relative;
    line-height:1.2em;
}
div.song > div.title{
    color:var(--song-color-primary);
    font-weight:bold;
}
div.song.playing > div.title{
    color:var(--accent-color);
}
div.song > div.artist{
    color:var(--song-color-secondary);
    font-size:0.8em;
}
div.song > div.year{
    color:var(--song-color-secondary);
    font-size:0.8em;
}
div.song > div.clickableOverlay{
    position:absolute;
    top:0; left:0; right:0; bottom:0;
    cursor:pointer;
}


