.theme {
    --bg: #121212;
    --on-bg: #ffffff;
    --on-bg-dark: #868686;

    --primary: rgb(0, 255, 127);

    --surface-h1: #222222;
    --surface-h15: #2a2a2a;
    --surface-h2: #323232;
    --surface-h25: #3a3a3a;
    --surface-h3: #424242;
    --surface-h35: #4a4a4a;

    --surface-h15-placeholder: #7a7a7a;

    --icon-invert: 1;

    --hover: rgba(255, 255, 255, 0.1);
    --hover-invert: rgba(0, 0, 0, 0.1);

    --click: rgba(255, 255, 255, 0.05);
    --click-invert: rgba(0, 0, 0, 0.05);
}

@media (prefers-color-scheme: light) {
    .theme {
        --bg: #ededed;
        --on-bg: #000000;
    
        --surface-h1: #dddddd;
        --surface-h15: #d5d5d5;
        --surface-h2: #cdcdcd;
        --surface-h25: #c5c5c5;
        --surface-h3: #bdbdbd;
        --surface-h35: #b5b5b5;
    
        --surface-h15-placeholder: #858585;
    
        --icon-invert: 0;
    
        --hover: rgba(0, 0, 0, 0.1);
        --hover-invert: rgba(0, 0, 0, 0.1);
    
        --click: rgba(0, 0, 0, 0.05);
        --click-invert: rgba(0, 0, 0, 0.05);
    }
}

body {
    background-color: var(--bg);
    min-height: 100vh;
    margin: 0;
    color: var(--on-bg);

    z-index: 0;

    font-family: 'Roboto', sans-serif;
}

body.setup .top-bar {
    display: none;
}

body.setup .top-bar-spacer {
    display: none;
}

body.setup .song-bar {
    display: none;
}

body.setup .song-bar-spacer {
    display: none;
}

#setup {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    gap: .5rem;
    flex-direction: column;
}

#setup input {
    background-color: var(--surface-h15);
    color: var(--on-bg);
    border: none;
    outline: none;

    padding: .75rem;
    border-radius: .5rem;

    font-family: 'Roboto', sans-serif;
    font-size: 1rem;

    width: 20rem;
    max-width: calc(90vw - 2.5rem);
}

#setup input::placeholder {
    color: var(--surface-h15-placeholder);
}

#setup input:focus {
    outline: 1px solid var(--surface-h15-placeholder);
}

#setup .btn {
    margin-top: .5rem;
}

#setup .error {
    display: none;
    background-color: #221111;
    width: 18rem;
    padding: .75rem;
    border-radius: .5rem;
}

#setup .error > p:first-child {
    font-weight: 900;
}

.top-bar {
    width: 100%;
    height: 5rem;
    background-color: var(--surface-h1);

    position: fixed;
    top: 0;
    left: 0;

    z-index: 100;
}

.top-bar-spacer {
    height: 5rem;
}

.logo {
    position: absolute;
    top: 0;
    left: 1rem;

    height: 5rem;

    cursor: pointer;

    opacity: 1;

    z-index: 110;

    transition-property: opacity;
    transition-duration: 250ms;
    transition-delay: 100ms;
}

.top-bar-buttons {
    position: absolute;

    top: 50%;
    right: 1rem;
    transform: translateY(-50%);

    display: flex;
    gap: 1rem;
}

.icon-button {
    height: 2rem;
    padding: .5rem;

    filter: invert(var(--icon-invert));

    border-radius: 50%;
    cursor: pointer;
}

.icon-button:hover {
    background-color: var(--hover-invert);
}

.icon-button:active {
    background-color: var(--click-invert);
}

.search-container {
    display: flex;
    align-items: center;
    gap: 1rem;

    z-index: 120;
}

#search-bar {
    --fill-width: 50vw;
    --to-center: 1;

    background-color: var(--surface-h15);
    border: none;
    outline: none;
    color: var(--on-bg);
    padding: 0;/*.5rem;*/
    font-size: 1rem;
    height: 1.5rem;
    border-radius: .5rem;

    width: 0;

    z-index: 121;
}

#search-bar.hide {
    animation: search-bar-hide 625ms ease;
}

#search-bar.show {
    width: calc(var(--fill-width) - 10rem - ((1 - var(--to-center)) * 1rem ));
    animation: search-bar-show 500ms ease;
    padding: .5rem;
}

@keyframes search-bar-show {
    0% {
        width: 0;
        padding: .5rem;
    }
    100% {
        width: calc(var(--fill-width) - 10rem - ((1 - var(--to-center)) * 1rem ));
        padding: .5rem;
    }
}

@keyframes search-bar-hide {
    0% {
        width: calc(var(--fill-width) - 10rem - ((1 - var(--to-center)) * 1rem ));
        padding: .5rem;
    }
    75% {
        width: 0;
        padding: .5rem;
    }
    100% {
        width: 0;
        padding: 0;
    }
}

#search-bar::placeholder {
    color: var(--surface-h15-placeholder);
}

#search-bar:focus {
    outline: 1px solid var(--surface-h15-placeholder);
}

.progress-bar {
    position: absolute;
    bottom: -.3rem;
    left: 0;
    width: 100%;
    height: .3rem;
    background-color: var(--primary);
    animation: progress-animation 1.5s ease-in infinite;
}

#setup-progress-bar {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: .3rem;
    background-color: var(--primary);
    animation: progress-animation 1.5s ease-in infinite;
}

@keyframes progress-animation {
    0% {
        width: 0%;
        margin-left: 0%;
    }
    45% {
        width: 90%;
        margin-left: 0%;
    }
    55% {
        width: 90%;
        margin-left: 10%;
    }
    100% {
        width: 0%;
        margin-left: 100%;
    }
}

.homepage {
    display: flex;
    flex-direction: column;

    margin: 1rem;
}

.category {
    display: flex;
    flex-direction: column;
}

.category-title {
    font-size: 2rem;
    font-weight: 900;
    margin: 0;
    margin-bottom: 1rem;
}

.category-contents {
    display: flex;
    gap: 1.5rem;

    overflow: scroll;
    margin-bottom: 1rem;
}

.category.pas .category-contents {
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.category.pas .content-element {
    flex-direction: row;
    flex-basis: 20%;
}

.category.pas .content-thumbnail {
    height: 6rem;
    width: 6rem;

    margin-right: 1rem;
}

.category .loading-overlay .spinner {
    border: solid .5rem;
    border-color: var(--primary) transparent transparent transparent;
    border-radius: 50%;

    animation: spinner-animation 1s linear infinite;

    height: 3rem;
    width: 3rem;
}

@keyframes spinner-animation {
    from {
        transform: rotateZ(0deg);
    }
    to {
        transform: rotateZ(360deg);
    }
}

.category .loading-overlay {
    display: block;

    position: absolute;
    top: 0;
    left: 0;

    height: 100%;
    width: 100%;

    display: flex;
    justify-content: center;
    align-items: center;
}

.category .category-contents {
    position: relative;
}

.content-element {
    width: 15rem;
    padding: 1rem;

    flex-shrink: 0;

    border-radius: .5rem;

    cursor: pointer;

    display: flex;
    flex-direction: column;

    margin-bottom: 1rem;
}

.content-element:hover {
    background-color: var(--hover);
}

.content-thumbnail {
    height: 15rem;

    object-fit: cover;

    border-radius: .3rem;
}

.content-title {
    margin: 0;
    margin-top: .5rem;

    font-weight: 700;
    font-size: 1.25rem;
}

.content-description  {
    margin: 0;
    margin-top: .5rem;

    display: flex;
    flex-wrap: wrap;

    font-weight: 400;
    font-size: 1rem;

    color: var(--on-bg-dark);
}

.content-description a, .content-description p {
    margin: 0;
    margin-top: .5rem;

    font-weight: 400;
    font-size: 1rem;

    color: var(--on-bg-dark);
}

.content-element.artist .content-thumbnail {
    border-radius: 50%;
}

.content-element.artist .content-title {
    text-align: center;
}

.content-element.artist .content-description {
    text-align: center;
    display: block;
}

.content-element.video {
    width: 30rem;
}

.song-bar {
    height: 5rem;
    width: 100vw;

    background-color: var(--surface-h1);

    position: fixed;

    bottom: 0;
    left: 0;

    z-index: 100;
}

.song-controls {
    position: absolute;
    top: 50%;
    left: 1rem;
    transform: translateY(-50%);
    
    height: 100%;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.song-controls img {
    width: 3rem;
    cursor: pointer;

    filter: invert(var(--icon-invert));
    border-radius: 50%;
}

.song-controls img:hover {
    background-color: var(--hover-invert);
}

.song-controls img:active {
    background-color: var(--click-invert);
}

.song-details {
    height: 100%;

    position: absolute;

    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);

    display: flex;
    align-items: center;
    gap: 1rem;
}

.song-details .thumbnail {
    height: 90%;
    width: auto;

    border-radius: .5rem;

    aspect-ratio: 1;

    object-fit: contain;
}

.song-details .texts {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.song-details .texts p {
    margin: 0;
}

.song-details .texts .title {
    font-weight: 700;
}

.song-bar-extra {
    position: absolute;

    height: 100%;

    top: 50%;
    right: 1rem;

    transform: translateY(-50%);

    gap: 1rem;

    display: flex;
    align-items: center;
}

.song-bar-extra img {
    width: 2rem;
    cursor: pointer;
    padding: .5rem;
    filter: invert(var(--icon-invert));
    border-radius: 50%;
}

.song-bar-extra img:hover {
    background-color: var(--hover-invert);
}

.song-bar-extra img:active {
    background-color: var(--click-invert);
}

.song-bar-spacer {
    height: 5rem;
    width: 100%;
}

.queue-song {
    display: flex;
    justify-content: space-between;

    min-height: 4rem;
    width: 100%;

    padding-top: .5rem;
    padding-bottom: .5rem;

    border-bottom: 1px solid var(--surface-h15);

     cursor: pointer;
}

.queue-song.playing {
    background-color: var(--surface-h2);
}

.queue-song:first-of-type {
    border-top: 1px solid var(--surface-h15);
}

.queue-song:hover {
    background-color: var(--surface-h15);
}

.queue-song.playing:hover {
    background-color: var(--surface-h25);
}

.queue-title {
    margin-left: 1rem;
}

.queue-song .left-items {
    display: flex;
    gap: 1rem;
    margin-left: 1rem;
    min-width: 0;
}

.queue-song .right-items {
    display: flex;
    margin-right: 1rem;
    align-items: center;
}

.queue-song .right-items p {
    margin: 0;
    width: max-content;
}

.queue-thumbnail {
    height: 4rem;

    object-fit: contain;

    border-radius: .3rem;

    aspect-ratio: 1;
}

.queue-song .title-artist {
    display: flex;
    flex-direction: column;
    justify-content: space-around;

    width: calc(100vw - 9rem);
}

.queue-song .title-artist p {
    margin: 0;
}

.queue-song .title-artist .title {
    font-weight: 700;
}

.song-progress {
    height: 1rem;
    width: 100%;

    position: absolute;
    top: -1rem;
    left: 0;

    cursor: pointer;
}

.song-progress > div {
    margin-top: .75rem;
    height: .25rem;

    width: 0;

    background-color: var(--primary);

    position: absolute;
    top: 0;
    left: 0;
}

.song-progress:hover > div {
    margin-top: 0;
    height: 1rem;

    background-color: var(--primary);

    position: absolute;
    top: 0;
    left: 0;
}

.song-progress:active > div {
    margin-top: 0;
    height: 1rem;

    background-color: var(--primary);

    position: absolute;
    top: 0;
    left: 0;
}

.volume-bar {
    height: 7rem;
    width: 5rem;
    background-color: var(--surface-h1);

    position: absolute;
    top: -10rem;
    right: 4rem;

    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;

    display: flex;
    justify-content: center;
    align-items: center;

    padding-bottom: 1.5rem;
    padding-top: 1.5rem;
}

.volume-slide-bar {
    cursor: pointer;

    --volume: 100%;

    width: .1rem;
    height: 100%;

    background: linear-gradient(0deg, white var(--volume), black 0%);

    position: relative;
}

.volume-slide-knob {
    position: absolute;
    left: -.45rem;
    bottom: calc(var(--volume) - .5rem);

    height: 1rem;
    width: 1rem;

    border-radius: 50%;

    background-color: white;
}

.album-info, .artist-info {
    margin: 2rem;
    display: flex;
    gap: 2rem;
}

.album-info .thumbnail, .artist-info .thumbnail {
    width: 15rem;
    height: fit-content;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 1rem;
}

.album-info .control-buttons, .artist-info .control-buttons {
    margin-top: 2rem;
    display: flex;
    gap: 1rem;
}

#album-description > a {
    font-weight: 700;
    text-decoration: underline;
    color: var(--on-bg);
}

#artist-description > a {
    font-weight: 700;
    text-decoration: underline;
    color: var(--on-bg);
}

.btn {
    background-color: rgb(207, 255, 231);
    padding: 1rem 1.5rem 1rem 1.5rem;
    border: none;
    cursor: pointer;
    border-radius: 2rem;
    color: black;
    font-family: 'Roboto', sans-serif;
    font-size: 1rem;
    font-weight: 700;

    display: flex;
    align-items: center;

    transition-property: background-color;
    transition-duration: 100ms;
}

.btn:hover {
    background-color: rgb(155, 255, 205);
}

.btn:active {
    background-color: rgb(125, 207, 166);
}

.btn .icon {
    height: 1.5rem;
    margin-right: .5rem;
}

.artist-content {
    margin: 1rem;
    display: flex;
    flex-direction: column;
}

.scroll-category {
    display: flex;
    gap: 1rem;
    width: 100%;
    overflow: scroll;
}

.btn.center {
    align-self: center;
}

#artist-list-view {
    display: flex;
    flex-wrap: wrap;
}

.big-album {
    height: 18rem;
    width: calc(50% - 4rem);

    display: flex;

    padding: 1rem;
    margin: 1rem;

    border-radius: 1rem;
    cursor: pointer;

    gap: 1rem;
}

.big-album:hover {
    background-color: var(--surface-h2);
}

.big-album .thumbnail {
    height: 80%;
    aspect-ratio: 1;
    object-fit: cover;

    align-self: center;

    background-color: blue;
}

.big-album .title {
    font-size: 2rem;
    margin-bottom: 1rem;
}

.big-album .description {
    margin-top: 0;
    font-size: 1rem;
}

.pages > * {
    overflow: scroll;
}

.song-details .texts .title {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* number of lines to show */
            line-clamp: 2; 
    -webkit-box-orient: vertical;
}

.header {
    display: flex;
    justify-content: center;
    align-items: center;

    margin: 1rem;
    gap: 1rem;
}

.header .header-btn {
    width: 16rem;
    height: 10rem;
    background-color: var(--surface-h3);

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 1rem;

    cursor: pointer;
}

.header .header-btn:hover {
    background-color: var(--surface-h35);
}

.header .icon {
    filter: invert(var(--icon-invert));
    height: 2rem;
}

.header .text {
    margin-left: 1rem;
    font-weight: 700;
    font-size: 2rem;
}

#browse-view {
    display: flex;
    align-items: center;
    flex-direction: column;
}

#browse-view-contents {
    display: flex;
    gap: 1rem;
    margin: 1rem;
    flex-wrap: wrap;
    justify-content: center;
}

#browse-view-contents .item {
    padding: 1rem;
    border-radius: 1rem;
    cursor: pointer;

    width: 15rem;
}

#browse-view-contents .item .thumbnail {
    height: 15rem;
    width: 15rem;
    object-fit: cover;
    border-radius: .3rem;
}

#browse-view-contents .item .title {
    font-size: 1rem;
    font-weight: 700;
}

#browse-view-contents .item .description {
    font-size: 1rem;
    color: var(--on-bg-dark);
}

#browse-view-contents .item:hover {
    background-color: var(--hover);
}

@media screen and (max-width: 800px) {
    #search-bar {
        --fill-width: 100vw;
        --to-center: 0;
    }

    .logo.search-hide {
        pointer-events: none;

        opacity: 0;

        transition-delay: 0ms;
    }

    #previous-btn {
        display: none;
    }

    #next-btn {
        display: none;
    }
}

@media screen and (max-width: 550px) {
    #volume-btn {
        display: none;
    }

    .big-album {
        height: 10rem;
    }

    .album-info, .artist-info {
        flex-direction: column;
    }

    .album-info .thumbnail, .artist-info .thumbnail {
        width: 100%;
    }
}

@media screen and (max-width: 1000px) {
    .big-album {
        width: calc(100% - 4rem);
    }    
}