#audioPlayer {
    box-sizing: border-box;
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 150px;
    background-color: #000;
    border-top: 1px solid black;
    background-size: 400vw;
    color: #fff;
    font-size: 30px;
    transition: background 0.5s ease, height 0.5s ease;
    padding-bottom: 30px;
    z-index: 10 !important;
}

#audioPlayer:before {
    content: "";
    width: 100%;
    height: 210px;
    background: linear-gradient(to bottom, #000b 0%, #000b 35%, #0009 35%, #0006 75%, #0003 75%);
    border-top: 1px solid white;
    position: fixed;
    left: 0;
    z-index: 0;
}

.tracklist {
    box-sizing: border-box;
    position: fixed;
    z-index: 2;
    width: 750px;
    left: 30px;
    bottom: 210px;
    max-height: 150px;
    background-color: #111;
    overflow-y: hidden;
    transition: transform 0.5s ease, max-height 0.5s ease, background-color 0.5s ease;
    transform: translateY(65%);
    background-size: 150vw;
    border-radius: 5px 5px 0 0;
    background-position: 100%;
}

.tracklist ol {
    scrollbar-color: #111111 #222222;
    scrollbar-width: thin;
    box-sizing: border-box;
    padding-top: 20px;
    overflow-y: scroll;
    max-height: 350px;
}

.tracklist>* {
    margin: 0px 30px 0 30px;
}

.tracklist.empty {
    transform: translateY(250%);
    transition: transform 2s ease, max-height 0.5s ease;
}

.tracklist h2 {
    transition: all 0.5s ease;
    padding: 10px 30px;
    margin-bottom: 55px;
    margin: 0;
    position: sticky;
    top: -10px;
    background-color: #0007;
    backdrop-filter: blur(5px)
}

.tracklist:focus h2 {
    padding: 9px 30px;
}

.tracklist:before {
    content: "🔒";
    opacity: 0;
    transition: opacity 0.5s ease;
    position: absolute;
    z-index: 10;
    right: 0;
    top: 0;
    font-size: 20px;
    padding: 5px;
    filter: saturate(0);
}

.tracklist:focus:before {
    opacity: 1;
}

.tracklist:hover h2, .tracklist:focus h2 {
    padding: 30px;
    top: 0px;
}

.tracklist:hover, .tracklist:focus {
    border-radius: 15px 15px 0 0;
    padding-bottom: 20px;
    transform: translateY(0%);
    max-height: 500px;
}

.tracklist:focus {
    background-color: #311;
}

.year-group {
    border: 1px solid white;
    border-radius: 5px;
    margin-bottom: 30px;
}

.year-group:before {
    content: attr(data-year);
    background-color: #000;
    border: 1px solid white;
    border-radius: 10px;
    padding: 10px;
    position: relative;
    bottom: 10px;
    left: 10px;
    font-size: 20px;
}

#mixes-list {
    float: left;
    margin-right: 20px;
    flex: 6;
}

#mixes-list ul {
    margin-right: 20px;
}

#spotify-playlist {
    flex: 4;
    float: right;
    width: 40vw;
    margin-right: 20px;
}

#audioPlayer.playing {
    height: 210px;
}

@keyframes gradientAnimation-rainbow {
    0% {
        background-position: 0;
    }

    100% {
        background-position: -200vw;
    }
}

[invis], [invis] svg, [invis] img {
    opacity: 0;
    cursor: default !important;
}

button {
    transition: opacity 0.5s ease;
}

input {
    background: transparent;
}

@keyframes gradientAnimation {
    0% {
        background-position: 0;
    }

    100% {
        background-position: -200vw;
    }
}

@keyframes gradientAnimation-bestof2023 {
    0% {
        background-position: 0;
    }

    100% {
        background-position: -230vw;
    }
}

#audioPlayer.playing[gradientType="rainbow"] {
    animation: gradientAnimation-rainbow 8s linear infinite;
}

#audioPlayer.playing[gradientType="best_of_2023"] {
    animation: gradientAnimation-bestof2023 8s linear infinite;
}

#audioPlayer.playing[gradientType="default"] {
    animation: gradientAnimation 8s linear infinite;
}

ul, ul *, ol, ol * {
    text-decoration: none;
    color: white;
    font-size: 20px;
}

[disabled] {
    color: gray !important;
    cursor: not-allowed;
}

html {
    overflow-x: hidden;
    scrollbar-color: white #0000;
    scrollbar-width: thin;
}

body {
    font-family: "Silkscreen", sans-serif;
    background-color: black;
    color: white;
    margin: 0px;
    text-shadow: 1px 1px 2px black;
    min-height: 1400px;
    height: auto;
    overflow: auto;
}

a:hover, a:focus:hover {
    text-decoration: none;
    color: lime;
}

a:focus {
    text-decoration: none;
}

ul li a.selected {
    color: green;
}

#albumCover {
    height: 200px;
    width: 200px;
    float: right;
    margin-left: 20px;
    transition: opacity 0.5s ease, bottom 0.5s ease, right 0.5s ease;
    border-radius: 5px;
    position: absolute;
    right: 60px;
    bottom: 00px;
}

@media only screen and (max-width: 1530px) {
    #spotify-playlist {
        display: none;
    }

    #albumCover {
        bottom: 80px;
        right: 30px;
    }
}

#albumCover:not([src]), #albumCover[src=""] {
    opacity: 0;
    transition: opacity 0s ease;
}

#trackTitle {
    margin-left: 30px;
    z-index: 1;
    position: relative;
}

#audioData {
    float: left;
    align-items: center;
    margin-top: 30px;
}

#container {
    padding-left: 20px;
    display: flex;
}

header {
    z-index: 10;
    height: 70px;
    padding: 0 30px;
    display: grid;
    grid-template-columns: 1fr 5fr;
    position: relative;
    margin-bottom: 40px;
    border-top: 1px solid white;
    border-bottom: 1px solid white;
    top: 20px;
    float: left;
    transition: background 0.5s ease-in-out;
    width: 100vw;
    box-sizing: border-box;
}

header img {
    position: relative;
    bottom: 10px;
    transition: all 0.3s ease-in-out;
    overflow: visible;
    width: 320px;
    vertical-align: middle;
}

.h1, .h2, .h3, h1, h2, h3 {
    margin-bottom: 25px;
}

.undertitle {
    font-size: 14px;
    position: relative;
    top: -23px;
}

[data-recommendable="false"] {
    color: #f77;
}

[data-recommendable="meh"] {
    color: #ff7;
}

[data-recommendable="true"] {
    color: #7f7;
}

[data-recommendable="verytrue"] {
    color: #3147d0;
}

@media only screen and (max-width: 835px) {
    .tracklist {
        display: none;
    }

    header {
        margin-bottom: 20px;
    }

    header img {
        height: 70px;
        width: auto;
        padding: 10px 0 10px 10px;
        position: initial !important;
        bottom: 0;
        overflow: initial;
        float: left;
    }

    .year-group:before {
        font-size: 15px;
    }

    .h1, h1 {
        font-size: 28px;
    }

    .h4, h4 {
        font-size: 14px;
    }

    ul, ul * {
        font-size: 15px;
    }

    #albumCover {
        height: 100px;
        width: 100px;
    }

    #audioPlayer.playing {
        height: 140px;
    }

    #trackTitle {
        font-size: 15px !important;
    }

    #audioPlayer * {
        font-size: 10px;
    }
}