#image {
    position: relative;
    padding-bottom: 0;
    overflow: hidden;
}

#image > * {
    position: relative;
    z-index: 1;
}

#image:before {
    content:"";
    display: block;
    position: absolute;
    inset:0 0 0 0;
    background-size: cover;
    background-repeat: no-repeat;
    background-position:center;
    filter:blur(10px) brightness(0.5);
    z-index: 0;
}

#image > .container {
    padding:0;
}

.image-nav {
    display: flex;
    align-items: center;
}

.image-nav {
    display: flex;
    align-items: center;
}

.image-nav iconify-icon {
    color:rgba(var(--color-textlight));
    scale: 2;
}

.image-nav.alt iconify-icon {
    color:rgba(var(--color-textdark));
}

.image-nav:not([href]) {
    cursor: pointer;
}

@container (max-width:1000px) {
    #image > .flex-container {
        position: relative;
    }

    .image-nav {
        position: absolute;
        top:50%;
    }

    #nav-left {
        left:12px;
    }

    #nav-right {
        right:12px;
    }
}

.image-display {
    height: 80vh;
    flex:1 1 auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

.image-display img {
    height: 100%;
    width: 100%;
    object-fit: contain;
}

#info {
    color:rgba(var(--color-textlight));
}

#info .button-container {
    background-color:rgba(var(--color-bgmid));
    border: 1px solid rgba(var(--color-bglight))
}

#info .button-container[data-action]:hover {
    background-color:rgba(var(--color-bglight));
    border: 1px solid rgba(var(--color-textdark))
}

#info .button-container[data-state="upvote"] iconify-icon[icon="bxs:upvote"],
#info .button-container[data-state="downvote"] iconify-icon[icon="bxs:downvote"] {
    color:rgba(var(--color-textlight))
}

#info .button-container[data-action="vote"] iconify-icon:hover {
    color:rgba(var(--color-theme2))
}

#info .button-container span {
    color:rgba(var(--color-textlight));
}

#info .button-container iconify-icon {
    color:rgba(var(--color-textdark));
}


#info .image-title h1 {
    margin:0;
}

#info .image-title span {
    color:rgba(var(--color-theme))
}

#info-action {
    width: 100%;
    overflow: auto;
}

#desc {
    color:rgba(var(--color-textdark))
}

#extra {
    padding-bottom: 100px;
}

#extra > * {
    grid-gap: 50px;
}

#other {
    position: relative;
    z-index: 2;
    margin-top:-50px;  
    filter: drop-shadow(0 0 10px black);
    color:rgba(var(--color-textlight));
    padding-bottom: 50px;
}

#other-container {
    width: 320px;
}

#other-container .art-container img {
    width: 100px;
    height: 100px;
    object-fit:cover;
}

@container(max-width:1000px) {
    #other-container {
        width: 100%;
    }

    #other-container .art-container {
        flex:initial
    }
}

#comments {
    flex: 1 1 auto;
}

#comment-list {
    grid-gap:20px
}



#tooltip .image-display {
    max-height: 200px;
}

#tooltip #image {
    border-radius: var(--border-radius);
    border:1px solid rgba(var(--color-bglight));
}

#tooltip #info {
    padding-top:20px
}

#tooltip #info-action,
#tooltip .image-nav {
    display: none;
}

#tooltip #info .container {
    padding:0
}