/* Variables */

:root {
    --dark-primary: #050504;
    --dark-primary-6b: #0505046b;
    --dark-secondary: #101014;
    --dark-secondary-6b: #1010146b;
    --dark-accent: #c9e20d;
    --dark-accent-6b: #c9e20d6b;
    --dark-accent-02: #e0023a;
    --dark-white: #F1F1F1;
    --dark-white-6b: #F1F1F16b;
    --dark-white-4b: #F1F1F14b;
    
    --tag-genre-bg-colour: #05050546;
    --tag-genre-text-colour: #F1F1F1;
    
    --tag-russian-bg-colour: #994001;
    --tag-russian-text-colour: #f59023;
    --tag-estonian-bg-colour: #344028;
    --tag-estonian-text-colour: #89e007;
    --tag-irish-bg-colour: #587617;
    --tag-irish-text-colour: #c6f431;
    --tag-korean-bg-colour: #71008e;
    --tag-korean-text-colour: #fb72f2;
    --tag-english-bg-colour: #0f4dc0;
    --tag-english-text-colour: #d1ddf5;
    --tag-arabic-bg-colour: #6c9213;
    --tag-arabic-text-colour: #dcedd8;
    --tag-italian-bg-colour: #d94835;
    --tag-italian-text-colour: #dfe4b4;
    --tag-portuguese-bg-colour: #c3c912;
    --tag-portuguese-text-colour: #3d4c46;
    --tag-hindi-bg-colour: #5ac815;
    --tag-hindi-text-colour: #fcfe86;
    --tag-sinhala-bg-colour: #613716;
    --tag-sinhala-text-colour: #d5db69;
    --tag-german-bg-colour: #6b1518;
    --tag-german-text-colour: #ffd519;
    --tag-french-bg-colour: #f6b904;
    --tag-french-text-colour: #fbf6b5;
    --tag-swedish-bg-colour: #137bbb;
    --tag-swedish-text-colour: #babacd;
    --tag-norwegian-bg-colour: #b6bb1f;
    --tag-norwegian-text-colour: #dfe4d1;
    --tag-spanish-bg-colour: #dc6750;
    --tag-spanish-text-colour: #fcc5be;
    --tag-polish-bg-colour: #61c7ae;
    --tag-polish-text-colour: #e0facb;
    --tag-romanian-bg-colour: #fe8c00;
    --tag-romanian-text-colour: #f9fe78;
    --tag-japanese-bg-colour: #331f7c;
    --tag-japanese-text-colour: #b1e540;
    --tag-turkish-bg-colour: #eb3d12;
    --tag-turkish-text-colour: #e0f0d1;
    --tag-afrikaans-bg-colour: #3f63f3;
    --tag-afrikaans-text-colour: #d6f7c4;
    --tag-albanian-bg-colour: #b94e33;
    --tag-albanian-text-colour: #ebe484;
    --tag-basque-bg-colour: #a3a926;
    --tag-basque-text-colour: #e9eccd;
    --tag-valencian-bg-colour: #9a1923;
    --tag-valencian-text-colour: #fec5d2;
    --tag-cantonese-bg-colour: #ea262c;
    --tag-cantonese-text-colour: #e7fba6;
    --tag-catalan-bg-colour: #ec4d26;
    --tag-catalan-text-colour: #d5eb12;
    --tag-dutch-bg-colour: rgb(21, 133, 185);
    --tag-dutch-text-colour: rgb(147, 236, 222);
    --tag-taiwanese-bg-colour: #e15452;
    --tag-taiwanese-text-colour: #ffc6c6;
    --tag-persian-bg-colour: #8ed305;
    --tag-persian-text-colour: #415212;
    --tag-tamil-bg-colour: #66150d;
    --tag-tamil-text-colour: #ddd8d5;
    --tag-telugu-bg-colour: #8a3f02;
    --tag-telugu-text-colour: #cde94f;
    --tag-ukranian-bg-colour: #20b0c9;
    --tag-ukranian-text-colour: #def27b;
    --tag-mandarin-bg-colour: #f8f18f;
    --tag-mandarin-text-colour: #4d3322;
    --tag-vietnamese-bg-colour: #6e1e1f;
    --tag-vietnamese-text-colour: #ea87b5;
    --tag-czech-bg-colour: #a7034a;
    --tag-czech-text-colour: #fd9c95;
    --tag-hungarian-bg-colour: #bedc43;
    --tag-hungarian-text-colour: #45614a;
    --tag-finnish-bg-colour: #01217c;
    --tag-finnish-text-colour: #d7e9ef;
    --tag-hebrew-bg-colour: #14823e;
    --tag-hebrew-text-colour: #b6d4a1;
    --tag-icelandic-bg-colour: #bbd5fc;
    --tag-icelandic-text-colour: #0044c1;
    --tag-lakota-bg-colour: #692e2a;
    --tag-lakota-text-colour: #fd9729;
    --tag-danish-bg-colour: #f9e26f;
    --tag-danish-text-colour: #3e2835;
    --tag-bulgarian-bg-colour: #ab3325;
    --tag-bulgarian-text-colour: #ffcdc0;
    --tag-greek-bg-colour: #c1c4d8;
    --tag-greek-text-colour: #2118c4;
    --tag-slovak-bg-colour: #9fcab9;
    --tag-slovak-text-colour: #0e6843;
    --tag-slovene-bg-colour: #feb9c1;
    --tag-slovene-text-colour: #283f9b;
    --tag-uzbek-bg-colour: #0d6d80;
    --tag-uzbek-text-colour: #2cd0ac;
    --tag-thai-bg-colour: #322196;
    --tag-thai-text-colour: #cac1de;
    --tag-indonesian-bg-colour: #bf5658;
    --tag-indonesian-text-colour: #f4f3f3;
    
    /* Light Mode Tags (?) */
    /* --tag-genre-bg-colour: #F1F1F12b;
    --tag-genre-text-colour: #F1F1F1;
    --tag-russian-bg-colour: #FF6F246b;
    --tag-russian-text-colour: #FFCDB6;
    --tag-estonian-bg-colour: #247cff6b;
    --tag-estonian-text-colour: #b6ffe3;
    --tag-irish-bg-colour: #99ff246b;
    --tag-irish-text-colour: #fff4b6;
    --tag-korean-bg-colour: #ff24ab6b;
    --tag-korean-text-colour: #ffcbb6; */
}

/* Document Styling */

html, body {
    min-height: 95vh;
    height: fit-content;
    width: 100vw;
    margin: 0;
    padding: 0;
    background-color: var(--dark-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

body {
    overflow-x: hidden;
}

footer {
    width: 100%;
    background-color: var(--dark-primary);
    border-top: 4px solid var(--dark-accent-02);
    display: flex;
    justify-content: flex-end;
    align-items: center;

    animation: fadeIn 2s;
    z-index: 3;
}

.footer-section {
    margin: 8px;
    display: flex;
}

#footer-logo-section {
    margin-right: auto;
}

#footer-logo > img {
    max-height: 40px;
    object-fit: contain;
}

footer ul {
    padding: 0;
}

footer button {
    margin: 0;
    padding: 0;
    background-color: transparent;
    border: none;
    transition: ease-in-out .25s;
}

footer button:hover, footer a:hover li {
    color: var(--dark-accent-02);
    font-weight: 500;
    transition: ease-in-out .25s;
}

footer button:focus-visible, footer a:focus-visible li {
    color: var(--dark-accent-02);
    font-weight: 500;
    transition: ease-in-out .25s;
}

footer li, footer li button {
    margin: 0px 4px;
    color: var(--dark-white);
    font-size: 14px;
    text-decoration: underline;
    list-style: none;
    white-space: nowrap;

    transition: ease-in-out .25s;
    cursor: pointer !important;
}

footer a li {
    color: var(--dark-white);
}

footer #footer-url {
    text-decoration: none;
}

#a-twitter {
    margin-top: 1px;
}

.footer-section:nth-last-child(1) a, .footer-section:nth-last-child(1) a:focus-visible {
    border: none;
}

.footer-section-separator {
    width: 4px;
    margin: 0;
    padding: 0;
    font-weight: 100;
    user-select: none;
}

#move-to-footer-note {
    margin: 8px;
}

#move-to-footer-note a {
    opacity: 0;
    pointer-events: none;
}

#move-to-footer-note a:focus-visible {
    opacity: 1;
    pointer-events: all;
}

/* Scrollbar */

* {
    scrollbar-width: thin;
    scrollbar-color: var(--dark-accent) var(--dark-secondary);
}

*::-webkit-scrollbar {
    max-width: 8px;
    max-height: 8px;
    border-radius: 8px;
    background-color: var(--dark-secondary);
}

*::-webkit-scrollbar-track {
    border-radius: 8px;
}

*::-webkit-scrollbar-thumb {
    border-radius: 8px;
    background-clip: border-box;
    background-color: var(--dark-accent);
}

*::-webkit-scrollbar-thumb:hover {
    background-color: var(--dark-accent);
}

/* URLs */

a {
    height: 100%;
    border: 2px solid transparent;
    text-decoration: underline;
    background-color: transparent;
    color: var(--dark-accent);
    
    cursor: pointer;
    transition: ease-in-out .25s;
}

a:focus-visible {
    border: 2px solid var(--dark-white);
    color: var(--dark-accent-02);
    transition: ease-in-out .25s;
}

/* Remove outline for non-keyboard :focus */
*:focus:not(.focus-visible) {
    outline: none;
}

a:hover {
    color: var(--dark-accent-02);
    z-index: 100;
}

/* Selected (Highlighted) Text */

::-moz-selection { /* Code for Firefox */
    color: var(--dark-primary);
    background: var(--dark-white-6b);
}

::selection {
    color: var(--dark-primary);
    background: var(--dark-white-6b);
}

/* Content */

/* Navbar */

nav {
    height: 64px;
    width: 100%;
    margin: 0;
    padding: 0;
    top: -64px;
    right: 0;
    left: 0;
    background-color: var(--dark-primary-6b);
    backdrop-filter: blur(2px);
    position: fixed;
    display: flex;
    justify-content: center;
    align-items: center;

    transition: .5s ease-in-out;
    z-index: 999;
}

.navbar-left, .navbar-center, .navbar-right {
    width: 33%;
    display: flex;
}

#navbar-logo {
    width: auto;
    display: flex;
}

#navbar-logo > img {
    width: 256px;
    object-fit: contain;
}

.navbar-center {
    width: 33%;
}

.navbar-right {
    justify-content: flex-end;
}

.navbar-right button {
    background-color: transparent;
    border: 2px solid transparent;
    transition: .25s ease-in-out;
}

.navbar-right button:focus-visible {
    border: 2px solid var(--dark-white);
    transition: .25s ease-in-out;
}

.navbar-right button h1 {
    transition: .25s ease-in-out;
}

.navbar-right button:focus-visible h1, .navbar-right button:hover h1 {
    color: var(--dark-accent);
    transition: .25s ease-in-out;
}

.navbar-right button#nav-mobile-icon {
    display: none;
}

/* .navbar-right button:active {
    border: 2px solid var(--dark-white);
    transition: .25s ease-in-out;
} */

.filter-section {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    cursor: pointer;

    transition: .2s ease-in-out;
}

.filter-section-active {
    border-bottom-left-radius: 0px;
    
    transition: .2s ease-in-out;
}

.filter-filter-icon {
    width: 24px;
    margin-left: 16px;
}

table {
    min-width: inherit;
    width: inherit;
    border: none;
    border-spacing: 0;
    text-align: left;
    box-shadow: 0px 0px 32px 0px #EC8609;

    z-index: 4;
}

table thead, table th {
    background-color: var(--dark-black-6b);
    color: #F79926;
    font-size: 32px;
    text-shadow: 0px 0px 8px #EC8609;
    padding: 8px;
    font-family: 'Poppins';
    font-weight: 900;
    text-transform: capitalize;
    white-space: nowrap;
    border-bottom: 1px solid var(--dark-white-6b);
}

table tr {
    width: inherit;
    display: flex;
}

table td {
    color: #F1F1F1;
    font-size: 16px;
    padding: 8px;
    font-family: 'Poppins';
    font-weight: 600;
}

table tr:nth-child(odd) td{
    background-color: var(--dark-primary-6b);
}

table tr:nth-child(even) td{
    background-color: var(--dark-secondary-6b);
}

/* Tables */

.filter-menu table tr td:first-of-type {
    width: 50%;
}

.filter-menu table tr td:not(table tr td:first-of-type) {
    width: 25%;
    text-align: right;
    display: flex;
    justify-content: flex-end;
}

hr {
    width: 97%;
    margin-top: 24px;
    margin-bottom: 24px;
    border-color: var(--dark-white);
}

.filter-section > p {
    font-size: 24px !important;
    color: var(--dark-white);
    margin-left: 8px;
    padding: 0;
    pointer-events: none;
}

/* Filter Menu */

.filter-menu {
    position: absolute;
    min-width: 400px;
    max-width: 512px;
    max-height: 400px;
    display: none;
    top: 56px;
    box-shadow: 0px 8px 16px 4px var(--dark-primary);
    background: var(--dark-secondary);

    overflow-y: auto !important;
    overflow-x: hidden;
    z-index: 9;
    transition: top 1s ease-in-out;
}

.button-wrapper {
    margin-top: 32px;
    margin-bottom: 32px;
    width: 100%;
    display: flex;
    justify-content: center;
}

.filter-menu-button {
    padding: 8px 16px;
    font-size: 24px;
    font-weight: 800;
    cursor: pointer;
    color: var(--dark-accent-02);
    background-color: var(--dark-primary);
    border: 2px solid transparent;
    border-radius: 8px;
    box-shadow: 0px 8px 16px var(--dark-primary);
    
    transition: .5s ease-in-out;
}

.filter-menu-button:hover {
    background-color: var(--dark-primary-6b);
    transition: .5s ease-in-out;
}

.filter-menu-button:active {
    color: var(--dark-accent);
    box-shadow: 0px 0px 4px var(--dark-primary);
    transition: .2s ease-in-out;
}

.menu-headers-section {
    width: 100%;
    height: 48px;
    display: flex;
}

.menu-heading {
    font-size: 16px;
    margin: 16px 0px 0px 8px;
    padding: 0px;
    font-family: 'Poppins', Arial, Helvetica, sans-serif;
    font-weight: 900;
    line-height: 1;
    
    margin-left: 0px;
    
    color: var(--dark-accent);
}

.menu-headers-section .menu-tag, .menu-content-section .menu-tag {
    width: 50% !important;
    height: 100%;
    margin: 0px !important;
}

.menu-language-checklist, .menu-subtitles-checklist {
    width: 25%;
}

.menu-language-options, .menu-subtitles-options {
    width: 25%;
    height: 100%;
    margin: 0px !important;
}

.list-language-tag {
    margin: 0px;
    font-family: 'Poppins';
    font-size: 16px;
    font-weight: 500;
    line-height: 1;
    margin: 4px !important;
    padding: 4px 6px 4px 6px;
    height: 24px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    margin: 0px !important;
}

.menu-content-section {
    width: 100%;
    display: flex;
}

.list-content-section {
    width: 20%;
    padding: 0px;
    margin: 8px 8px;
    display: flex;
}
/* Checklist */

.checklist-container {
    width: 16px;
    margin-bottom: 12px;
    padding-left: 14px;
    font-size: 22px;
    position: relative;
    display: block;
    
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    cursor: auto;
}

/* Hides default browser checkbox */
.checklist-container input {
    margin: 0;
    top: 0;
    left: 0;
    height: 28px;
    width: 28px;
    position: absolute;
    opacity: 0;
    
    z-index: 5;
    cursor: pointer !important;
}

/* Custom checkbox */
.checkmark {
    height: 28px;
    width: 28px;
    top: 0;
    left: 0;
    position: absolute;
    border: 2px solid var(--dark-white-6b);
    
    cursor: pointer !important;
    transition: ease-in-out .25s;
}

/* Gray checklist backgrond on hover */
.checklist-container:hover input ~ .checkmark {
    background-color: var(--dark-white-4b);
    border: 2px solid var(--dark-white-6b);
    
    transition: ease-in-out .25s;
}

/* When checklist is checked */
.checklist-container input:checked ~ .checkmark {
    background-color: var(--dark-white-6b);
    border: 2px solid var(--dark-white-6b);
    
    transition: ease-in-out .25s;
}

#menu-checkbox-filters-all, #menu-checkbox-filters-all ~ button {
    cursor: not-allowed !important;
}

#menu-checkbox-filters-all + span {
    cursor: not-allowed !important;
}

/* Radio button */

.radio-button {
    height: 29px;
    width: 29px;
    font-family: 'Poppins';
    font-size: 20px;
    font-weight: 700;
    line-height: 1.4;
    display: block;
    border: 2px solid var(--dark-white-6b);
    border-radius: 50%;
    
    cursor: pointer !important;
    transition: ease-in-out .25s;
}

.radio-button:hover {
    background-color: var(--dark-white-4b);
    border: 2px solid var(--dark-white-6b);
    
    transition: ease-in-out .25s;
}

.radio-button:active {
    background-color: var(--dark-white-6b);
    border: 2px solid var(--dark-white-6b);
    
    transition: ease-in-out .25s;
}

/* Navbar */

.navbar-icon-wrapper {
    width: auto;
    height: 100%;
    margin: 0px 8px 0px 8px;
    display: flex;
    align-items: center;
    justify-content: center;;
}

.navbar-icon {
    width: 64px;
    cursor: pointer;
    user-drag: none;  
    user-select: none;
    -moz-user-select: none;
    -webkit-user-drag: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}

.navbar-right .navbar-icon {
    width: 32px;
}

/* Navabr Modal */

.hidden {
    display: none;
}

#modal-submit-content, #modal-report, #modal-faq, #modal-contact, #modal-terms-and-conditions, #modal-privacy-policy, #modal-cookie-policy, #modal-about, #modal-changelog, #modal-contact, #modal-menu {
    min-width: 512px;
    z-index: 99;
}

#mobile-nav-menu {
    width: 100vw;
    height: calc(100vh - 64px);
    left: 0;
    top: 64px;
    left: 100vw;
    background-color: var(--dark-primary);
    position: absolute;
    display: none;
    align-items: center;
    justify-content: center;
    flex-direction: column;

    transition: left .5s ease-in-out;
    z-index: 10;
}

#mobile-nav-menu.open {
    left: 0;
    transition: left .5s ease-in-out;
}

body:has(#mobile-nav-menu.open) {
    overflow-y: hidden;
}

#mobile-nav-menu button {
    margin: 8px 0px;
    cursor: pointer;
}

#mobile-nav-menu button h1 {
    font-size: 32px;
}

.modal-menu {
    height: inherit;
    overflow-y: hidden;
}

.modal-menu > .modal-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.mfp-bg {
    height: 100vh;
    width: 100vw;
}

.mfp-container {
    width: 100vw !important;
    overflow: hidden;
}

.mfp-content {
    padding: 48px;
    max-width: 80vw;
    width: fit-content;
    max-height: 80vh;
    height: fit-content;
    background: var(--dark-primary);
    box-shadow: 0px 0px 64px 32px var(--dark-primary);
    overflow-x: auto;
}

.mfp-close {
    font-size: 32px !important;
    color: var(--dark-white) !important;
    transition: .25s ease-in-out;
}

.mfp-close:focus-visible {
    border: 2px solid var(--dark-white);
    transition: ease-in-out .25s;
}

.modal-info .embed-content {
    min-height: 90vh;
    padding-bottom: 64px;
}

.modal-info {
    overflow: hidden;
}

#content {
    margin: 64px 32px 32px 32px;
    animation: fadeIn 2s;
}

.modal-info h1, #content > h1 {
    font-family: 'Poppins';
    margin: 32px 0px 16px 0px;
    font-size: 48px;
    font-weight: 700;
    line-height: 1.2 !important;
    color: var(--dark-accent);
    filter: drop-shadow(4px 4px 0px var(--dark-accent-02));
}

.modal-info h2, #content > h2 {
    font-family: 'Poppins';
    margin: 32px 0px 16px 0px;
    font-size: 32px;
    font-weight: 700;
    line-height: 1.2 !important;
    color: var(--dark-accent);
    filter: drop-shadow(4px 4px 0px var(--dark-accent-02));
}

.modal-info p, #content > p {
    font-family: 'Poppins';
    font-size: 20px;
    font-weight: 400;
    line-height: 1.4;
    color: var(--dark-white);
}

#content > hr {
    width: 100%;
}

.modal-info summary {
    font-family: 'Poppins';
    font-size: 32   px;
    font-weight: 700;
    line-height: 1.2 !important;
    color: var(--dark-accent);
    filter: drop-shadow(4px 4px 0px var(--dark-accent-02));
}

.modal-info hr {
    margin: 32px 0px;
    width: 100%;
    opacity: 33%;
}

.modal-info p.form-disclaimer {
    margin: 0;
    color: var(--dark-white-6b);
    font-weight: 400;
}

.modal-info p.form-disclaimer a {
    color: var(--dark-accent-6b);
}

.modal-info p.form-disclaimer a:hover {
    color: var(--dark-accent-02);
}

/* Changelog */

.accordian {
    margin: 32px 0px;
    padding: 8px;
    background-color: var(--dark-secondary);
    border: 2px solid transparent;
    border-radius: 48px;
    cursor: auto;

    transition: ease-in-out .25s;
}

.accordian:focus-visible {
    border: 2px solid var(--dark-white);
    transition: ease-in-out .25s;
}

.accordian-title {
    padding: 8px;
    border-radius: 48px !important;
    display: flex;
    justify-content: center;

    cursor: pointer;
}

.accordian-title h2 {
    margin: 0;
    text-align: center;
}

.accordian-title img {
    margin-left: 16px;
    width: 16px;

    transition: .25s ease-in-out;
}

.accordian-icon-active {
    transform: rotate(-180deg);

    transition: .25s ease-in-out;
}

.accordian-active {
    transition: .25s ease-in-out;
}

.accordian-content {
    padding: 16px;
}

.accordian-content hr {
    margin: 16px 0px;
}

/* Embeds */

.video-content, .embed-content {
    margin-top: 48px;
    min-height: 75vh;
    display: flex;
}

.video-content iframe {
    max-width: 80vw;
    max-height: 80vh;
    width: 50vw;
    height: 50vh;
    display: block;
    position: absolute;
}

.embed-content iframe {
    /* max-width: 80vw;
    max-height: 80vh;
    width: 50vw;
    height: 50vh; */
    width: 100%; /* <-- ORIGINAL */
    height: fit-content;
    display: block;

    animation: fadeInDelay 2s ease-in-out;
}

/* Main */

#media-items-wrapper {
    width: 95vw;
    min-height: 95vh;
    height: auto;
    margin-top: 5vh;
    border-radius: 24px 24px 0px 0px;
    background-color: var(--dark-secondary);
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;

    animation: fadeIn 1s;
    z-index: 2;
}

@keyframes fadeIn {
    0% {
        opacity: 0%;
    }
    
    33% {
        opacity: 0%;
    }
    
    100% {
        opacity: 100%;
    }
}

@keyframes fadeInDelay {
    0% {
        opacity: 0%;
    }
    
    66% {
        opacity: 0%;
    }
    
    100% {
        opacity: 100%;
    }
}

@keyframes fadeInTransform {
    0% {
        opacity: 0%; bottom: -64px;
    }
    
    33% {
        opacity: 0%; bottom: -64px;
    }
    
    100% {
        opacity: 100%; bottom: 0px;
    }
}

/* overlay at start */
.mfp-fade.mfp-bg {
    opacity: 0;
  
    -webkit-transition: all .25s ease-out;
    -moz-transition: all .25s ease-out;
    transition: all .25s ease-out;
  }
  /* overlay animate in */
  .mfp-fade.mfp-bg.mfp-ready {
    opacity: 0.8;
  }
  /* overlay animate out */
  .mfp-fade.mfp-bg.mfp-removing {
    opacity: 0;
  }
  
  /* content at start */
  .mfp-fade.mfp-wrap .mfp-content {
    opacity: 0;
  
    -webkit-transition: all .25s ease-out;
    -moz-transition: all .25s ease-out;
    transition: all .25s ease-out;
  }
  /* content animate it */
  .mfp-fade.mfp-wrap.mfp-ready .mfp-content {
    opacity: 1;
  }
  /* content animate out */
  .mfp-fade.mfp-wrap.mfp-removing .mfp-content {
    opacity: 0;
  }

@keyframes contentSectionHeaderfadeIn {
    0% {
        opacity: 0%;
    }
    
    66% {
        opacity: 0%;
    }
    
    100% {
        opacity: 100%;
    }
}

@keyframes navbar-animate-in {
    0% {
        top: -33%;
        visibility: hidden;
    }

    2% {
        visibility: visible;
    }
    
    33% {
    }
    
    100% {
        top: 0px;
    }
}

/* Media Items */

.media-items {
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.media-item {
    position: relative;
    min-width: 400px;
    width: 550px;
    height: auto;
    margin: 16px;
    padding-bottom: 4px;
    border-radius: 12px;
    background-color: var(--dark-secondary);
    /* border: 4px solid var(--dark-accent-02); */
    box-shadow: 0px 0px 8px 4px var(--dark-primary);
    display: flex;
    flex-direction: column;
    flex-basis: 400px;
    max-width: 768px;
    flex-grow: 2;
    flex-shrink: 2;

    transition: 0.8s cubic-bezier(0.075, 0.82, 0.165, 1) .1s;
    animation: fadeIn 2s;
}

.isotope .item {
    transition-property: opacity !important;
  }

.media-item:hover {
    transform: translateZ(0) scale(1.02);
    box-shadow: 0px 8px 16px 8px var(--dark-primary);

    transition: 0.8s cubic-bezier(0.075, 0.82, 0.165, 1) 0s;
}

.thumbnail-section {
    overflow: hidden;
    border-radius: 8px;
}

.thumbnail {
    height: 256px;
    width: 100%;
    margin-top: -20px;
    transform: translateZ(0) scale(1.00);
    background-position: top center;
    background-size: cover;
    background-repeat: no-repeat;
    backface-visibility: hidden;
    
    cursor: pointer;
    transition: ease-in-out .5s;
}

.thumbnail:hover {
    backface-visibility: hidden;
    transform: translateZ(0) scale(1.05);
    /* filter: saturate(75%) brightness(125%); */
    
    /* transition: .5s ease-in-out; */
    transition: 0.8s cubic-bezier(0.075, 0.82, 0.165, 1) 0s
}

/* Media Item Details */

.details-section {
    margin-top: -96px;
    width: 100%;
    z-index: 1;
}

.title-section {
    width: 100%;
    margin: 8px 8px 0px 8px;
    color: var(--dark-white);
}

.about-section {
    width: 100%;
    margin: 0px 8px 0px 8px;
    display: flex;
    align-items: center;
}

.about-section-year, .about-section-divider, .about-section-regions {
    margin: 0;
    font-size: 16px;
}

.content-description-note {
    margin: 8px 2px;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 15px;
    line-height: 1.8;
    background-color: var(--dark-secondary-6b);
}

/* Text */

img {
    color: var(--dark-white);
    font-family: 'Poppins';
    font-size: 16px;
    font-weight: 200;
    line-height: 1;
    text-shadow: 0px 0px 4px var(--dark-primary);
}

h1 {
    margin: 0;
    padding: 0;
    color: var(--dark-white);
    font-family: 'Poppins';
    font-size: 22px;
    font-weight: 800;
    line-height: 1;
    filter: drop-shadow(3px 3px 0px var(--dark-secondary-6b)) drop-shadow(0px 0px 2px var(--dark-secondary-6b));
}

h1 a {
    color: var(--dark-white);
}

p, #move-to-footer-note {
    color: var(--dark-white);
    font-family: 'Poppins';
    font-size: 20px;
    font-weight: 500;
    line-height: 1.4;
}

#move-to-footer-note > a {
    white-space: nowrap;
}

li {
    margin: 8px 0px;
    color: var(--dark-white);
    font-family: 'Poppins';
    font-size: 20px;
    font-weight: 500;
    line-height: 1.4;
}

hr {
    width: 80%;
}

/* Icons */

.icon-show-more {
    width: 8px;
    margin-left: 4px;
    filter: brightness(10000%);
    border: 2px solid transparent;
    
    cursor: pointer;
    transition: .25s ease-in-out;
}

.icon-show-more:focus-visible {
    border: 2px solid var(--dark-white);
    transition: ease-in-out .25s;
}

.icon-toggle-enabled {
    transform: rotate(-180deg);
    filter: drop-shadow(0px 0px 4PX 2px #0A0A0A);
    
    transition: .25s ease-in-out;
}

.icon-flag {
    width: 20px;
    height: 20px;
    margin-right: 8px;
}

.icon-verified, .icon-restrictions {
    width: 16px;
    height: 16px;
    margin-right: 4px;
}

.icon-restrictions {
    cursor: pointer;
}

.icon-info {
    height: 12px;
    width: 12px;
    margin-right: 6px;
    
    pointer-events: none;
}

.info-about-section {
    width: 12px;
    height: 12px;
    
    pointer-events: all;
}

/* Content Restrictions */

.content-restrictions-list {
    max-height: 256px;
    overflow-y: auto;
}

.content-restrictions-list > ul {
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
}

.content-restrictions-list > ul > li {
    margin: 0;
    font-size: 12px;
    list-style: none;
    display: flex;
    align-items: center;
}

/* Tags */

.tag-section-area {
    margin-left: 8px;
}

.tag-section {
    width: 100%;
    margin: 0;
    white-space: nowrap;
    overflow-x: hidden;
    text-overflow: ellipsis;
    display: flex;
    flex-wrap: nowrap;
}

.tag-section-header-wrapper {
    margin-top: 8px;
    display: flex;
    align-items: center;
    filter: drop-shadow(3px 3px 0px var(--dark-secondary-6b)) drop-shadow(0px 0px 2px var(--dark-secondary-6b));
}

.tag-section-header {
    margin: 0;
    color: var(--dark-accent);
    font-family: 'Poppins';
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    
    cursor: pointer;
}

.tag.subtitles-extension {
    text-decoration: solid 2px underline;
    text-decoration-color: var(--dark-primary-6b);
}

.tag.subtitles-conditional {
    text-decoration: dotted 2px underline;
    text-decoration-color: var(--dark-primary-6b);
}

.tag {
    height: auto;
    margin: 4px 4px 4px 0px;
    padding: 4px 6px 4px 6px;
    border-radius: 8px;
    font-family: 'Poppins';
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    display: inline-flex;
    align-items: center;
}

.tag-none {
    background-color: var(--dark-black);
    color: var(--dark-white);
    border: 1px solid var(--dark-white-6b);
    opacity: 0;
}

.tag-all {
    background-color: var(--dark-black);
    color: var(--dark-white);
    border: 1px solid var(--dark-white-4b);
}

.tag-genre {
    font-size: 12px;
    padding: 4px 6px 4px 6px;
    background-color: var(--tag-genre-bg-colour);
    color: var(--tag-genre-text-colour);
    border: 2px solid transparent;
    
    cursor: pointer;
    transition: ease-in-out .25s;
}

.tag-genre:focus-visible {
    border: 2px solid var(--dark-white);
    transition: ease-in-out .25s;
}

.tag-language-all {
    border: 1px solid var(--dark-secondary);
    background-color: var(--dark-primary);
    color: var(--dark-white);
}

.tag-russian {
    background-color: var(--tag-russian-bg-colour);
    color: var(--tag-russian-text-colour);
}

.tag-estonian {
    background-color: var(--tag-estonian-bg-colour);
    color: var(--tag-estonian-text-colour);
}

.tag-irish {
    background-color: var(--tag-irish-bg-colour);
    color: var(--tag-irish-text-colour);
}

.tag-korean {
    background-color: var(--tag-korean-bg-colour);
    color: var(--tag-korean-text-colour);
}

.tag-english, .tag-english-usa, .tag-english-uk, .tag-english-ca {
    background-color: var(--tag-english-bg-colour);
    color: var(--tag-english-text-colour);
}

.tag-arabic {
    background-color: var(--tag-arabic-bg-colour);
    color: var(--tag-arabic-text-colour);
}

.tag-italian {
    background-color: var(--tag-italian-bg-colour);
    color: var(--tag-italian-text-colour);
}

.tag-portuguese, .tag-portuguese-br, .tag-portuguese-pt {
    background-color: var(--tag-portuguese-bg-colour);
    color: var(--tag-portuguese-text-colour);
}

.tag-hindi {
    background-color: var(--tag-hindi-bg-colour);
    color: var(--tag-hindi-text-colour);
}

.tag-sinhala {
    background-color: var(--tag-sinhala-bg-colour);
    color: var(--tag-sinhala-text-colour);
}

.tag-german {
    background-color: var(--tag-german-bg-colour);
    color: var(--tag-german-text-colour);
}

.tag-french, .tag-french-qc, .tag-french-fr {
    background-color: var(--tag-french-bg-colour);
    color: var(--tag-french-text-colour);
}

.tag-swedish {
    background-color: var(--tag-swedish-bg-colour);
    color: var(--tag-swedish-text-colour);
}

.tag-norwegian {
    background-color: var(--tag-norwegian-bg-colour);
    color: var(--tag-norwegian-text-colour);
}

.tag-spanish, .tag-spanish-es, .tag-spanish-la {
    background-color: var(--tag-spanish-bg-colour);
    color: var(--tag-spanish-text-colour);
}

.tag-polish {
    background-color: var(--tag-polish-bg-colour);
    color: var(--tag-polish-text-colour);
}

.tag-romanian {
    background-color: var(--tag-romanian-bg-colour);
    color: var(--tag-romanian-text-colour);
}

.tag-japanese {
    background-color: var(--tag-japanese-bg-colour);
    color: var(--tag-japanese-text-colour);
}

.tag-turkish {
    background-color: var(--tag-turkish-bg-colour);
    color: var(--tag-turkish-text-colour);
}

.tag-afrikaans {
    background-color: var(--tag-afrikaans-bg-colour);
    color: var(--tag-afrikaans-text-colour);
}

.tag-albanian {
    background-color: var(--tag-albanian-bg-colour);
    color: var(--tag-albanian-text-colour);
}

.tag-basque {
    background-color: var(--tag-basque-bg-colour);
    color: var(--tag-basque-text-colour);
}

.tag-valencian {
    background-color: var(--tag-valencian-bg-colour);
    color: var(--tag-valencian-text-colour);
}

.tag-cantonese {
    background-color: var(--tag-cantonese-bg-colour);
    color: var(--tag-cantonese-text-colour);
}

.tag-catalan {
    background-color: var(--tag-catalan-bg-colour);
    color: var(--tag-catalan-text-colour);
}

.tag-dutch {
    background-color: var(--tag-dutch-bg-colour);
    color: var(--tag-dutch-text-colour);
}

.tag-taiwanese {
    background-color: var(--tag-taiwanese-bg-colour);
    color: var(--tag-taiwanese-text-colour);
}

.tag-persian {
    background-color: var(--tag-persian-bg-colour);
    color: var(--tag-persian-text-colour);
}

.tag-tamil {
    background-color: var(--tag-tamil-bg-colour);
    color: var(--tag-tamil-text-colour);
}

.tag-telugu {
    background-color: var(--tag-telugu-bg-colour);
    color: var(--tag-telugu-text-colour);
}

.tag-ukranian {
    background-color: var(--tag-ukranian-bg-colour);
    color: var(--tag-ukranian-text-colour);
}

.tag-mandarin {
    background-color: var(--tag-mandarin-bg-colour);
    color: var(--tag-mandarin-text-colour);
}

.tag-vietnamese {
    background-color: var(--tag-vietnamese-bg-colour);
    color: var(--tag-vietnamese-text-colour);
}

.tag-czech {
    background-color: var(--tag-czech-bg-colour);
    color: var(--tag-czech-text-colour);
}

.tag-hungarian {
    background-color: var(--tag-hungarian-bg-colour);
    color: var(--tag-hungarian-text-colour);
}

.tag-finnish {
    background-color: var(--tag-finnish-bg-colour);
    color: var(--tag-finnish-text-colour);
}

.tag-hebrew {
    background-color: var(--tag-hebrew-bg-colour);
    color: var(--tag-hebrew-text-colour);
}

.tag-icelandic {
    background-color: var(--tag-icelandic-bg-colour);
    color: var(--tag-icelandic-text-colour);
}

.tag-lakota {
    background-color: var(--tag-lakota-bg-colour);
    color: var(--tag-lakota-text-colour);
}

.tag-danish {
    background-color: var(--tag-danish-bg-colour);
    color: var(--tag-danish-text-colour);
}

.tag-bulgarian {
    background-color: var(--tag-bulgarian-bg-colour);
    color: var(--tag-bulgarian-text-colour);
}

.tag-greek {
    background-color: var(--tag-greek-bg-colour);
    color: var(--tag-greek-text-colour);
}

.tag-slovak {
    background-color: var(--tag-slovak-bg-colour);
    color: var(--tag-slovak-text-colour);
}

.tag-slovene {
    background-color: var(--tag-slovene-bg-colour);
    color: var(--tag-slovene-text-colour);
}

.tag-uzbek {
    background-color: var(--tag-uzbek-bg-colour);
    color: var(--tag-uzbek-text-colour);
}

.tag-thai {
    background-color: var(--tag-thai-bg-colour);
    color: var(--tag-thai-text-colour);
}

.tag-indonesian {
    background-color: var(--tag-indonesian-bg-colour);
    color: var(--tag-indonesian-text-colour);
}

#bg-img-wayside {
    --bg-img-url: url(./ASSETS/WALLPAPERS/wallpaper-wayside.jpg);
    background-image: linear-gradient(transparent 20%, var(--dark-secondary) 99%), var(--bg-img-url);
}

#bg-img-heidi-girl-of-the-alps {
    --bg-img-url: url(./ASSETS/WALLPAPERS/wallpaper-heidi-girl-of-the-alps.jpg);
    background-image: linear-gradient(transparent 20%, var(--dark-secondary) 99%), var(--bg-img-url);
    background-position: center 40%;
}

#logo-heidi-girl-of-the-alps {
    max-width: 300px;
}

#bg-img-mr-young {
    --bg-img-url: url(./ASSETS/WALLPAPERS/wallpaper-mr-young.jpg);
    background-image: linear-gradient(transparent 20%, var(--dark-secondary) 99%), var(--bg-img-url);
    background-position: center 15%;
}

#logo-mr-young {
    max-width: 400px;
}

#bg-img-ramdam {
    --bg-img-url: url(./ASSETS/WALLPAPERS/wallpaper-ramdam.jpg);
    background-image: linear-gradient(transparent 20%, var(--dark-secondary) 99%), var(--bg-img-url);
    background-position: 25% center;
}

#logo-ramdam {
    max-width: 480px;
}

#bg-img-6teen {
    --bg-img-url: url(./ASSETS/WALLPAPERS/wallpaper-6teen.jpg);
    background-image: linear-gradient(transparent 20%, var(--dark-secondary) 99%), var(--bg-img-url);
    background-position: 10% center;
}

#logo-6teen {
    max-width: 400px;
}

#bg-img-the-berenstain-bears {
    --bg-img-url: url(./ASSETS/WALLPAPERS/wallpaper-the-berenstain-bears.jpg);
    background-image: linear-gradient(transparent 20%, var(--dark-secondary) 99%), var(--bg-img-url);
    background-position: center 20%;
}

#bg-img-stoked {
    --bg-img-url: url(./ASSETS/WALLPAPERS/wallpaper-stoked.jpg);
    background-image: linear-gradient(transparent 20%, var(--dark-secondary) 99%), var(--bg-img-url);
    background-position: center center;
}

#logo-stoked {
    max-width: 330px;
}

#bg-img-the-world-of-peter-rabbit-and-friends {
    --bg-img-url: url(./ASSETS/WALLPAPERS/wallpaper-the-world-of-peter-rabbit-and-friends.jpg);
    background-image: linear-gradient(transparent 20%, var(--dark-secondary) 99%), var(--bg-img-url);
    background-position: center center;
}

#logo-franklin {
    max-width: 310px;
}

#bg-img-franklin {
    --bg-img-url: url(./ASSETS/WALLPAPERS/wallpaper-franklin.jpg);
    background-image: linear-gradient(transparent 20%, var(--dark-secondary) 99%), var(--bg-img-url);
    background-position: center 55%;
}

#logo-jacob-two-two {
    max-width: 330px;
}

#logo-extra-english {
    max-width: 400px;
}

#logo-extra-french {
    max-width: 400px;
}

#logo-extra-spanish {
    max-width: 400px;
}

#logo-extra-german {
    max-width: 400px;
}

#bg-img-jacob-two-two {
    --bg-img-url: url(./ASSETS/WALLPAPERS/wallpaper-jacob-two-two.jpg);
    background-image: linear-gradient(transparent 20%, var(--dark-secondary) 99%), var(--bg-img-url);
    background-position: center 55%;
}

#bg-img-jimmy-two-shoes {
    --bg-img-url: url(./ASSETS/WALLPAPERS/wallpaper-jimmy-two-shoes.jpg);
    background-image: linear-gradient(transparent 20%, var(--dark-secondary) 99%), var(--bg-img-url);
    background-position: center 10%;
}

#bg-img-extra-english {
    --bg-img-url: url(./ASSETS/WALLPAPERS/wallpaper-extra-english.jpg);
    background-image: linear-gradient(transparent 20%, var(--dark-secondary) 99%), var(--bg-img-url);
    background-position: center 10%;
}

#bg-img-extra-german {
    --bg-img-url: url(./ASSETS/WALLPAPERS/wallpaper-extra-german.jpg);
    background-image: linear-gradient(transparent 20%, var(--dark-secondary) 99%), var(--bg-img-url);
    background-position: center 10%;
}

#bg-img-extra-spanish {
    --bg-img-url: url(./ASSETS/WALLPAPERS/wallpaper-extra-spanish.jpg);
    background-image: linear-gradient(transparent 20%, var(--dark-secondary) 99%), var(--bg-img-url);
    background-position: center 10%;
}

#bg-img-extra-french {
    --bg-img-url: url(./ASSETS/WALLPAPERS/wallpaper-extra-french.jpg);
    background-image: linear-gradient(transparent 20%, var(--dark-secondary) 99%), var(--bg-img-url);
    background-position: center 10%;
}

#bg-img-chez-mimi {
    --bg-img-url: url(./ASSETS/WALLPAPERS/wallpaper-chez-mimi.jpg);
    background-image: linear-gradient(transparent 20%, var(--dark-secondary) 99%), var(--bg-img-url);
    background-position: center 30%;
}

@media screen and (max-width: 800px) {
    #content #bg-img-wayside,
    #content #bg-img-heidi-girl-of-the-alps,
    #content #bg-img-mr-young,
    #content #bg-img-ramdam,
    #content #bg-img-6teen,
    #content #bg-img-the-berenstain-bear,
    #content #bg-img-stoked,
    #content #bg-img-the-world-of-peter-rabbit-and-friends,
    #content #bg-img-franklin,
    #content #bg-img-jacob-two-two,
    #content #bg-img-jimmy-two-shoes, 
    #content #bg-img-extra-english,
    #content #bg-img-extra-german,
    #content #bg-img-extra-spanish,
    #content #bg-img-extra-french,
    #content #bg-img-chez-mimi {
        background-image: linear-gradient(var(--dark-secondary-6b) 20%, var(--dark-secondary) 99%), var(--bg-img-url);
    }
}

/* Forms */

textarea {
    font-family: 'Poppins';
    height: 80px;
    color: var(--dark-primary);
}

button {
    font-family: 'Poppins';
    color: var(--dark-primary);
}

/* Media Queries */

@media screen and (max-width: 1200px) {
    footer {
        flex-direction: column;
    }

    #footer-logo-section {
        margin: 8px 0px;
    }

    .footer-section {
        margin: 0px 8px;
    }

    .footer-section-separator {
        display: none;
    }
}

@media screen and (max-width: 800px) {
    #media-items-wrapper {
        width: 100vw;
        margin-top: 64px;
    }
    
    .thumbnail {
        height: 128px;
    }

    .media-item {
        min-width: 300px;
        width: 300px;
        flex-direction: column;
        flex-basis: 300px;
    }
}

@media screen and (max-width: 700px) {
    .thumbnail {
        height: 192px;
    }

    #modal-submit-content, #modal-report, #modal-faq, #modal-contact, #modal-terms-and-conditions, #modal-privacy-policy, #modal-cookie-policy, #modal-about, #modal-changelog, #modal-contact {
        min-width: 256px;
        width: 100%;
        min-height: 100%;
        height: fit-content;
        padding: 0;
    }
    
    .mfp-content {
        padding: 0px;
        max-width: 100vw;
        width: 100vw;
        max-height: 100vh;
        height: 100vh;
        background-color: var(--dark-primary-6b);
        backdrop-filter: blur(8px);
    }
    
    .mfp-container {
        padding: 0 !important;
        display: flex;
    }

    .modal-info {
        padding: 16px;
    }

    .modal-info h1 {
        margin: 0;
        font-size: 32px;
        font-weight: 900;
        line-height: 1;
    }

    .modal-info h2 {
        margin: 0;
        font-size: 24px;
        font-weight: 900;
        line-height: 1;
    }

    .modal-info p {
        padding: 0;
        font-size: 16px;
        font-weight: 400;
        line-height: 1.4;
    }

    .accordian-title h2 {
        margin: 0;
        text-align: center;
        filter: drop-shadow(3px 3px 0px var(--dark-accent-02));
    }

    .accordian-content li {
        font-size: 16px;
        line-height: 1.4;
    }
    
    .filter-menu, .sort-menu {
        inset: 0;
        min-height: 50vh;
        max-height: 50vh;
        min-width: 100vw;
        width: 100vw;
        top: 0;
        right: auto;
        top: 50vh;
        left: 0;
        border-radius: 32px 32px 0px 0px;
        position: fixed;
    }

    .sort-menu table, .filter-menu table {
        padding-top: 16px;
    }

    .navbar-right > button:nth-of-type(2),
    .navbar-right > button:nth-of-type(3),
    .navbar-right > button:nth-of-type(4) {
        display: none;
    }

    .navbar-right button#nav-mobile-icon,
    .navbar-right .mobile-nav-menu button {
        display: block;
    }

    #mobile-nav-menu {
        display: flex;
    }
}

@media screen and (max-width: 512px) {
    .navbar-icon-wrapper {
        width: 32px;
        margin: 0px 8px 0px 8px;
    }

    .navbar-icon-wrapper:first-of-type {
        width: auto;
    }

    #navbar-logo > img {
        width: 192px;
    }

    footer li button, footer li {
        font-size: 12px;
        margin: 2px;
    }
    
    #a-twitter {
        font-size: 13px;
        margin-top: 4px;
    }
    
    footer {
        padding-bottom: 16px;
    }
}

@media screen and (max-width: 456px) {
    .navbar-icon-wrapper {
        width: 32px;
        margin: 0px 4px 0px 4px;
    }
    
    .media-item {
        margin: 16px;
    }
}