:root{
    --bkgd:#111;
    --text:#FEFEFE;
    --movie:#fff;
    --movie:#fff;
    --movie:#fff;
    --movie:#fff;
    --movie:#fff;
    --movie:#fff;
    --webseries:#fff;
}
a{
    color:var(--text);
}
body{
    background:var(--bkgd);
    color:var(--text);
    font-family: Arial, Helvetica, sans-serif;
    font-size:1rem;
    margin:60px 0 100px 10px;
}
b{
    &[tag]{
        background:var(--text);
        padding: 2px 8px;
        display:block;
        flex-grow:0;
        font-size:.75rem;
        margin-bottom:10px;
        max-width:max-content;
        color: var(--bkgd);
    }
}
h1{
    margin:0 20px;
    padding:0;
}
.current{
    display:none;
    margin-bottom:20px;
    &[active]{
        display:block;
    }
}
.item{
    display:flex;
    flex-direction:column;
    margin:0 0 40px 0;
    padding:0 20px;
    .img{
        margin-bottom:20px;
    }
    .inf{
        font-size:.9rem;
        margin:0 0 20px 0;
        > div{
            margin:15px 0 0 0;
            max-width:500px;
            >b{display:block;}
        }
    }
}   
.in{
    margin:10px 20px;
    min-height:100px;
    a{
        color:var(--text);
        display:inline-block;
        padding:0 10px 0 0;
    }
}
.sbdb{  
    background: #ffb300;
    color: var(--bkgd);
    font-weight: bold;
    margin: 30px 0 0;
    padding: 10px;
    text-decoration: none;
}
.tl{
    border-left:1px solid var(--text);
    display:flex;
    flex-direction:column;
    gap:20px;
    padding:0 0;
    .y{
        display:flex;
        flex-direction:column;
        gap:20px;
        .yc{
            /* margin:0 0 60px 0; */
            min-height:200px;
        }
        .yt{
            align-items:center;
            display:flex;
            flex-direction:row;
            text-align:center;   
            justify-content:flex-start;
            > i{
                background:var(--text);
                display:block;
                height:2px;
                width:20px;
                margin:0 6px 0 0;
            }
        }
        &:first-child{
            margin-top:-10px;
        }
    }
    &:first-child{
        padding:0;
    }
    &[filter]{
        >div{
            display:none;
            &[active]{display:flex;}
        }
    }
}
.tm{
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    gap:20px;
    height:max-content;
    margin:0 0 60px 0;
    max-width:1000px;
    min-height:60px;
    min-width:200px;
    width:100%;
    .tms{
        display:flex;
        flex-direction:row;
        flex-wrap:wrap;
        gap:10px;
        line-height:50px;
        margin:0 20px;
        width:100%;
        button{
            background:var(--text);
            border:0;
            color:var(--bkgd);
            cursor:pointer;
            height:30px;
            padding:0 8px;
            white-space:nowrap;
        }
        &[active]{
            >button{
                opacity:0.5;
                &[active]{
                    opacity: 1;
                }
            }   
        }
    }
}
.h150{height:50vw;max-height:150px;}
.h200{height:50vw;max-height:200px;}
.w200,.w250{width:50vw;}
*[hide]{display:none!important;}