body {
    overscroll-behavior-y: contain; /*removes page re-load*/
    scrollbar-width: thin;
    background-color: #1e1f20;
    color: #e3e5e4;
    color: lightgray;
    font-family: system-ui;
    font-size: 1em;
    margin: 0;
    padding: 0;
}

#main {
    padding: 0;
    margin: 0;
    margin-top: 15px;
    padding-left: 15px;
    padding-right: 5px;
    padding-bottom: 72px;
}

.poster-list > span > img {
    aspect-ratio: 2 / 3;
    object-fit: cover;
    width: 100%;
    height: 100%;
    user-select: none;
    clip-path: inset(0 round 4px);
}



/* Styles for screens smaller than 768px (common for mobile) */
@media screen and (max-width: 767px) {
    @media (min-aspect-ratio: 1/1) {
        .poster-list > span {
            display: inline-block;
            cursor: pointer;
            width: 120px;
            width: calc((100% - 70px) / 7);
            margin: 0 10px 10px 0;
            padding-bottom: 20px;
        }
    }

    @media (max-aspect-ratio: 1/1) {
        .poster-list > span {
            display: inline-block;
            cursor: pointer;
            width: 120px;
            width: calc((100% - 30px) / 3);
            margin: 0 10px 10px 0;
            padding-bottom: 20px;
        }
    }

}

/* Styles for screens larger than or equal to 768px (common for desktop/tablet) */
@media screen and (min-width: 768px) {
    @media (min-aspect-ratio: 1/1) {
        .poster-list > span {
            display: inline-block;
            cursor: pointer;
            width: 120px;
            width: calc((100% - 100px) / 10);
            margin: 0 10px 10px 0;
            padding-bottom: 20px;
        }
    }

    @media (max-aspect-ratio: 1/1) {
        .poster-list > span {
            display: inline-block;
            cursor: pointer;
            width: 120px;
            width: calc((100% - 70px) / 7);
            margin: 0 10px 10px 0;
            padding-bottom: 20px;
        }
    }

}



    .poster-list > span span.titel {
        display: inline-block;
        text-align: left;
        overflow: hidden;
        white-space: nowrap;
        width: 100%;
        text-overflow: ellipsis;
    }

    .poster-list > span span.meta {
        display: inline-block;
        text-align: left;
        overflow: hidden;
        white-space: nowrap;
        width: 100%;
        text-overflow: ellipsis;
        /*-webkit-text-stroke-width: thin;*/
    }

    .poster-list header h1 {
        font-size: 38px;
        line-height: 1em;
        margin: 0;
        padding: 0;
        margin-bottom: 10px;
        font-weight: 400;
    }

    .poster-list header h2 {
        font-size: 30px;
        margin: 0;
        font-weight: 100;
    }

    .poster-list p {
        margin-top: 10px;
        margin-bottom: 15px;
        font-size: 20px;
        font-weight: 300;
        font-family: system-ui;
    }

    .tmdb {
        display: inline-block;
        background-size: cover;
        aspect-ratio: 7 / 3;
        background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiBoZWlnaHQ9IjExcHgiIHZpZXdCb3g9IjAgMCAxOTAuMjQgODEuNTIiPjxkZWZzPjxzdHlsZT4uY2xzLTF7ZmlsbDp1cmwoI2xpbmVhci1ncmFkaWVudCk7fTwvc3R5bGU+PGxpbmVhckdyYWRpZW50IGlkPSJsaW5lYXItZ3JhZGllbnQiIHkxPSI0MC43NiIgeDI9IjE5MC4yNCIgeTI9IjQwLjc2IiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+PHN0b3Agb2Zmc2V0PSIwIiBzdG9wLWNvbG9yPSIjOTBjZWExIi8+PHN0b3Agb2Zmc2V0PSIwLjU2IiBzdG9wLWNvbG9yPSIjM2NiZWM5Ii8+PHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjMDBiM2U1Ii8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHRpdGxlPkFzc2V0IDI8L3RpdGxlPjxnIGlkPSJMYXllcl8yIiBkYXRhLW5hbWU9IkxheWVyIDIiPjxnIGlkPSJMYXllcl8xLTIiIGRhdGEtbmFtZT0iTGF5ZXIgMSI+PHBhdGggY2xhc3M9ImNscy0xIiBkPSJNMTA1LjY3LDM2LjA2aDY2LjlBMTcuNjcsMTcuNjcsMCwwLDAsMTkwLjI0LDE4LjRoMEExNy42NywxNy42NywwLDAsMCwxNzIuNTcuNzNoLTY2LjlBMTcuNjcsMTcuNjcsMCwwLDAsODgsMTguNGgwQTE3LjY3LDE3LjY3LDAsMCwwLDEwNS42NywzNi4wNlptLTg4LDQ1aDc2LjlBMTcuNjcsMTcuNjcsMCwwLDAsMTEyLjI0LDYzLjRoMEExNy42NywxNy42NywwLDAsMCw5NC41Nyw0NS43M0gxNy42N0ExNy42NywxNy42NywwLDAsMCwwLDYzLjRIMEExNy42NywxNy42NywwLDAsMCwxNy42Nyw4MS4wNlpNMTAuNDEsMzUuNDJoNy44VjYuOTJoMTAuMVYwSC4zMXY2LjloMTAuMVptMjguMSwwaDcuOFY4LjI1aC4xbDksMjcuMTVoNmw5LjMtMjcuMTVoLjFWMzUuNGg3LjhWMEg2Ni43NmwtOC4yLDIzLjFoLS4xTDUwLjMxLDBIMzguNTFaTTE1Mi40Myw1NS42N2ExNS4wNywxNS4wNywwLDAsMC00LjUyLTUuNTIsMTguNTcsMTguNTcsMCwwLDAtNi42OC0zLjA4LDMzLjU0LDMzLjU0LDAsMCwwLTguMDctMWgtMTEuN3YzNS40aDEyLjc1YTI0LjU4LDI0LjU4LDAsMCwwLDcuNTUtMS4xNUExOS4zNCwxOS4zNCwwLDAsMCwxNDguMTEsNzdhMTYuMjcsMTYuMjcsMCwwLDAsNC4zNy01LjUsMTYuOTEsMTYuOTEsMCwwLDAsMS42My03LjU4QTE4LjUsMTguNSwwLDAsMCwxNTIuNDMsNTUuNjdaTTE0NSw2OC42QTguOCw4LjgsMCwwLDEsMTQyLjM2LDcyYTEwLjcsMTAuNywwLDAsMS00LDEuODIsMjEuNTcsMjEuNTcsMCwwLDEtNSwuNTVoLTQuMDV2LTIxaDQuNmExNywxNywwLDAsMSw0LjY3LjYzLDExLjY2LDExLjY2LDAsMCwxLDMuODgsMS44N0E5LjE0LDkuMTQsMCwwLDEsMTQ1LDU5YTkuODcsOS44NywwLDAsMSwxLDQuNTJBMTEuODksMTEuODksMCwwLDEsMTQ1LDY4LjZabTQ0LjYzLS4xM2E4LDgsMCwwLDAtMS41OC0yLjYyQTguMzgsOC4zOCwwLDAsMCwxODUuNjMsNjRhMTAuMzEsMTAuMzEsMCwwLDAtMy4xNy0xdi0uMWE5LjIyLDkuMjIsMCwwLDAsNC40Mi0yLjgyLDcuNDMsNy40MywwLDAsMCwxLjY4LTUsOC40Miw4LjQyLDAsMCwwLTEuMTUtNC42NSw4LjA5LDguMDksMCwwLDAtMy0yLjcyLDEyLjU2LDEyLjU2LDAsMCwwLTQuMTgtMS4zLDMyLjg0LDMyLjg0LDAsMCwwLTQuNjItLjMzaC0xMy4ydjM1LjRoMTQuNWEyMi40MSwyMi40MSwwLDAsMCw0LjcyLS41LDEzLjUzLDEzLjUzLDAsMCwwLDQuMjgtMS42NSw5LjQyLDkuNDIsMCwwLDAsMy4xLTMsOC41Miw4LjUyLDAsMCwwLDEuMi00LjY4QTkuMzksOS4zOSwwLDAsMCwxODkuNjYsNjguNDdaTTE3MC4yMSw1Mi43Mmg1LjNhMTAsMTAsMCwwLDEsMS44NS4xOCw2LjE4LDYuMTgsMCwwLDEsMS43LjU3LDMuMzksMy4zOSwwLDAsMSwxLjIyLDEuMTMsMy4yMiwzLjIyLDAsMCwxLC40OCwxLjgyLDMuNjMsMy42MywwLDAsMS0uNDMsMS44LDMuNCwzLjQsMCwwLDEtMS4xMiwxLjIsNC45Miw0LjkyLDAsMCwxLTEuNTguNjUsNy41MSw3LjUxLDAsMCwxLTEuNzcuMmgtNS42NVptMTEuNzIsMjBhMy45LDMuOSwwLDAsMS0xLjIyLDEuMyw0LjY0LDQuNjQsMCwwLDEtMS42OC43LDguMTgsOC4xOCwwLDAsMS0xLjgyLjJoLTd2LThoNS45YTE1LjM1LDE1LjM1LDAsMCwxLDIsLjE1LDguNDcsOC40NywwLDAsMSwyLjA1LjU1LDQsNCwwLDAsMSwxLjU3LDEuMTgsMy4xMSwzLjExLDAsMCwxLC42MywyQTMuNzEsMy43MSwwLDAsMSwxODEuOTMsNzIuNzJaIi8+PC9nPjwvZz48L3N2Zz4=");
        background-repeat: no-repeat;
        height: 0.7em;
    }

    .notfound {
        background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMDAiIGhlaWdodD0iMzAwIiB2aWV3Qm94PSIwIDAgMjAwIDMwMCI+PHJlY3Qgd2lkdGg9IjIwMCIgaGVpZ2h0PSIzMDAiIGZpbGw9ImJsYWNrIiAvPjwvc3ZnPg==");
    }


    nav li a {
        margin: 0;
        padding: 10px;
        color: whitesmoke;
        text-decoration: none;
    }

    nav ul {
        width: 100%;
        list-style-type: none;
        display: flex;
        margin: 0;
        padding: 0;
    }

    nav li {
        display: block;
        user-select: none;
        padding: 10px 6px;
        font-size: 1.5em;
    }

    nav a:active,
    nav a:focus {
        color: dimgray;
    }

    nav a:hover {
        color: coral
    }




.serie-details > div {
    position: relative;
    height: 120px;
    padding-bottom: 20px;
}


.serie-details .canPlay-false .play,
.serie-details .canPlay-unk .play {
    display: none;
}

.serie-details .watched-false .watched,
.serie-details .watched-unk .watched {
    display: none;
}

.serie-details .play {
    position: absolute;
    top: 93px;
    left: 93px;
}

.serie-details .watched {
    position: absolute;
    top: 90px;
    left: 90px;
    z-index: 1;
    background-color: rgba(0, 0, 0, 0.6);
}



.serie-details .tmdb {
    height: 18px;
}


.serie-details .thumbnail {
    aspect-ratio: 1 / 1;
    object-fit: cover;
    height: inherit;
    float: left;
    margin-right: 15px;
}

.serie-details > div > span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.serie-details .titel {
    font-size: 25px;
    font-size: 1.5em;
    font-weight: 500;
    font-weight: 400;
}

.serie-details .episode {
    color: #aaaaaa;
    color: #ff9900;
    color: darkgoldenrod;
    font-size: 18px;
    font-size: 20px;
    font-variant: small-caps;
    font-variant: petite-caps;
}

    .serie-details .episode b {
        color: #ff0000AA;
        color: #ff9900;
        font-weight: 100;
    }

.serie-details .meta {
    height: 4em;
    white-space: break-spaces;
    line-height: 1.3em;
    text-align: justify;
    color: darkgray;
    font-size: 16px;
}