#container {

    background-color: var(--background);

    padding-bottom: 1px;

}

h2.heading_style {

    font-family: var(--font-family-sans-serif);

    margin: 8px 0;

    color: var(--white-50);

    font-size: var(--font-size--h5);
}

#banner_background_container {

    background-position: 100% 30% !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;

    min-height: 400px;
    height: calc(400px + 5vw);
    max-height: 60vh;

}

#media_info_container {

    position: relative;

    top: calc(-140px - 2vw);

    background: linear-gradient(transparent, var(--background) 17%);

}

@media((min-width: 620px)) {
    #media_info_container.custom_position {

        top: calc(-180px - 2vw);

    }
}

#media_info_container>section {

    width: 96%;

    max-width: var(--breakpoint-md);
    margin-left: auto;
    margin-right: auto;

}

@media((min-width: 1020px)) {
    #media_info_container>section {
        max-width: var(--breakpoint-xl);
    }
}

@media((min-width: 1480px)) {
    #media_info_container>section {

        max-width: var(--breakpoint-xxl);

    }
}

/* DESCRIPTION and RATING SCORE */
#info_container {

    margin-top: 32px;
    margin-bottom: 32px;

}

@media(min-width: 700px) {
    #info_container {
        display: grid;
        grid-template-columns: 65% 1fr;
        gap: 0 32px;
    }
}

@media(min-width: 1020px) {
    #info_container {
        gap: 0 64px;
    }
}

#description_episodes_related_container #description_container {

    margin-bottom: 32px;

}

#description_episodes_related_container #description_container span * {
    font-family: var(--font-family-sans-serif);
    color: var(--white-100);
}

#description_episodes_related_container #cast_container,
#description_episodes_related_container #episodes_container,
#description_episodes_related_container #related_container,
#description_episodes_related_container #similar_container {

    margin: 32px 0;

}

#description_episodes_related_container:last-child {

    margin-top: 32px;

}

#description_episodes_related_container p,
#description_episodes_related_container span {

    line-height: 1.4;

    color: var(--white-100);

}

#hype_container ul li {

    color: var(--white-100);
    font-size: var(--font-size--h5)
}

/* CAST */
#cast_container ul {

    overflow-x: auto;
    overflow-y: hidden;

    margin-top: 24px;
    padding-bottom: 24px;

    gap: 0 32px;
    display: flex;
}

/* CAST - SCROLLBAR */
#cast_container ul::-webkit-scrollbar {
    height: 8px;
}

@media(max-width:700px) {
    #cast_container ul::-webkit-scrollbar {
        height: 0px;
    }
}

#cast_container ul::-webkit-scrollbar-track {
    box-shadow: inset 0 0 8px var(--white-25);
    border-radius: 10px;
}

#cast_container ul::-webkit-scrollbar-thumb {
    background: var(--white-50);
    border-radius: 6px;
}

#cast_container ul li {
    position: relative;
    top: 0;
}

#cast_container ul li>div {

    transition: all ease-in-out 130ms;

    display: flex;
    flex-direction: column;

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

}

#cast_container ul li h3 {

    text-align: center;

    margin-top: 8px;

    color: var(--white-100);
    font-size: var(--font-size--p);
    font-weight: 400;
}

#cast_container ul li h3 {

    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;

}

#cast_container ul li .actor_container {
    visibility: hidden;
    position: absolute;
    top: 0;
}

#cast_container ul li:hover .actor_container {
    visibility: initial;
}

#cast_container ul li[data-mediatype="ANIME"]:hover .character_container {

    filter: brightness(20%);

}

#cast_container ul li[data-mediatype="ANIME"]:hover .character_container h3 {
    visibility: hidden;
}

#cast_container .img_container {

    position: relative;
    top: 0;
    height: 90px;
    width: 90px;

}

#cast_container .img_container img {
    border-radius: 50%;
    object-fit: cover;
}

#cast_container ul li .actor_container img {

    border: 2px solid var(--brand-color);

}

#cast_container p {

    color: var(--white-75);

}

/* EPISODES */
#episodes_container {

    margin: 16px 0;

}

/* GRID LIST */
#related_container>div>h2,
#similar_container>h2 {

    margin-bottom: 16px;

}

#related_container>div>a {

    color: var(--white-75);

}

#related_container>div>a:hover {

    color: var(--white-100);

}

#similar_container>ul {

    /* overflow: auto; */

    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(116px, 1fr));

    justify-content: center;
    gap: 16px;

}

@media(min-width:700px) {

    #similar_container>ul {
        justify-content: initial;
    }

}

@media(min-width:900px) {

    #similar_container>ul {
        grid-template-columns: repeat(auto-fill, minmax(141px, 1fr));
    }

}

/* NEXT EPISODE */
#next_episode_container {

    margin-bottom: 32px;

}

#next_episode_container p {

    color: var(--white-100);
    font-weight: 600;

}

#next_episode_container p span {

    font-size: var(--font-size--p);
    color: var(--brand-color);

}

/* SCORE */
#score_container {

    margin-top: 32px;
    margin-bottom: 32px;

}

#score_container ul {

    padding-top: 8px;

    display: flex;
    flex-wrap: wrap;
    gap: 16px 32px;

}

#score_container ul li {
    flex-wrap: wrap;
    flex-direction: column;
}

#score_container ul li span:first-child span:first-child svg {

    width: 32px;
    height: 32px;

}

#score_container ul li span:last-child {

    font-size: var(--font-size--small-2);
    width: max-content;
    /* margin-left: 32px; */

}

/* YT EMBEDED VIDEO */
#yt_video_container {
    margin: auto;
    margin-top: 32px;
}

@media(min-width:700px) {
    #yt_video_container {
        margin-top: 0;
    }
}


/* MORE INFO */
#more_info_container {

    margin-top: 32px;

}

#more_info_container ul {

    display: flex;
    flex-direction: column;
    gap: 8px 0;

}

#more_info_container ul li {

    padding-bottom: 16px;
    padding-top: 8px;

    color: var(--white-100);

}

#more_info_container ul li:not(:last-child) {

    border-bottom: 1px solid var(--white-25);

}

#more_info_container ul li p {

    font-size: var(--font-size--small-1);
    font-weight: 600;

    display: flex;
    flex-wrap: wrap;
    flex-direction: row;

    justify-content: space-between;

}

#more_info_container ul li span.color_brand {

    color: var(--brand-color);

}