#image {
    padding-top:150px;
}

.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;
}


.image-display {
    height: 600px;
    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))
}

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

#extra {
    padding-bottom: 100px;
}

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

#other {
    color:rgba(var(--color-textlight))
}

#other-container {
    width: 320px;
}

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

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

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

#comments {
    flex: 1 1 auto;
}

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