#main {
    padding-top: 150px;
    color:rgba(var(--color-textlight));
}

#main > .flex-container {
    grid-gap:20px;
    padding-bottom:50px
}

#video {
    border-radius: 5px;
    overflow:hidden;
}

#video iframe {
    width: 100%;
    aspect-ratio: 16/9;
    border:none;
}

#series {
    width: 400px;
    padding:5px;
    background-color: rgba(var(--color-bgmid));
    border-radius: 5px;
}

#series > div:first-child {
    padding: 20px 5px;
}

#series h2 {
    margin:0
}

#series hr {
    border-color:rgba(var(--color-bglight))
}

#series-header iconify-icon {
    cursor: pointer;
}

#series-header iconify-icon:hover {
    color:rgba(var(--color-theme));
}

.playlist-container {
    max-height:400px;
    overflow: auto;
}

#other .videos-container {
    width: 400px;
}

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

    #other .videos-container {
        width: 100%;
    }
}

#info h1 {
    font-weight: bold;
    margin:0;
    font-family: var(--font-title);
}

#info-icon {
    width: 40px;
    aspect-ratio: 1;
    background-size:cover;
    background-position: center;
    border-radius: 50%;
}

#info-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

#info-series > *:nth-child(2) {
    color:rgba(var(--color-textmid));
    font-size:0.8rem;
}

#info .button-container {
    padding: 5px 20px;
}

.info-container {
    position: relative;
    background-color:rgba(var(--color-bgmid));
    padding:0px 10px;
    display: flex;
    flex-direction: column;
    grid-gap: 10px;
    max-height: 0;
    border-radius: 5px;
    overflow: hidden;
}

.info-container.activated {
    max-height: 300px;
    padding: 10px;
}

.info-container p {
    color:rgba(var(--color-textmid));
    margin:0;
    overflow: auto;
}

.info-container div {
    color:rgba(var(--color-textdark));
}


#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));
}