html {
    height: 100%;
}

body {
    height: 100%;
    margin: 0;
    background: linear-gradient(135deg, var(--surface), var(--surface-container-highest)) no-repeat fixed;
}

main {
    overflow-y: auto;
}

.aspect-album {
    aspect-ratio: 1/1;
}

.aspect-standard {
    aspect-ratio: 4/3;
}

.aspect-tv {
    aspect-ratio: 16/9;
}

.aspect-cinema {
    aspect-ratio: 221/100;
}

.aspect-banner {
    aspect-ratio: 400/100;
}

@media screen and (max-width: 600px) {
    .aspect-banner {
        aspect-ratio: 221/100;
    }
}

.aspect-compressed {
    aspect-ratio: 6/1;
}

.aspect-dvd {
    aspect-ratio: 9x16;
}

.music-card {
    --background: #1c1b1e;
}

.music-card img {
    filter: brightness(1.00);
}

.bg-dark {
    background-color: var(--background) !important;
}

.bg-dark .right-shadow {
    background-image: linear-gradient(to left, var(--background), transparent);
}

#creds-buffer {
    z-index: 50;
    height: 16px;
    background: var(--surface);
}

#creds-bar {
    z-index: 50;
    top: 16px;
}

#page-wrapper {
    margin-top: 96px;
}

.padding-content {
    padding-left: 32px;
    padding-right: 32px;
}

action-buttons .action-buttons {
    display: flex;
    justify-content: space-evenly;
    flex: 0 0 auto
}

.fit-width {
    width: 100%;
}

.width-85 {
    width: 85%;
}

.width-65 {
    width: 65%;
}

.width-45 {
    width: 45%;
}

.width-40 {
    width: 40%;
}

.width-35 {
    width: 35%;
}

.fit-height {
    height: 100%;
}

.music-card h6 {
    display: block;
}

.relative-children>* {
    position: relative;
    display: block;
}

.clamp {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.no-margin {
    margin: 0 0 0 0;
}

.music-card:focus {
    outline: 3px solid var(--primary);
}

.creds-bar creds-selector {
    min-width: 20%;
}

.creds-bar .creds-selector {
    margin-bottom: 0 !important;
}

.song-list .current {
    font-weight: bold;
}

.song-list .queue-row:hover {
    background-color: var(--surface-container-high);
}

.song-list .row:hover {
    cursor: pointer;
}

.player-header-row {
    margin-left: 24px;
    margin-right: 24px;
}

/* page backgrounds from old code */

.home-bg {
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100%;
    content: '';
    height: 100%;
    left: 0;
    opacity: 0.8;
    position: fixed;
    right: 0;
    top: 0;
    z-index: auto;
    filter: blur(20px);
}

@media screen and (orientation: portrait) {
    .home-bg {
        background-size: 200%;
    }
}

@media screen and (max-width: 599px) {
    .width-40 {
        width: 85%;
    }
}

.page-bg {
    background-attachment: fixed;
    background-position: calc(100% - 50%) calc(100% - 15%);
    /* background-position: center; */
    background-repeat: no-repeat;
    background-size: 170%;
    content: '';
    left: 0;
    right: 0;
    position: fixed;
    top: 0;
    bottom: 0;
    z-index: auto;
    filter: blur(20px);
    -moz-filter: blur(20px);
    -ms-filter: blur(20px);
    -o-filter: blur(20px);
    -webkit-filter: blur(20px);
    opacity: 0.65;
}

.mini .page-bg {
    /* background-position: 0 0; */
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100%;

    filter: none;
    -moz-filter: none;
    -ms-filter: none;
    -o-filter: none;
    -webkit-filter: none;
    opacity: 1;
}

.mini:hover .page-bg {
    opacity: 0.65;
}

.mini .page-bg.faded,
.page-bg.faded {
    opacity: 0.45;
    filter: blur(25px);
    -moz-filter: blur(25px);
    -ms-filter: blur(25px);
    -o-filter: blur(25px);
    -webkit-filter: blur(25px);
}

.x {
    color: #600203;
    color: #030260;

    color: #800303;
    color: #030380;

    color: #80692d;
    color: #814e03;
    color: #818003;

    color: #bc0102;
    color: #0201bc;

    color: #de7f03;

    color: #dd0202;
    color: #0202dd;

    color: #fcce56;

    color: #fd0302;
    color: #0203fd;

    color: #fdb42d;
    color: #fd692c;
    color: #fe8003;

    color: #fe9903;

    color: #fe4e03;
    color: #034efe;

    color: #fe9903;

    color: #ffcb03;

    color: #fffd03;
}

.artist-content .albums-container {
    height: fit-content;
}

/* zooms */
music-card article,
album-card article {
    transition: transform .2s;
    /* Animation */
}

.tv music-card article:focus,
.tv album-card article:focus {
    transform: scale(1.1);
    z-index: 1;
}

body:not(:is(.tv)) album-card article:hover,
body:not(:is(.tv)) music-card:not(:is(.header-card)) article:hover {
    transform: scale(1.1);
    z-index: 1;
}

.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}


.line-clamp-8 {
    display: -webkit-box;
    -webkit-line-clamp: 8;
    line-clamp: 8;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.no-overflow {
    overflow: hidden;
}

#nav-drawer .drawer {
    display: flex;
    flex-direction: column;
}