:root {
    --custom-bg: #1c2331;
    --custom-bg-dark: #0D0D0D;
    --custom-violet: #6351ce;
    --custom-text-dark: #777;
    --custom-text-light-dark: #aaa;
    --custom-hr: #151515;
}
@media (min-width: 1800px){
    .container {
        max-width: 1800px;
    }
}

@media (max-width: 540px) {
    .container-fluid .d-flex.justify-content-center.align-items-center h1.text-white {
        font-size: 8.5vw;
    }
}

html {
  position: relative;
  min-height: 100%;
}

body {
  /* margin-bottom: 375px; */
}

main {
    background-color: #0e0e0e;
}

footer {
    /* position: absolute;
    bottom: 0;
    width: 100%;
    background-color: #f5f5f5; */
}

.custom-bg {background-color: var(--custom-bg);}

.custom-bg-dark {background-color: var(--custom-bg-dark);}
.custom-hr {background-color: var(--custom-hr);}


.custom-violet {background-color: var(--custom-violet);}

.opacity-darker {background-color: rgba(0, 0, 0, 0.2);}
.dark-text {color: var(--custom-text-light-dark); }
.darker-text {color: var(--custom-text-dark); }
.embed-responsive-portrait {padding-bottom: 140%;}
.item a figure span.embed-responsive-landscape, .embed-responsive-landscape {padding-bottom: 56.25%;}

main .container-fluid {
    max-width: 1800px;
}

a:hover {
    text-decoration: none;
}

.navbar-brand img:hover {
    filter: brightness(150%);;
    transition: 500ms all ease;
}

.item a figure span {
    width: 100%;
    position: relative;
    padding-bottom: 140%;
    display: flex;
}

.item {  }
.text-muted {color: #757C8A !important;}


.item a figure span:hover img {
    opacity: .5;
    transition: opacity 0.3s, visibility 0.3s;
}

.item a figure span:hover::before {
    font: normal normal normal 14px/1 FontAwesome;
    font-size: 3rem;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;

    content: "\f04b";
    color: white;
    z-index: 1;
    position: absolute;
    top: 50%;
    left: 50%; 
    transform: translateY(-50%) translateX(-50%);
}

.item a figure img {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    border-radius: 3px;
    background-color: #1a1a1a;
}

.fit_aspect {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
}

.item figcaption {
    
}

.item-list {

}

.page-link.active {
    background-color: #cc003a;
}
.page-link {
    border: 1px solid #161c27;
    background-color: #161c27;
    color: #c3c3c3;
}
.page-link:hover {
    background-color: #ff0049;
    border: 1px solid #161c27;
    color: #fff;
}
.page-item.disabled .page-link {
    background-color: #161c27;
    border: 1px solid #161c27;
    color: #78878C;
}

.hidden {text-indent:-999999px; display:none;}

.lazyload {
    visibility: hidden
}

.lazyloaded {
    visibility: visible
}

.watch-right {
    
}

.watch-right .watch-item {
    background-color: rgb(28,28,28);
    position: relative;
}

.watch-right .watch-item.disabled {
    user-select: none;
    pointer-events: none;
}

.watch-right .watch-item:hover {
    background-color: rgb(35,35,35);
    -webkit-transition: background-color .1s linear;
    -ms-transition: background-color .1s linear;
    transition: background-color .1s linear;
}

.watch-right .watch-title {
    font-size: 14px;
    font-weight: 500;
}

.watch-right .watch-info {
    font-size: 14px;
}

.watch-right .watch-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

.watch-details p {
    padding-top: 5px;
}

.text-sm {
    font-size: 0.9rem;
}

.tags {
    margin: 0;
}


.tags li {
    list-style-type: none;
    display: block;
    float: left;
}


.tags li a{
    padding: 7px 10px;
    display: block;
    border: 1px solid #3a3a3a;
    margin: 5px;
    background-color: #141414;
    color: #a1a1a1;
    border-radius: 7px;
}

.tags li a:hover {
    background-color: #1c1c1c;
    -webkit-transition: background-color .1s linear;
    -ms-transition: background-color .1s linear;
    transition: background-color .1s linear;
}

.watch-right .watch-item.disabled::after {
    content: "";
    text-align: center;
    vertical-align: middle;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    z-index: 1;
    height: 100%;
    background: linear-gradient(270deg, black, transparent);
}

.watch-right .watch-item.disabled::before {
    content: "Currently Watching";
    text-align: center;
    position: absolute;
    top: 50%;
    right: 20px;
    z-index: 2;
    font-size: large;
    font-weight: 600;
    text-shadow: 0 0 3px #b51e49;
    transform: translateY(-50%);
}

.likes:hover {
    color:red;
    cursor: pointer;
}

.bookmark:hover {
    color:rgb(0, 119, 255);
    cursor: pointer;
}

.bookmark_nav {
    cursor: pointer;
    user-select: none;
}

.bookmark.active {
    color:rgb(0, 119, 255);
}

/* @media screen and (max-width: 720px) { */
    .image-portrait {
        max-width: 250px;
        margin: 0 auto;
        vertical-align: top;
    }
/* } */