@charset "UTF-8";

/*---------------------------------------/*
 # SETTINGS
/*---------------------------------------*/
@font-face {
    font-family: bodyFont;
    src: url(assets/fonts/Ubuntu/Ubuntu-Regular.woff2) format("woff2");
    font-display: swap;
}

@font-face {
    font-family: titleFont;
    src: url(assets/fonts/Ubuntu/Ubuntu-Regular.woff2) format("woff2");
    font-display: swap;
}

:root {
    --break-sm: 540px;
    --break-md: 720px;
    --break-lg: 960px;
    --break-xl: 1140px;
    --break-xxl: 1400px;
    --nav-height: 4.5rem;
    --color-text: #f0f0f0;
    --color-bg-light: #232440;
    --color-bg-dark: #151522;
    --color-bg-ultradark: #00000a;
    --color-cg-red: #ff0066;
    --color-cg-darkred: #c4004e;
    --color-cg-blue: #1f1fad;
    --color-cg-dark-blue: #12002f;
    --color-highlight: #eaea21;
    --color-text-span: #808099;
    --color-text-selection: #3f4d8d;
    --color-title-blue: #758eff;
}

/*---------------------------------------/*
 # TOOLS
/*---------------------------------------*/
/*---------------------------------------/*
 # GENERIC - BOOTSTRAP
/*---------------------------------------*/
.container,
.container-fluid,
.container-xxl,
.container-xl,
.container-lg,
.container-md,
.container-sm {
    width: 100%;
    padding: 0;
    margin-right: auto;
    margin-left: auto;
}

@media (min-width: calc(576px + 4rem)) {

    .container-sm,
    .container {
        max-width: 740px;
    }
}

@media (min-width: calc(768px + 4rem)) {

    .container-md,
    .container-sm,
    .container-md,
    .container-lg,
    .container-xl,
    .container-xxl,
    .container {
        max-width: 720px;
    }
}

@media (min-width: calc(992px + 4rem)) {

    .container-lg,
    .container-sm,
    .container-md,
    .container-lg,
    .container-xl,
    .container-xxl,
    .container {
        max-width: 960px;
    }
}

@media (min-width: calc(1200px + 4rem)) {

    .container-xl,
    .container-sm,
    .container-md,
    .container-lg,
    .container-xl,
    .container-xxl,
    .container {
        max-width: 1140px;
    }
}

@media (min-width: calc(1400px + 4rem)) {

    .container-xxl,
    .container-sm,
    .container-md,
    .container-lg,
    .container-xl,
    .container-xxl,
    .container {
        max-width: 1320px;
    }
}

.row {
    --gutter-x: 1.5rem;
    display: flex;
    flex-wrap: wrap;
    margin-right: calc(var(--gutter-x) * -0.5);
    margin-left: calc(var(--gutter-x) * -0.5);
}

.row>* {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    padding-right: calc(var(--gutter-x) * 0.5);
    padding-left: calc(var(--gutter-x) * 0.5);
}

.col {
    flex: 1 0 0%;
}

.row-cols-auto>* {
    flex: 0 0 auto;
    width: auto;
}

.row-cols-1>* {
    flex: 0 0 auto;
    width: 100%;
}

.row-cols-2>* {
    flex: 0 0 auto;
    width: 50%;
}

.row-cols-3>* {
    flex: 0 0 auto;
    width: 33.3333333333%;
}

.row-cols-4>* {
    flex: 0 0 auto;
    width: 25%;
}

.row-cols-5>* {
    flex: 0 0 auto;
    width: 20%;
}

.row-cols-6>* {
    flex: 0 0 auto;
    width: 16.6666666667%;
}

@media (min-width: 576px) {
    .col-sm {
        flex: 1 0 0%;
    }
}

@media (min-width: 768px) {
    .col-md {
        flex: 1 0 0%;
    }
}

@media (min-width: 992px) {
    .col-lg {
        flex: 1 0 0%;
    }
}

@media (min-width: 1200px) {
    .col-xl {
        flex: 1 0 0%;
    }
}

@media (min-width: 1400px) {
    .col-xxl {
        flex: 1 0 0%;
    }
}

.col-auto {
    flex: 0 0 auto;
    width: auto;
}

.col-1 {
    flex: 0 0 auto;
    width: 8.33333333%;
}

.col-2 {
    flex: 0 0 auto;
    width: 16.66666667%;
}

.col-3 {
    flex: 0 0 auto;
    width: 25%;
}

.col-4 {
    flex: 0 0 auto;
    width: 33.33333333%;
}

.col-5 {
    flex: 0 0 auto;
    width: 41.66666667%;
}

.col-6 {
    flex: 0 0 auto;
    width: 50%;
}

.col-7 {
    flex: 0 0 auto;
    width: 58.33333333%;
}

.col-8 {
    flex: 0 0 auto;
    width: 66.66666667%;
}

.col-9 {
    flex: 0 0 auto;
    width: 75%;
}

.col-10 {
    flex: 0 0 auto;
    width: 83.33333333%;
}

.col-11 {
    flex: 0 0 auto;
    width: 91.66666667%;
}

.col-12 {
    flex: 0 0 auto;
    width: 100%;
}

.offset-1 {
    margin-left: 8.33333333%;
}

.offset-2 {
    margin-left: 16.66666667%;
}

.offset-3 {
    margin-left: 25%;
}

.offset-4 {
    margin-left: 33.33333333%;
}

.offset-5 {
    margin-left: 41.66666667%;
}

.offset-6 {
    margin-left: 50%;
}

.offset-7 {
    margin-left: 58.33333333%;
}

.offset-8 {
    margin-left: 66.66666667%;
}

.offset-9 {
    margin-left: 75%;
}

.offset-10 {
    margin-left: 83.33333333%;
}

.offset-11 {
    margin-left: 91.66666667%;
}

@media (min-width: 576px) {
    .col-sm-auto {
        flex: 0 0 auto;
        width: auto;
    }

    .col-sm-1 {
        flex: 0 0 auto;
        width: 8.33333333%;
    }

    .col-sm-2 {
        flex: 0 0 auto;
        width: 16.66666667%;
    }

    .col-sm-3 {
        flex: 0 0 auto;
        width: 25%;
    }

    .col-sm-4 {
        flex: 0 0 auto;
        width: 33.33333333%;
    }

    .col-sm-5 {
        flex: 0 0 auto;
        width: 41.66666667%;
    }

    .col-sm-6 {
        flex: 0 0 auto;
        width: 50%;
    }

    .col-sm-7 {
        flex: 0 0 auto;
        width: 58.33333333%;
    }

    .col-sm-8 {
        flex: 0 0 auto;
        width: 66.66666667%;
    }

    .col-sm-9 {
        flex: 0 0 auto;
        width: 75%;
    }

    .col-sm-10 {
        flex: 0 0 auto;
        width: 83.33333333%;
    }

    .col-sm-11 {
        flex: 0 0 auto;
        width: 91.66666667%;
    }

    .col-sm-12 {
        flex: 0 0 auto;
        width: 100%;
    }

    .offset-sm-0 {
        margin-left: 0;
    }

    .offset-sm-1 {
        margin-left: 8.33333333%;
    }

    .offset-sm-2 {
        margin-left: 16.66666667%;
    }

    .offset-sm-3 {
        margin-left: 25%;
    }

    .offset-sm-4 {
        margin-left: 33.33333333%;
    }

    .offset-sm-5 {
        margin-left: 41.66666667%;
    }

    .offset-sm-6 {
        margin-left: 50%;
    }

    .offset-sm-7 {
        margin-left: 58.33333333%;
    }

    .offset-sm-8 {
        margin-left: 66.66666667%;
    }

    .offset-sm-9 {
        margin-left: 75%;
    }

    .offset-sm-10 {
        margin-left: 83.33333333%;
    }

    .offset-sm-11 {
        margin-left: 91.66666667%;
    }
}

@media (min-width: 768px) {
    .col-md-auto {
        flex: 0 0 auto;
        width: auto;
    }

    .col-md-1 {
        flex: 0 0 auto;
        width: 8.33333333%;
    }

    .col-md-2 {
        flex: 0 0 auto;
        width: 16.66666667%;
    }

    .col-md-3 {
        flex: 0 0 auto;
        width: 25%;
    }

    .col-md-4 {
        flex: 0 0 auto;
        width: 33.33333333%;
    }

    .col-md-5 {
        flex: 0 0 auto;
        width: 41.66666667%;
    }

    .col-md-6 {
        flex: 0 0 auto;
        width: 50%;
    }

    .col-md-7 {
        flex: 0 0 auto;
        width: 58.33333333%;
    }

    .col-md-8 {
        flex: 0 0 auto;
        width: 66.66666667%;
    }

    .col-md-9 {
        flex: 0 0 auto;
        width: 75%;
    }

    .col-md-10 {
        flex: 0 0 auto;
        width: 83.33333333%;
    }

    .col-md-11 {
        flex: 0 0 auto;
        width: 91.66666667%;
    }

    .col-md-12 {
        flex: 0 0 auto;
        width: 100%;
    }

    .offset-md-0 {
        margin-left: 0;
    }

    .offset-md-1 {
        margin-left: 8.33333333%;
    }

    .offset-md-2 {
        margin-left: 16.66666667%;
    }

    .offset-md-3 {
        margin-left: 25%;
    }

    .offset-md-4 {
        margin-left: 33.33333333%;
    }

    .offset-md-5 {
        margin-left: 41.66666667%;
    }

    .offset-md-6 {
        margin-left: 50%;
    }

    .offset-md-7 {
        margin-left: 58.33333333%;
    }

    .offset-md-8 {
        margin-left: 66.66666667%;
    }

    .offset-md-9 {
        margin-left: 75%;
    }

    .offset-md-10 {
        margin-left: 83.33333333%;
    }

    .offset-md-11 {
        margin-left: 91.66666667%;
    }
}

@media (min-width: 992px) {
    .col-lg-auto {
        flex: 0 0 auto;
        width: auto;
    }

    .col-lg-1 {
        flex: 0 0 auto;
        width: 8.33333333%;
    }

    .col-lg-2 {
        flex: 0 0 auto;
        width: 16.66666667%;
    }

    .col-lg-3 {
        flex: 0 0 auto;
        width: 25%;
    }

    .col-lg-4 {
        flex: 0 0 auto;
        width: 33.33333333%;
    }

    .col-lg-5 {
        flex: 0 0 auto;
        width: 41.66666667%;
    }

    .col-lg-6 {
        flex: 0 0 auto;
        width: 50%;
    }

    .col-lg-7 {
        flex: 0 0 auto;
        width: 58.33333333%;
    }

    .col-lg-8 {
        flex: 0 0 auto;
        width: 66.66666667%;
    }

    .col-lg-9 {
        flex: 0 0 auto;
        width: 75%;
    }

    .col-lg-10 {
        flex: 0 0 auto;
        width: 83.33333333%;
    }

    .col-lg-11 {
        flex: 0 0 auto;
        width: 91.66666667%;
    }

    .col-lg-12 {
        flex: 0 0 auto;
        width: 100%;
    }

    .offset-lg-0 {
        margin-left: 0;
    }

    .offset-lg-1 {
        margin-left: 8.33333333%;
    }

    .offset-lg-2 {
        margin-left: 16.66666667%;
    }

    .offset-lg-3 {
        margin-left: 25%;
    }

    .offset-lg-4 {
        margin-left: 33.33333333%;
    }

    .offset-lg-5 {
        margin-left: 41.66666667%;
    }

    .offset-lg-6 {
        margin-left: 50%;
    }

    .offset-lg-7 {
        margin-left: 58.33333333%;
    }

    .offset-lg-8 {
        margin-left: 66.66666667%;
    }

    .offset-lg-9 {
        margin-left: 75%;
    }

    .offset-lg-10 {
        margin-left: 83.33333333%;
    }

    .offset-lg-11 {
        margin-left: 91.66666667%;
    }
}

@media (min-width: 1200px) {
    .col-xl-auto {
        flex: 0 0 auto;
        width: auto;
    }

    .col-xl-1 {
        flex: 0 0 auto;
        width: 8.33333333%;
    }

    .col-xl-2 {
        flex: 0 0 auto;
        width: 16.66666667%;
    }

    .col-xl-3 {
        flex: 0 0 auto;
        width: 25%;
    }

    .col-xl-4 {
        flex: 0 0 auto;
        width: 33.33333333%;
    }

    .col-xl-5 {
        flex: 0 0 auto;
        width: 41.66666667%;
    }

    .col-xl-6 {
        flex: 0 0 auto;
        width: 50%;
    }

    .col-xl-7 {
        flex: 0 0 auto;
        width: 58.33333333%;
    }

    .col-xl-8 {
        flex: 0 0 auto;
        width: 66.66666667%;
    }

    .col-xl-9 {
        flex: 0 0 auto;
        width: 75%;
    }

    .col-xl-10 {
        flex: 0 0 auto;
        width: 83.33333333%;
    }

    .col-xl-11 {
        flex: 0 0 auto;
        width: 91.66666667%;
    }

    .col-xl-12 {
        flex: 0 0 auto;
        width: 100%;
    }

    .offset-xl-0 {
        margin-left: 0;
    }

    .offset-xl-1 {
        margin-left: 8.33333333%;
    }

    .offset-xl-2 {
        margin-left: 16.66666667%;
    }

    .offset-xl-3 {
        margin-left: 25%;
    }

    .offset-xl-4 {
        margin-left: 33.33333333%;
    }

    .offset-xl-5 {
        margin-left: 41.66666667%;
    }

    .offset-xl-6 {
        margin-left: 50%;
    }

    .offset-xl-7 {
        margin-left: 58.33333333%;
    }

    .offset-xl-8 {
        margin-left: 66.66666667%;
    }

    .offset-xl-9 {
        margin-left: 75%;
    }

    .offset-xl-10 {
        margin-left: 83.33333333%;
    }

    .offset-xl-11 {
        margin-left: 91.66666667%;
    }
}

@media (min-width: 1400px) {
    .col-xxl-auto {
        flex: 0 0 auto;
        width: auto;
    }

    .col-xxl-1 {
        flex: 0 0 auto;
        width: 8.33333333%;
    }

    .col-xxl-2 {
        flex: 0 0 auto;
        width: 16.66666667%;
    }

    .col-xxl-3 {
        flex: 0 0 auto;
        width: 25%;
    }

    .col-xxl-4 {
        flex: 0 0 auto;
        width: 33.33333333%;
    }

    .col-xxl-5 {
        flex: 0 0 auto;
        width: 41.66666667%;
    }

    .col-xxl-6 {
        flex: 0 0 auto;
        width: 50%;
    }

    .col-xxl-7 {
        flex: 0 0 auto;
        width: 58.33333333%;
    }

    .col-xxl-8 {
        flex: 0 0 auto;
        width: 66.66666667%;
    }

    .col-xxl-9 {
        flex: 0 0 auto;
        width: 75%;
    }

    .col-xxl-10 {
        flex: 0 0 auto;
        width: 83.33333333%;
    }

    .col-xxl-11 {
        flex: 0 0 auto;
        width: 91.66666667%;
    }

    .col-xxl-12 {
        flex: 0 0 auto;
        width: 100%;
    }

    .offset-xxl-0 {
        margin-left: 0;
    }

    .offset-xxl-1 {
        margin-left: 8.33333333%;
    }

    .offset-xxl-2 {
        margin-left: 16.66666667%;
    }

    .offset-xxl-3 {
        margin-left: 25%;
    }

    .offset-xxl-4 {
        margin-left: 33.33333333%;
    }

    .offset-xxl-5 {
        margin-left: 41.66666667%;
    }

    .offset-xxl-6 {
        margin-left: 50%;
    }

    .offset-xxl-7 {
        margin-left: 58.33333333%;
    }

    .offset-xxl-8 {
        margin-left: 66.66666667%;
    }

    .offset-xxl-9 {
        margin-left: 75%;
    }

    .offset-xxl-10 {
        margin-left: 83.33333333%;
    }

    .offset-xxl-11 {
        margin-left: 91.66666667%;
    }
}

.flex-center {
    display: flex;
    justify-content: center !important;
    align-items: center !important;
}

.justify-content-center {
    justify-content: center !important;
}

.align-items-center {
    align-items: center !important;
}

@media (max-width: 767.98px) {
    .row>* {
        padding-left: 2rem;
        padding-right: 2rem;
    }
}

/*---------------------------------------/*
 # ELEMENTS
/*---------------------------------------*/
* {
    margin: 0;
    padding: 0;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    background-color: var(--color-bg-ultradark);
    color: var(--color-text);
    font-family: bodyFont;
    width: 100%;
    min-height: 100vh;
}

body::selection {
    background: var(--color-text-selection);
}

body::-moz-selection {
    background: var(--color-text-selection);
}

body:not(.js-ready) * {
    transition: none !important;
}

@media (max-width: 575.98px) {
    body {
        font-size: 0.85rem;
    }
}

main {
    position: absolute;
    right: 0;
    overflow: hidden;
}

.c-main {
    width: calc(100vw - 4rem);
}

.c-main--disabled {
    filter: brightness(0.25);
    transition: 0.4s filter;
    pointer-events: none;
    position: fixed !important;
}

.c-main--transition {
    transition: 0.4s filter;
}

@media (max-width: 991.98px) {
    .c-main {
        width: 100vw;
        padding-bottom: 4.5rem;
    }
}

#page {
    display: flex;
    margin-top: var(--nav-height);
}

img {
    pointer-events: none;
    max-width: 100%;
    height: auto;
}

img,
svg {
    vertical-align: middle;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 500;
    font-family: titleFont;
    line-height: unset;
}

h1 {
    font-size: 3rem;
}

h2 {
    font-size: 2rem;
}

@media (max-width: 575.98px) {
    h2 {
        font-size: 1.5rem;
    }
}

h3 {
    font-size: 1.8rem;
}

@media (max-width: 575.98px) {
    h3 {
        font-size: 1.25rem;
    }
}

p {
    margin-bottom: 1rem;
    line-height: 1.5rem;
}

a {
    cursor: pointer;
    text-decoration: none;
    transition: color 0.3s ease;
    color: var(--color-cg-red);
}

a:hover {
    color: var(--color-cg-darkred);
}

ul {
    padding: 0;
    margin: 0;
    list-style: none;
}

input {
    font-family: bodyFont;
}

button {
    font-family: bodyFont;
    border: none;
}

iframe {
    border: none;
    vertical-align: middle;
}

footer {
    transition: background-color 0.1s;
}

/*---------------------------------------/*
 # OBJECTS
/*---------------------------------------*/
.o-nowrap {
    white-space: nowrap;
}

.o-sideways-scroll {
    display: flex;
    gap: 1rem;
    overflow: auto;
}

.o-sideways-scroll * {
    display: table;
}

.o-desktop-flex-left {
    display: flex;
    justify-content: start;
}

@media (min-width: 1200px) {
    .o-desktop-flex-left {
        justify-content: end;
    }
}

.animate-barrel {
    animation: rotate360 4s ease-in-out;
}

@keyframes rotate360 {
    0% {
        transform: rotate(0);
    }

    100% {
        transform: rotate(360deg);
    }
}

.star {
    position: absolute;
    width: 2px;
    height: 2px;
    background-color: #969eff;
    box-shadow: 0 0 6px 1px rgba(255, 255, 255, 0.35) !important;
    opacity: 0;
    transition: opacity 1s;
    z-index: -1;
}

@keyframes pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.1;
    }
}

/*---------------------------------------/*
 # COMPONENTS
/*---------------------------------------*/
.c-nav {
    top: 0;
    height: var(--nav-height);
    background: linear-gradient(90deg, rgba(0, 0, 10, 0.95) 0%, rgba(21, 21, 34, 0.95) 30%);
    padding: 0 1rem;
    border-image: linear-gradient(to right, var(--color-cg-blue) 15%, var(--color-cg-red) 30%) 1;
    border-width: 4px;
    border-style: solid;
    border-top: none;
    border-left: none;
    border-right: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    z-index: 10;
    width: 100vw;
    backdrop-filter: blur(5px);
}

.c-nav__logo {
    width: 6.625rem;
    height: 3.6344rem;
    margin-right: 1rem;
}

.c-nav__search {
    color: var(--color-text);
    padding: 0.5rem 1rem;
    border: 2px solid var(--color-text-span);
    outline: none;
    border-radius: 2rem;
    transition: all 0.4s;
    background-color: var(--color-bg-ultradark);
}

.c-nav__search:focus {
    border: 2px solid var(--color-text-selection);
    background-color: var(--color-bg-light);
}

.c-sidebar {
    width: 4rem;
    height: calc(100vh - var(--nav-height));
    position: fixed;
    display: flex;
    justify-content: center;
    transition: width 0.4s;
    z-index: 99;
}

@media (max-width: 991.98px) {
    .c-sidebar {
        width: 100vw;
        height: 4.5rem;
        bottom: 0;
        outline: 2px solid var(--color-text-selection);
        transition: height 0.4s;
    }
}

.c-sidebar--active {
    width: 18rem;
    transition: all 0.4s;
}

@media (max-width: 991.98px) {
    .c-sidebar--active {
        transition: height 0.4s;
        width: 100vw;
        height: 45vh;
    }
}

.c-sidebar__items {
    padding-top: 1.25rem;
}

@media (max-width: 991.98px) {
    .c-sidebar__items {
        display: flex;
        justify-content: center;
        padding-top: 0;
        margin-bottom: 0;
        gap: 1rem;
        padding: 0 1rem;
    }
}

@media (max-width: 340px) {
    .c-sidebar__items {
        justify-content: flex-start;
        padding: 0;
    }
}

.c-sidebar__whitespace {
    flex: 1;
    overflow: auto;
}

.c-sidebar__item {
    cursor: pointer;
    position: relative;
    user-select: none;
    padding: 0.5rem 0;
    margin-bottom: 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: color 0.4s;
    min-width: 4rem;
    width: 4rem;
}

@media (max-width: 991.98px) {
    .c-sidebar__item {
        padding: 0.75rem 0;
        margin-bottom: 0;
        min-height: 4.375rem;
    }
}

.c-sidebar__item svg {
    transition: fill 0.4s;
    width: 40%;
    fill: var(--color-text);
    margin-bottom: 0.5rem;
}

.c-sidebar__item svg.--other {
    margin-bottom: 1rem;
}

.c-sidebar__item:hover {
    color: var(--color-cg-red);
}

.c-sidebar__item:hover a {
    color: var(--color-cg-red);
}

.c-sidebar__item:hover svg {
    fill: var(--color-cg-red);
}

.c-sidebar__item.is-active {
    color: var(--color-cg-red);
}

.c-sidebar__item.is-active .c-sidebar__deco {
    opacity: 1;
    transition: opacity 0.4s;
}

.c-sidebar__item.is-active svg {
    fill: var(--color-cg-red);
}

.c-sidebar__deco {
    opacity: 0;
    position: absolute;
    width: 2px;
    height: 100%;
    top: 0;
    right: 0;
    background-color: var(--color-cg-red);
    transition: opacity 0.4s;
}

@media (max-width: 991.98px) {
    .c-sidebar__deco {
        width: 100%;
        height: 2px;
    }
}

.c-sidebar__container {
    opacity: 0;
}

.c-sidebar__container.is-animating {
    animation: slideIn 0.4s forwards;
}

.c-sidebar__niv1 {
    width: 4rem;
    font-size: 0.75rem;
    background: linear-gradient(45deg, rgb(8, 8, 18) 0%, var(--color-bg-light) 80%);
    z-index: 2;
    position: absolute;
    left: 0;
    -webkit-user-select: none;
    /* Safari */
    -ms-user-select: none;
    /* IE 10 and IE 11 */
    user-select: none;
    height: 100%;
}

@media (max-width: 991.98px) {
    .c-sidebar__niv1 {
        bottom: 0;
        width: 100vw;
        height: 4.5rem;
        background: radial-gradient(circle, var(--color-bg-light) 0%, var(--color-bg-ultradark) 100%);
        overflow: scroll;
    }
}

.c-sidebar__niv2 {
    z-index: 1;
    width: 14rem;
    background: linear-gradient(60deg, var(--color-bg-ultradark) 0%, var(--color-bg-light) 100%);
    position: absolute;
    right: 0;
    height: 100%;
    padding: 1.5rem 0.5rem 2rem 1.5rem;
}

@media (max-width: 991.98px) {
    .c-sidebar__niv2 {
        width: 100vw;
        height: 100vh;
        top: 0;
    }
}

.c-sidebar__niv2 h3 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    padding-bottom: 0.25rem;
    border-bottom: 2px solid var(--color-text-selection);
    width: 80%;
}

.c-sidebar__niv2 h4 {
    font-size: 1.15rem;
    margin-bottom: 0.75rem;
}

.c-sidebar__niv2 ul {
    margin-bottom: 1.5rem;
}

.c-sidebar__niv2 ul li {
    font-size: 1rem;
    margin-bottom: 0.75rem;
}

.c-sidebar__niv2 ul li a {
    line-height: 1.25rem;
}

.c-sidebar__nivlist--inActive {
    display: none;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateX(-1.5rem);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes animateDiscoverArrow {
    0% {
        transform: scale(1) rotate(0);
    }

    25% {
        transform: scale(1.2) rotate(20deg);
    }

    50% {
        transform: scale(1.4) rotate(-20deg);
    }

    75% {
        transform: scale(1.3) rotate(20deg);
    }

    100% {
        transform: scale(1.2) rotate(0);
    }
}

@keyframes animateOtherCircle {
    0% {
        transform: translateY(0);
    }

    25% {
        transform: translateY(-0.25rem);
    }

    50% {
        transform: translateY(0);
    }

    75% {
        transform: translateY(-0.1rem);
    }

    100% {
        transform: translateY(0);
    }
}

.c-searchbar-big {
    font-size: 1.1rem;
    color: var(--color-text);
    width: 100%;
    padding: 0.5rem 1rem;
    border: 2px solid var(--color-text-span);
    outline: none;
    border-radius: 12px;
    transition: all 0.4s;
    background: linear-gradient(-145deg, var(--color-bg-dark) 25%, var(--color-bg-ultradark) 100%);
    height: 2.5rem;
}

.c-searchbar-big:focus {
    border: 2px solid var(--color-text);
    transition: all 0.5s;
}

.c-searchbar-big::placeholder {
    color: var(--color-text-span)
}

.c-filters-switch {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0 0.5rem;
    background: linear-gradient(-145deg, var(--color-bg-dark) 25%, var(--color-bg-ultradark) 100%);
    border-radius: 12px;
    border: 2px solid var(--color-text-span);
    height: 2.5rem;
    vertical-align: top;
    color: var(--color-text-span);
    font-size: 0.85rem;
    user-select: none;
    transition: 0.4s all;
}

.c-filters-switch:has(input:checked) {
    border: 2px solid var(--color-text);
    color: var(--color-text);
    transition: 0.2s all;
}

.c-filters-switch:has(input:checked) svg path {
    fill: var(--color-text);
    transition: 0.2s fill;
}

.c-filters-switch svg path {
    fill: var(--color-text-span);
    transition: 0.4s fill;
}

.c-filters-switch input {
    display: none;
}

.c-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2rem 0;
    user-select: none;
}

.c-pagination__arrow {
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
}

.c-pagination__arrow svg {
    fill: var(--color-text);
    height: 1.5rem;
}

.c-pagination__arrow.is-inactive {
    opacity: 0.5;
}

.c-pagination ul {
    margin: 0 1rem;
    display: flex;
    gap: 0.5rem;
}

.c-pagination ul li {
    display: flex;
    flex-direction: column;
    justify-content: end;
}

.c-pagination ul li.js-page {
    cursor: pointer;
    background-color: var(--color-bg-light);
    width: 2rem;
    aspect-ratio: 1 / 1;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
}

.c-pagination ul li.js-page:hover {
    background-color: var(--color-cg-blue);
}

.c-pagination ul li.js-page.is-active {
    background-color: var(--color-cg-red);
}

.c-pagination.is-hidden {
    display: none;
}

.c-ip-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.c-ip-list li {
    overflow: hidden;
    border-radius: 0.5rem;
    box-shadow: 0 0 1rem #363763;
}

.c-ip-list li a {
    position: relative;
    display: block;
    width: 21rem;
    aspect-ratio: 21 / 5;
}

.c-ip-list li a h2 {
    z-index: 1;
    position: absolute;
    transition: 0.4s;
    font-size: 0.85rem;
    color: var(--color-text);
    bottom: 0;
    padding: 0.25rem 0.5rem;
    width: 100%;
    background: linear-gradient(-90deg, rgba(0, 0, 0, 0) 0%, var(--color-bg-dark) 100%);
    text-shadow: 1px 1px 0 var(--color-bg-ultradark);
}

.c-ip-list li a img {
    transition: 0.4s;
    width: 100%;
    height: 100%;
}

.c-ip-list li a:hover h2 {
    transition: 0.1s;
    color: var(--color-highlight);
}

.c-ip-list li a:hover img {
    transition: 0.1s;
    transform: scale(1.02);
}

@media(max-width: 991.98px) {
    .c-ip-list {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }
}

.c-cred {
    display: none;
    z-index: 2;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.9) 0%, rgba(11, 0, 27, 0.9) 100%);
    width: 100vw;
    height: calc(100vh - var(--nav-height));
    position: fixed;
    bottom: 0;
    overflow: scroll;
    animation: fadeout 0.5s;
}

.c-cred--active {
    animation: fadein 0.25s;
}

.c-cred__return {
    cursor: pointer;
    position: fixed;
    background-color: rgba(0, 0, 0, 0);
    color: var(--color-cg-red);
    font-size: 1rem;
    transition: color var(--tr-time-long);
}

.c-cred__return:hover {
    transition: color var(--tr-time-short);
    color: var(--color-highlight);
}

.c-cred h1 {
    text-align: center;
    margin-bottom: 1rem;
}

.c-cred h2 {
    text-align: center;
}

.c-cred h3 {
    margin: 2rem 0 1.25rem;
    text-align: center;
}

.c-cred__scroll-wrap {
    margin: 2.5rem 0;
}

.c-cred__scroll-wrap .container .row {
    display: flex;
    justify-content: center;
}

.c-cred__item {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
}

@media(min-width: 576px) {
    .c-cred__item {
        gap: 1.5rem;
    }
}

.c-cred__title {
    text-align: right;
}

.c-cred__break {
    margin: 4rem;
}

.c-cred__song {
    text-align: center;
}

.c-cred__song-title {
    font-size: 1.25rem;
    text-transform: uppercase;
}

.c-cred__line {
    text-align: center;
}

.c-cred__img-container {
    display: flex;
    align-items: center;
    flex-direction: column;
    margin-bottom: 1rem;
}

@keyframes fadein {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fadeout {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

.c-detail__next {
    border-radius: 1rem;
    overflow: hidden;
    background-size: cover;
    transition: transform 0.4s;
}

.c-detail__next:hover {
    transition: transform 0.1s;
    transform: scale(1.02);
}

.c-detail__next--content {
    padding-left: 1rem;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 1rem;
    color: var(--color-text-span);
    background: rgba(35, 36, 64, 0.5);
    position: relative;
    background-image: url('../assets/icons/next_background.svg');
    background-repeat: no-repeat;
    background-blend-mode: lighten;
}

.c-detail__next--content h2 {
    position: absolute;
    color: var(--color-highlight);
    right: 0;
    top: 0;
    font-size: 1.25rem;
    background-color: var(--color-bg-light);
    padding: 0.5rem 1rem;
    border-radius: 0 0 0 1rem;
}

.c-detail__next h3 {
    margin-bottom: 0.5rem;
    color: var(--color-text);
    font-size: 1.6rem;
}

.c-detail__next img {
    height: 18rem;
}

@media(min-width: 1400px) {
    .c-detail__next img {
        height: 15rem;
    }
}

@media(max-width: 1200px) {
    .c-detail__next {
        margin-top: 3rem;
    }

    .c-detail__next img {
        height: 15rem;
    }
}

@media(max-width: 576px) {
    .c-detail__next h3 {
        font-size: 1.25rem;
    }
}

.c-detail__credits {
    border-top: 2px solid var(--color-bg-light);
    padding-top: 1rem;
    margin-bottom: 1rem;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem 2.5rem;
}

@media(max-width: 1399.98px) {
    .c-detail__credits {
        grid-template-columns: repeat(3, 1fr);
        gap: 1.5rem 0.5rem;
    }
}

@media(max-width: 1199px) {
    .c-detail__credits {
        grid-template-columns: repeat(3, 1fr);
        gap: 1.5rem 2.5rem;
    }
}

@media(max-width: 767.98px) {
    .c-detail__credits {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem 2.5rem;
    }
}

@media(max-width: 575.98px) {
    .c-detail__credits {
        font-size: 0.85rem;
    }
}

.c-legacy-site {
    background-image: url('assets/icons/legacy-bg.svg'), url('assets/icons/legacy-bg-reverse.svg');
    background-position: top, bottom;
    background-repeat: repeat-x, repeat-x;
    background-size: 8%, 8%;
}

.c-legacy-site img {
    width: 50vw;
    -webkit-mask-image: linear-gradient(90deg, black 50%, transparent 100%);
    mask-image: linear-gradient(90deg, black 50%, transparent 100%);
}

.c-legacy-site__content {
    margin: 0 2rem;
}

.c-legacy-site h2 {
    font-size: 2.5rem;
    color: var(--color-highlight);
    margin-bottom: 1rem;
}

.c-legacy-site span {
    color: var(--color-text-span);
}

.c-legacy-site a {
    font-size: 1.25rem;
    color: var(--color-cg-red);
}

.c-legacy-site a:hover {
    color: var(--color-highlight);
}

.c-detail__credit {
    width: fit-content;
}

.c-detail__credit--names {
    margin-top: 0.5rem;
    max-width: 15rem;
    line-height: 1.35rem;
    display: flex;
    flex-direction: column;
    gap: 0 1.2rem;
}

.c-detail__credit--names li {
    color: var(--color-text-span);
    padding-top: 0.25rem;
}

.c-detail__credit--names li:first-child {
    padding-top: 0;
}

.c-cred-links {
    border-top: 2px solid var(--color-bg-light);
    padding-top: 1rem;
    display: flex;
    justify-content: end;
    gap: 1.5rem;
    font-size: 0.85rem;
}

.c-cred-links div {
    cursor: pointer;
    width: fit-content;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.c-cred-links a {
    color: var(--color-text-span);
}

.c-cred-links a:hover {
    color: var(--color-text);
}

.c-cred-links span {
    transition: 0.2s;
    color: var(--color-text-span);
}

.c-cred-links span:hover {
    color: var(--color-text);
}

.c-movieplayer {
    z-index: 1;
    max-height: 82vh;
    background-color: var(--color-bg-dark);
    position: relative;
    transition: aspect-ratio var(--tr-time-long);
    margin: auto;
}

.c-movieplayer__container {
    background-image: url('assets/img/cinema-seats-still-life.png');
    background-color: var(--color-bg-ultradark);
    background-size: contain;
    background-position: left;
    background-repeat: no-repeat;
    overflow: hidden;
    position: relative;
}

.c-movieplayer__container::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 50%;
    background-image: url('assets/img/cinema-seats-still-life.png');
    background-size: contain;
    background-position: left;
    background-repeat: no-repeat;
    transform: scaleX(-1);
    transform-origin: center;
}

.c-movieplayer iframe {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
}

.c-cgoriginal {
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--color-bg-dark);
    background: linear-gradient(45deg, #ff0066 0%, #ff4fa1 100%);
    background-repeat: no-repeat;
    width: fit-content;
    padding: 0.2rem 0.8rem 0.2rem 0.35rem;
    border-radius: 1rem;
    box-shadow: 0.2rem 0.2rem 0 0 var(--color-bg-ultradark);
    margin-bottom: 1rem;
    overflow: hidden;
}

.c-cgoriginal img {
    transform: translateY(0.4rem) scale(1.45);
    height: 1.5rem;
    margin-right: 0.3rem;
}

.c-discover-icon__arrow {
    transform-origin: center;
}

.c-discover-icon__fill {
    transition: opacity 0;
    opacity: 0;
}

.c-other-icon {
    height: 1.5rem;
}

.js-sidebarItem.animate .c-discover-icon__arrow {
    animation: animateDiscoverArrow 0.4s linear;
    animation-fill-mode: forwards;
}

.js-sidebarItem.animate .c-discover-icon__fill {
    animation: animateDiscoverFill 0.4s linear;
    animation-fill-mode: forwards;
}

.js-sidebarItem.animate .c-other-icon circle:nth-child(1) {
    animation: animateOtherCircle 0.3s ease-out;
    animation-delay: 0s;
}

.js-sidebarItem.animate .c-other-icon circle:nth-child(2) {
    animation: animateOtherCircle 0.3s ease-out;
    animation-delay: 0.1s;
}

.js-sidebarItem.animate .c-other-icon circle:nth-child(3) {
    animation: animateOtherCircle 0.3s ease-out;
    animation-delay: 0.2s;
}

.js-sidebarItem.is-active .c-discover-icon {
    transition: transform 0.4s ease-out;
    transform: scale(1.1);
}

.js-sidebarItem.is-active .c-discover-icon__arrow {
    transform: scale(1.2);
    fill: var(--color-bg-dark);
}

.js-sidebarItem.is-active .c-discover-icon__fill {
    opacity: 1;
}

.c-highlight-window {
    padding: 2rem 2rem 2rem 20rem;
    position: fixed;
    width: 100vw;
    height: calc(100vh - var(--nav-height));
    z-index: 1;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.4s ease, visibility 0.4s ease;
    background: linear-gradient(0deg, black 0%, rgba(255, 255, 255, 0) 100%);
}

@media (max-width: 991.98px) {
    .c-highlight-window {
        padding: 2rem;
    }

    .c-highlight-window a {
        width: 90vw;
    }
}

.c-highlight-window__banner {
    position: relative;
    aspect-ratio: 16/9;
    max-height: 20rem;
    overflow: hidden;
}

.c-highlight-window__banner img {
    transition: transform 0.4s;
    max-height: 20rem;
}

.c-highlight-window__banner a {
    display: block;
}

.c-highlight-window__banner a:hover img {
    transform: scale(1.05);
    transition: transform 0.4s;
}

.c-highlight-window__banner a:hover .c-highlight-window__banner--content {
    transition: opacity 0.4s;
    opacity: 1 !important;
}

.c-highlight-window__banner--content {
    transition: opacity 0.4s;
    opacity: 0;
    position: absolute;
    bottom: 0;
    width: fit-content;
    min-width: 40%;
    max-width: 60%;
    padding: 2rem;
    color: var(--color-text);
    text-transform: uppercase;
    font-size: 2.5rem;
    background: linear-gradient(90deg, black 25%, rgba(255, 255, 255, 0) 100%);
}

.c-highlight-window__posts {
    display: flex;
    justify-content: space-between;
    position: relative;
    gap: 1rem;
    padding-top: 2.5rem;
    height: 100%;
    max-height: 15rem;
}

@media (max-width: 991.98px) {
    .c-highlight-window__posts {
        display: none;
    }
}


.c-highlight-window__post {
    border-radius: 1rem;
    overflow: hidden;
    width: 100%;
    position: relative;
    background-size: 100%;
    background-position: center;
    transition: background-size 0.4s;
    background-color: var(--color-bg-dark);
}

.c-highlight-window__post h2 {
    color: var(--color-text);
}

.c-highlight-window__post:hover {
    transition: all 0.1s;
    background-size: 105%;
}

.c-highlight-window__post:hover h2 {
    transition: all 0.1s;
    transform: translateX(0.25rem);
}

.c-highlight-window__post--content {
    padding: 0.4rem 0.75rem 0.5rem 0.75rem;
    width: 100%;
    position: absolute;
    bottom: 0;
    background-color: rgba(35, 36, 64, 0.75);
    background: linear-gradient(2.5deg, #232440 50%, rgba(35, 36, 64, 0.75) 100%);
}

.c-highlight-window__post--content span {
    display: block;
    text-align: end;
    font-size: 0.8rem;
    color: var(--color-text-span);
}

.c-highlight-window__news-url {
    position: absolute;
    top: 0.8rem;
    right: 0.25rem;
}

.c-highlight-window--active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.c-header-home {
    padding: 4rem 0;
    background-color: var(--color-bg-ultradark);
    background-size: cover;
    background-position: 25% 50%;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
}

@media (max-width: 767.98px) {
    .c-header-home {
        background-position: center;
    }
}

.c-header-home__bg-img {
    position: absolute;
    z-index: 1;
    height: 100%;
    -webkit-mask-image: linear-gradient(90deg, black, transparent);
    mask-image: linear-gradient(90deg, black, transparent);
}

.c-header-home__content {
    max-width: 30rem;
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 1.8rem;
}

@media (max-width: 767.98px) {
    .c-header-home__content {
        align-items: center;
    }
}

.c-header-home__content img {
    max-width: 32rem;
}

@media (max-width: 767.98px) {
    .c-header-home__content img {
        max-width: 20rem;
    }
}

.c-header-home__content--paragraph {
    font-size: 1rem;
}

.c-header-home__content--paragraph span {
    color: var(--color-text-span);
}

.c-header-home__new {
    position: absolute;
    left: 0;
    background: var(--color-text);
    width: fit-content;
    padding: 0.4rem 1rem;
    color: var(--color-bg-ultradark);
    font-size: 1.2rem;
    border-radius: 1rem;
    transform: translate(1.5rem, -1.5rem);
}

@media (max-width: 767.98px) {
    .c-header-home__new {
        transform: translate(2rem, 0);
        font-size: 1rem;
        padding: 0.3rem 0.6rem;
        border-radius: 0.6rem;
    }
}

.c-header-home__cta {
    width: fit-content;
    padding: 0.5rem 1rem;
    background-color: var(--color-highlight);
    color: var(--color-bg-ultradark);
    font-size: 2rem;
    font-family: titleFont;
}

.c-header-home__cta:hover {
    transform: scale(1.05);
}

.c-footer {
    padding-top: 2.5rem;
}

.c-footer__top {
    margin-bottom: 2rem;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
}

@media (max-width: 1199.98px) {
    .c-footer__top {
        flex-direction: column;
        gap: 1rem;
    }
}

.c-footer__logo {
    flex: 1;
    width: 10rem;
    height: 5.625rem;
}

.c-footer__logo a {
    height: 100%;
}

.c-footer__logo--img {
    width: 10rem;
    height: 5.4856rem;
    transition: 0.4s;
}

.c-footer__form input {
    font-size: 1.1rem;
    color: var(--color-text);
    width: 100%;
    padding: 0.5rem 1rem;
    margin-bottom: 1rem;
    border: 2px solid var(--color-text-span);
    outline: none;
    border-radius: 12px;
    transition: all 0.4s;
    background-color: var(--color-bg-dark);
    background-repeat: no-repeat;
    background-size: 5rem;
}

.c-footer__form input[type=submit] {
    font-size: 1rem;
    padding: 0.75rem 1.25rem;
    background-color: var(--color-bg-light);
    border: none;
    width: fit-content;
    margin: 0;
    transition: all 0.1s;
}

.c-footer__form input[type=submit]:hover {
    background-color: var(--color-cg-red);
}

.c-footer__form input:focus {
    border: 2px solid var(--color-text-selection);
    background-color: var(--color-bg-light);
}

.c-footer__lists {
    margin: 1.5rem 0;
}

.c-footer__lists h3 {
    color: var(--color-title-blue);
    margin-bottom: 1rem;
}

.c-footer__lists ul {
    list-style: none;
}

.c-footer__lists ul li {
    cursor: pointer;
    font-size: 1.125rem;
    margin-bottom: 0.5rem;
}

.c-footer__lists ul li a {
    color: var(--color-text);
    transition: color 0.4s;
}

.c-footer__lists ul li a:hover {
    transition: color 0.1s;
    color: var(--color-cg-blue);
}

.c-footer__socials {
    display: flex;
    justify-content: end;
    gap: 1rem;
    padding: 0.8rem 0;
}

.c-footer__social {
    width: 2.5rem;
    height: 2.5rem;
    aspect-ratio: 1/1;
}

@media (min-width: 576px) {
    .c-footer__social {
        transition: 0.4s;
    }

    .c-footer__social:hover {
        transition: 0.1s;
        transform: scale(1.1);
    }
}

.c-footer__legal-list {
    font-size: 0.875rem;
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.c-footer__legal-list li a {
    color: var(--color-text-span);
}

.c-footer__legal-list li a:hover {
    color: var(--color-text);
}

.c-footer__legal {
    border-top: 2px solid var(--color-bg-light);
    color: var(--color-text-span);
    padding: 1rem;
    text-align: center;
    font-size: 0.8rem;
}

.c-browse {
    margin-bottom: 2rem;
    position: relative;
}

.c-browse__wrapper {
    padding: 1.5rem 2rem;
    display: grid;
    grid-template-rows: auto 1fr;
    grid-template-columns: 1fr min-content;
    gap: 1rem;
    margin: auto;
    max-width: 104rem;
    min-height: calc(100vh - var(--nav-height));
}

@media (max-width: 991.98px) {
    .c-browse__wrapper {
        display: flex;
        flex-direction: column;
    }
}

.c-browse__left {
    grid-area: 2/1/3/2;
    max-width: 75rem;
}

@media (max-width: 991.98px) {
    .c-browse__left {
        flex-direction: column-reverse;
    }
}

@media (max-width: 767.98px) {
    .c-browse__left {
        padding: 0 0.75rem;
    }
}

.c-browse__right {
    grid-area: 2/2/3/3;
    width: 21rem;
}

@media (max-width: 991.98px) {
    .c-browse__right {
        width: 100%;
        padding: 0 0.75rem;
    }
}

.c-browse__right-ads {
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem 0;
}

@media (max-width: 991.98px) {
    .c-browse__right-ads {
        flex-direction: row;
        justify-content: center;
    }
}

@media (max-width: 767.98px) {
    .c-browse__right-ads {
        flex-direction: column;
        align-items: center;
    }
}

.c-browse__banner {
    display: flex;
    justify-content: center;
    margin-bottom: 1rem;
}

.c-browse__banner a {
    display: block;
}

.c-browse__banners {
    grid-area: 1/1/2/3;
}

.c-browse__banners a {
    cursor: pointer;
}

.c-browse__banners a:hover {
    transform: scale(1.01);
}

.c-browse__banners a img {
    height: 90px;
    max-width: none;
}

.c-browse__overview .c-content-item {
    box-shadow: 0 0 1rem #363763;
}

.c-browse__overview--inactive {
    pointer-events: none;
    transition: opacity 0.1s;
    opacity: 0.25;
}

.c-browse__dropdown {
    overflow: hidden;
    height: 34px;
    transition: all 0.4s;
}

.c-browse__dropdown--header {
    position: relative;
    padding-top: 0.5rem;
}

.c-browse__dropdown--header h2::after {
    /* or inline data URI if you wanna keep it all in CSS */
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white' stroke='white' stroke-width='2'%3E%3Cpath d='M5 12h14M12 5l7 7-7 7'/%3E%3C/svg%3E");
    display: inline-block;
    /* usually needed */
    position: absolute;
    right: 0;
    width: 1.2em;
    /* control size – feels so satisfying */
    height: 1.2em;
    vertical-align: middle;
}

.c-browse__dropdown--header h2:hover::after {
    transform: scale(1.1);
}

.c-browse__dropdown.active {
    transition: all 0.4s;
}

.c-browse__dropdown.active .c-browse__dropdown--header h2::after {
    transform: rotate(180deg);
}

.c-browse__dropdown.active[data-dropdown=type] {
    height: 6.7rem;
}

.c-browse__dropdown.active[data-dropdown=genre] {
    height: 8.8rem;
}

.c-browse__dropdown.active[data-dropdown=language] {
    height: 8.8rem;
}

.c-browse__dropdown label input {
    display: none;
}

.c-browse__dropdown label span {
    position: relative;
    cursor: pointer;
    font-size: 0.8rem;
    border-radius: 1rem;
    background-color: var(--color-bg-dark);
    padding: 0.5rem 0.75rem;
    -webkit-user-select: none;
    /* Safari */
    -ms-user-select: none;
    /* IE 10 and IE 11 */
    user-select: none;
    /* Standard syntax */
    transition: background-color 0.4s;
}

.c-browse__dropdown label input:checked+span {
    transition: background-color 0.1s;
    background-color: var(--color-text-selection);
}

.c-browse__btns {
    margin-top: 0.5rem;
}

.c-browse__btns--main {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.c-browse__btns--main label {
    display: inline-block;
    border-radius: 1rem;
    padding: 0.25rem 0.75rem;
    background-color: var(--color-text-span);
    color: var(--color-bg-dark);
    cursor: pointer;
    transition: background-color 0.2s;
}

.c-browse__btns--main label input {
    display: none;
}

.c-browse__btns--main label:has(input:checked) {
    background-color: var(--color-text-selection);
}

.c-browse__no-items {
    text-align: center;
    font-size: 1.2rem;
    padding: 2rem;
    color: var(--color-text-span);
}

.c-browse__no-items img {
    width: 10rem;
    margin-right: 2rem;
    animation: animateDiscoverArrow 1s;
}

.c-browse__filter-window {
    margin: 0.5rem 0;
    background: linear-gradient(145deg, rgba(0, 0, 0, 0) 5%, rgba(35, 36, 64, 0.75) 100%);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
    border-radius: 1rem;
    height: 0;
}

.c-browse__filter-window.active {
    height: auto;
    padding: 1rem;
    transition: 1s ease all;
}

.c-browse__filter-window h2 {
    font-size: 1.25rem;
}

@media(max-width: 767.98px) {
    .c-browse__filter-window {
        width: 100%;
    }
}

.flex-container-wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
}

@media only screen and (max-width: 1670px) {
    .flex-container-wrap {
        gap: 0.625rem;
    }
}

@media (max-width: 575.98px) {
    .flex-container-wrap {
        gap: 0.5rem 2vw;
    }
}

.flex-container-nowrap {
    padding: 0 3rem;
    display: flex;
    flex-wrap: nowrap;
    /* ✅ this one stays on one line */
    gap: 1.5rem;
}

.c-episode {
    display: flex;
    gap: 1.5rem;
    background-color: var(--color-bg-dark);
    border-radius: 1rem;
    overflow: hidden;
    position: relative;
}

.c-episode__list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.c-episode__img {
    position: relative;
    aspect-ratio: 16/9;
    width: 20rem;
    height: 100%;
}

.c-episode__date {
    color: var(--color-text-span) !important;
    position: absolute;
    right: 1rem;
    bottom: 0;
    font-size: 0.85rem;
}

.c-episode__content {
    padding-top: 1rem;
}

.c-episode__content h2,
.c-episode__content p {
    color: var(--color-text);
}

.c-episode__content h2,
.c-episode__content h3 {
    display: inline;
}

.c-content-item {
    overflow: hidden;
    cursor: pointer;
    transform: scale(1);
    border-radius: 0.5rem;
}

@media (min-width: 576px) {
    .c-content-item:hover {
        transform: scale(1.04), translate(5rem, 5rem);
        transition: transform 0.1s, box-shadow 0.2s;
        box-shadow: 0 0 0.5rem var(--color-bg-light), 0.5rem 0.5rem 0 0 var(--color-text-span), 0.5rem 0.5rem 1rem var(--color-bg-dark);
        z-index: 1;
    }

    .c-content-item--cg:hover {
        box-shadow: 0 0 0.5rem var(--color-bg-light), 0.5rem 0.5rem 0 0 var(--color-cg-red), 0.5rem 0.5rem 2rem var(--color-bg-dark);
    }
}

.c-content-item--inactive {
    opacity: 0;
    transform: scale(0.97);
}

.c-content-item--active {
    transition: all 0.4s ease;
    opacity: 1;
}

.c-content-item__original {
    width: 3rem;
    position: absolute;
    transform: translate(-2px, -2px);
}

.c-content-item__new {
    position: absolute;
    background-color: var(--color-text);
    box-shadow: 2px 2px 10px var(--color-bg-light);
    padding: 0.25rem 0.6rem 0.25rem 0.7rem;
    font-size: 0.85rem;
    color: var(--color-bg-dark);
    top: 0;
    right: 0;
    border-radius: 0 0 0 0.75rem;
    transform-origin: top right;
}

@media (max-width: 575.98px) {
    .c-content-item__new {
        transform: scale(0.8);
    }
}

.c-content-item__size--poster {
    width: 18rem;
    aspect-ratio: 4/5;
}

@media only screen and (max-width: 1670px) {
    .c-content-item__size--poster {
        max-width: 14.5rem;
    }
}

@media (max-width: 575.98px) {
    .c-content-item__size--poster {
        width: 40vw;
    }
}

.c-content-item__popup {
    width: 100%;
    height: 100%;
    display: grid;
    padding: 1rem 0.75rem;
    position: absolute;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, min-content);
    align-content: end;
    gap: 0.5rem;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 20%, var(--color-bg-dark) 100%);
    transition: opacity 0.4s;
}

.c-content-item__popup h3 {
    white-space: pre-wrap;
    text-shadow: 1.5px 2px 0 var(--color-bg-light);
    filter: drop-shadow(0 0 0.25rem var(--color-bg-light));
    color: var(--color-text);
    grid-area: 1/1/2/3;
    font-size: 1.5rem;
}

@media only screen and (max-width: 1670px) {
    .c-content-item__popup h3 {
        font-size: 1.25rem;
    }
}

@media (max-width: 575.98px) {
    .c-content-item__popup h3 {
        font-size: 1.1rem;
    }
}

.c-content-item__popup span {
    grid-area: 3/1/4/2;
    color: var(--color-highlight);
}

@media (min-width: 576px) {
    .c-content-item__popup {
        opacity: 0;
    }

    .c-content-item__popup:hover {
        transition: opacity 0.1s;
        opacity: 1;
    }
}

.c-content-item ul {
    gap: 0.25rem;
}

.c-content-item ul li {
    color: var(--color-text-span);
    background-color: var(--color-bg-ultradark);
    box-shadow: none;
    font-size: 0.75rem;
    padding: 0.2rem 0.4rem;
}

.c-content-item__type {
    grid-area: 3/2/4/3;
    color: var(--color-text);
    display: flex;
    justify-content: center;
    align-items: center;
}

.c-content-item__type--movie::before {
    content: url(assets/icons/movie.svg);
    width: 1.25rem;
    height: 1.25rem;
    aspect-ratio: 1/1;
    margin-right: 0.25rem;
}

.c-content-item__type--video-game::before {
    content: url(assets/icons/videogame.svg);
    width: 1.25rem;
    height: 1.25rem;
    aspect-ratio: 1/1;
    margin-right: 0.25rem;
}

.c-content-item img:last-child {
    height: 100%;
    aspect-ratio: 4/5;
}

.c-breadcrumbs {
    margin-bottom: 1.5rem;
}

.c-breadcrumbs ol {
    cursor: pointer;
}

.c-breadcrumbs ol li {
    display: inline;
}

.c-breadcrumbs ol li::before {
    content: ">";
    margin: 0 0.5rem;
    color: var(--color-text);
}

.c-breadcrumbs ol li:first-child::before {
    content: none;
}

.c-breadcrumbs ol li:last-child a {
    color: var(--color-cg-red);
}

.c-breadcrumbs ol li:last-child a:hover {
    color: var(--color-cg-darkred);
}

.c-breadcrumbs ol li a {
    color: var(--color-text-span);
}

.c-breadcrumbs ol li a:hover {
    color: var(--color-text);
}

.c-breadcrumbs ol li[aria-current=page] {
    color: var(--color-title-blue);
}

.c-heroCar {
    height: 30vw;
    overflow: hidden;
    position: relative;
}

.c-heroCar__breadcrumbs {
    background: linear-gradient(90deg, var(--color-bg-dark) 0%, rgba(0, 0, 0, 0) 100%);
    padding: 1.5rem 6rem 0 2rem;
    position: absolute;
}

.c-heroCar__logo-wrapper {
    position: absolute;
    left: 0;
    bottom: 0;
    padding: 2.5rem 5rem;
    background: linear-gradient(90deg, var(--color-bg-dark) 0%, rgba(0, 0, 0, 0) 100%);
}

.c-heroCar__logo-wrapper img {
    min-width: 15rem;
    max-width: 25rem;
    filter: drop-shadow(5px 5px 4px #000);
}

.c-heroCar__img-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    overflow: hidden;
}

.c-info__icon {
    border-radius: 1rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 2rem;
}

.c-info__icon img {
    height: 4rem;
}

.c-info__icon--explicit {
    color: var(--color-bg-dark);
    background-color: var(--color-highlight);
}

.c-detail {
    padding: 3rem 0 5rem 0;
}

.c-detail__header {
    position: relative;
    background-size: contain;
    padding-top: 0;
    overflow: hidden;
}

.c-detail__header--text {
    display: grid;
    justify-content: start;
    grid-template-columns: 240px 1fr;
    gap: 1.5rem;
}

@media (max-width: 1399.98px) {
    .c-detail__header--text {
        display: flex;
    }
}

@media (max-width: 991.98px) {
    .c-detail__header--text {
        padding-right: 0;
    }
}

@media (max-width: 1199.98px) {
    .c-detail__header--left {
        margin-top: 2rem;
    }
}

@media (max-width: 991.98px) {
    .c-detail__header--left {
        margin-top: 0;
    }
}

.c-detail__hero {
    z-index: 1;
    padding: 2.5rem 0 3rem 0;
    overflow: hidden;
    position: relative;
}

.c-detail__hero .container {
    position: relative;
    z-index: 1;
}

.c-detail__deco {
    position: absolute;
    right: 0;
    background-repeat: no-repeat;
    background-position: bottom right;
    z-index: 0;
}

.c-detail__deco--cg {
    top: -100%;
    width: 40rem;
    height: 60rem;
    background-image: url(assets/icons/cg-bg-icon.svg);
}

.c-detail__deco--movieroll {
    left: 0;
    top: -12rem;
    width: 20rem;
    height: 20rem;
    background-image: url(assets/icons/movieroll-bg-icon.svg);
}

.c-detail__deco--movie {
    transform: translateY(-40rem);
    bottom: 0;
    width: 45rem;
    height: 45rem;
    background-image: url(assets/icons/movie-bg-icon.svg);
}

.c-detail__deco--game {
    transform: translateY(-40rem);
    width: 45rem;
    height: 45rem;
    background-image: url(assets/icons/videogame-bg-icon.svg);
}

.c-detail__titles {
    margin-bottom: 1rem;
}

.c-detail__titles h1 {
    font-size: 2.8125rem;
}

@media (max-width: 1199.98px) {
    .c-detail__titles h1 {
        font-size: 2rem;
    }
}

@media (max-width: 575.98px) {
    .c-detail__titles h1 {
        font-size: 1.5rem;
    }
}

.c-detail__titles h1 span {
    color: var(--color-highlight);
    margin-right: 0.75rem;
}

.c-detail__titles h2 {
    color: var(--color-text-span);
    font-size: 1.8rem;
    margin-top: 0.5rem;
}

@media (max-width: 1199.98px) {
    .c-detail__titles h2 {
        font-size: 1.4rem;
    }
}

@media (max-width: 575.98px) {
    .c-detail__titles h2 {
        font-size: 1.2rem;
    }
}

.c-detail__game-img {
    pointer-events: none;
    max-height: 20rem;
    margin-bottom: 1rem;
    box-shadow: 0.5rem 0.5rem 0 0 var(--color-bg-ultradark);
}

.c-detail__game-btn {
    background-color: var(--color-bg-light);
    width: fit-content;
    font-size: 1.5rem;
    padding: 1rem;
    margin-bottom: 1rem;
}

.c-detail__tag-grid {
    display: grid;
    gap: 1rem 1.5rem;
    grid-template-columns: min-content 1fr;

}

.c-detail__tag-grid span {
    margin-top: 0.15rem;
    width: fit-content;
    color: var(--color-text-span);
}

.c-detail__language {
    color: var(--color-text-span);
    font-size: 1rem;
    box-shadow: none;
    padding: 0.3rem 1rem 0.3rem 0;
    width: 100%;
}

.c-detail__poster {
    margin-bottom: 1.5rem;
    cursor: pointer;
}

@media (max-width: 1199.98px) {
    .c-detail__poster {
        display: none;
    }
}

.c-detail__poster img {
    width: 20rem;
}

.c-detail__poster--mobile {
    position: relative;
    cursor: pointer;
    display: none;
    padding-bottom: 1rem;
}

@media (max-width: 1199.98px) {
    .c-detail__poster--mobile {
        display: block;
    }
}

.c-detail__description {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.c-detail__description h2 {
    margin-bottom: 1rem;
}

.c-detail__description .raw-html-embed {
    margin-bottom: 1.2rem;
}

.c-detail__description .raw-html-embed .c-detail__description--name-span {
    color: var(--color-text-span);
}

.c-detail__description--top {
    width: 100%;
    display: grid;
    align-items: center;
}

@media (max-width: 1199.98px) {
    .c-detail__description--top {
        grid-template-columns: 10rem 1fr;
    }

    .c-detail__description--top .raw-html-embed {
        padding-left: 1.5rem;
    }
}

.c-detail__description--name-span {
    color: var(--color-text-span);
}

.c-detail__episode-nav {
    cursor: pointer;
    min-width: 26rem;
    aspect-ratio: 16/9;
    position: relative;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    margin-bottom: 2rem;
    transition: transform 0.4s;
}

.c-detail__episode-nav:hover {
    transform: scale(1.025);
    transition: transform 0.1s;
}

.c-detail__episode-text {
    z-index: 1;
    width: 80%;
    height: max-content;
    position: absolute;
    filter: drop-shadow(1.5px 1.5px 1px rgb(21, 21, 34));
}

.c-detail__episode-text h3 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

.c-detail__episode-text h3 span {
    color: var(--color-highlight);
    margin-right: 0.5rem;
}

.c-detail__episode-text p {
    width: 80%;
}

.c-detail__episode-btns {
    z-index: 1;
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 1rem;
    border-radius: 0 1.25rem 0 calc(1.25rem - 1.5px);
    display: flex;
    justify-content: start;
    gap: 1rem;
    background-color: var(--color-bg-dark);
}

.c-detail__episode-btns a:hover {
    color: var(--color-highlight);
}

.c-detail__episode-bg {
    position: absolute;
    background-position: right !important;
    background-size: cover !important;
    border-radius: 1.25rem;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
}

.c-detail__episode-all {
    z-index: 1;
    position: absolute;
    bottom: -2rem;
    left: 0;
    width: 100%;
    text-align: right;
}

.c-detail__episode-all a {
    margin-right: 1rem;
}

.c-detail__episode-all a:hover {
    color: var(--color-highlight);
}

@media (max-width: 991.98px) {
    .c-detail__stars {
        margin-bottom: 2.5rem;
    }
}

.c-detail__related-scroll {
    padding-top: 2rem;
}

.c-detail__related-scroll a:hover {
    transform: scale(1) !important;
}

.c-detail__related-scroll a .c-content-item__image {
    max-width: 15rem;
}

@media (max-width: 767.98px) {
    .c-detail__related-scroll a .c-content-item__image {
        max-width: 12.5rem;
    }
}

.c-detail__trailers--wrapper {
    padding-top: 2rem;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1.5rem;
}

.c-detail__gallery--wrapper {
    padding-top: 2rem;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.c-ad-window {
    backdrop-filter: grayscale(100%);
}

.c-ad-window__horizontal-fill {
    display: flex;
    justify-content: center;
    width: 100%;
    padding: 2.5rem 0;
}

.c-tags {
    grid-area: 2/1/3/3;
    display: flex;
    flex-wrap: wrap;
    justify-content: start;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
}

.c-tags li {
    cursor: pointer;
    background-color: var(--color-bg-light);
    box-shadow: 0.2rem 0.2rem 0 0 var(--color-bg-ultradark);
    padding: 0.3rem 0.65rem;
    border-radius: 1rem;
}

.c-tags--language li {
    color: var(--color-text-span);
    background-color: var(--color-bg-dark);
}

.c-tags--language li:first-child {
    color: var(--color-text);
}

.c-tags--explicit {
    color: var(--color-bg-dark) !important;
    background-color: var(--color-highlight) !important;
    display: flex;
}

.c-tags--explicit::before {
    content: "";
    display: inline-block;
    width: 0.75rem;
    margin: 0.05rem 0.15rem 0 0;
    background-image: url("assets/icons/explicit.svg");
    background-repeat: no-repeat;
}

.c-tags--explicit-big a {
    color: var(--color-bg-dark);
}

.c-tags--explicit-big:before {
    width: 1rem;
    margin: 0;
    transform: translateX(-0.25rem);
}

.c-tags--explicit-big:hover {
    transition: background-color 0.1s;
    background-color: aqua !important;
}

.c-detail__carousel {
    margin-top: 1rem;
    display: flex;
    justify-content: start;
    gap: 1rem;
    overflow: auto;
    overflow-x: visible;
}

.c-detail__carousel-item {
    aspect-ratio: 16/9;
    height: 5rem;
}

.c-detail__carousel-item img {
    height: 100%;
}

.c-star-cast {
    width: fit-content;
    display: flex;
    align-items: center;
    gap: 0.8rem;
    cursor: pointer;
    transition: 0.4s;
}

@media (min-width: 576px) {
    .c-star-cast:hover {
        transition: 0.1s;
        scale: 1.05;
    }

    .c-star-cast:hover .c-star-cast__img {
        transition: 0.1s;
        box-shadow: 0.2rem 0.2rem 0 0 var(--color-cg-red);
    }

    .c-star-cast:hover .c-star-cast__text--name {
        transition: 0.1s;
        color: var(--color-cg-red);
    }
}

.c-star-cast__img {
    width: 5rem;
    height: 5rem;
    aspect-ratio: 1/1;
    border-radius: 50%;
    transition: box-shadow 0.4s;
    background-color: var(--color-bg-ultradark);
    box-shadow: 0.2rem 0.2rem 0 0 var(--color-cg-blue);
}

@media (max-width: 1399.98px) {
    .c-star-cast__img {
        width: 4rem;
        height: 4rem;
    }
}

@media (max-width: 575.98px) {
    .c-star-cast__img {
        width: 3.5rem;
        height: 3.5rem;
    }
}

.c-star-cast__text {
    display: block;
}

.c-star-cast__text--name {
    transition: 0.4s;
    color: var(--color-text);
    font-size: 1rem;
    margin-bottom: 0.4rem;
}

@media (max-width: 575.98px) {
    .c-star-cast__text--name {
        font-size: 0.8rem;
    }
}

.c-star-cast__text--credit {
    color: var(--color-text-span);
    font-size: 0.85rem;
    line-height: 1.2rem;
}

@media (max-width: 575.98px) {
    .c-star-cast__text--credit {
        font-size: 0.8rem;
    }
}

.c-star-cast__text--credit li {
    display: inline;
}

.c-star-cast__wrapper {
    margin-top: 2rem;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto;
    gap: 1.5rem 0.5rem;
}

@media (max-width: 1399.98px) {
    .c-star-cast__wrapper {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 1199.98px) {
    .c-star-cast__wrapper {
        gap: 1.5rem 2.5rem;
    }
}

@media (max-width: 991.98px) {
    .c-star-cast__wrapper {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 767.98px) {
    .c-star-cast__wrapper {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 575.98px) {
    .c-star-cast__wrapper {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.8rem 0.5rem;
    }
}

.c-star-cast--people {
    width: 30%;
    margin-bottom: 1rem;
}

.c-star-cast--inactive img {
    box-shadow: 0.2rem 0.2rem 0 0 var(--color-text-span);
}

.c-star-cast--inactive:hover {
    scale: 1;
}

.c-star-cast--inactive:hover .c-star-cast__img {
    box-shadow: 0.2rem 0.2rem 0 0 var(--color-text-span);
}

.c-star-cast--inactive:hover .c-star-cast__text--name {
    color: var(--color-text);
}

.c-trailer h3 {
    position: relative;
    z-index: 1;
    margin-top: 1rem;
    font-size: 1.25rem;
}

.c-trailer__img-wrapper {
    aspect-ratio: 16/9;
    box-shadow: 0.5rem 0.5rem 0 0 var(--color-bg-dark);
    border-radius: 1.25rem;
    overflow: hidden;
    transition: box-shadow 0.4s;
}

.c-trailer__img-wrapper img {
    width: 100%;
    height: 100%;
    transition: transform 0.4s;
}

.c-trailer__img-wrapper:hover {
    transition: box-shadow 0.1s;
    box-shadow: 0.5rem 0.5rem 0 0 var(--color-cg-red);
}

.c-trailer__img-wrapper:hover img {
    transition: transform 0.4s;
    transform: scale(1.025);
}

.c-trailer__primary {
    width: calc(50% - 1rem);
}

@media (max-width: 767.98px) {
    .c-trailer__primary {
        width: 100%;
    }
}

.c-trailer__secondary {
    width: calc(50% - 1rem);
}

@media (max-width: 767.98px) {
    .c-trailer__secondary {
        width: 100%;
    }
}

.c-trailer__tertiary {
    width: calc(33% - 1.5rem);
}

@media (max-width: 991.98px) {
    .c-trailer__tertiary {
        width: calc(50% - 1rem);
    }
}

.c-video__wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: calc(100vh - var(--nav-height) - 6px - 5rem);
    padding: 2.5rem 0;
}

.c-video__return {
    cursor: pointer;
    position: fixed;
    background-color: rgba(0, 0, 0, 0);
    color: var(--color-cg-red);
    font-size: 1rem;
    transition: color 0.4s;
    position: absolute;
    top: 1rem;
}

.c-video__return:hover {
    transition: color 0.1s;
    color: var(--color-highlight);
}

.c-video__text {
    margin-top: 0.75rem;
}

.c-video__text p {
    margin-top: 0.5rem;
}

@media (min-width: 992px) {
    .c-video__text p {
        width: 80%;
    }
}

.c-video__popup {
    display: none;
    z-index: 2;
    background: linear-gradient(145deg, rgba(0, 0, 0, 0.9) 0%, rgba(11, 0, 27, 0.9) 100%);
    width: 100vw;
    height: calc(100vh - var(--nav-height));
    position: fixed;
    bottom: 0;
    overflow: scroll;
    animation: fadeoutt 0.5s;
}

.c-video__popup--active {
    animation: fadeinn 0.25s;
}

.c-video__popup iframe {
    margin-top: 5rem;
    width: 100%;
    aspect-ratio: 16/9;
}

@keyframes fadeinn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fadeoutt {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

.u-loading-gradient-background {
    animation: animateBg 5s linear infinite;
    background-image: linear-gradient(-45deg, var(--color-bg-ultradark), var(--color-bg-light), var(--color-bg-ultradark), var(--color-bg-light), var(--color-bg-ultradark));
    background-size: 200% 200%;
}

@keyframes animateBg {
    0% {
        background-position: 0% 0%;
    }

    100% {
        background-position: 100% 100%;
    }
}

.c-cast-detail {
    padding: 2.5rem 0 2.5rem 0;
}

.c-cast-detail__main-gallery {
    margin-bottom: 2rem;
    overflow: hidden;
    height: 28rem;
    display: grid;
    grid-template-columns: 25.5% 1fr 15%;
    grid-template-rows: repeat(3, 1fr);
    grid-column-gap: 0.5rem;
    grid-row-gap: 0.5rem;
}

@media (max-width: 1399.98px) {
    .c-cast-detail__main-gallery {
        height: 25rem;
    }
}

@media (max-width: 991.98px) {
    .c-cast-detail__main-gallery {
        grid-template-columns: 40% 1fr 1fr 25%;
        grid-template-rows: repeat(3, 1fr);
        height: 20rem;
    }
}

.c-cast-detail__main-gallery-item {
    background-size: cover;
    background-position: center;
}

.c-cast-detail__main-gallery-item:nth-child(1) {
    background-position: center top;
    grid-area: 1/1/4/2;
}

.c-cast-detail__main-gallery-item:nth-child(2) {
    grid-area: 1/2/4/3;
}

.c-cast-detail__main-gallery-item:nth-child(3) {
    grid-area: 1/3/2/4;
}

.c-cast-detail__main-gallery-item:nth-child(4) {
    grid-area: 2/3/3/4;
}

.c-cast-detail__main-gallery-item:nth-child(5) {
    grid-area: 3/3/4/4;
    display: flex;
    justify-content: center;
    align-items: center;
}

.c-cast-detail__main-gallery-item:nth-child(5):hover {
    transition: color 0.4s;
}

.c-cast-detail__main-gallery-item:nth-child(5):hover span {
    transition: color 0.1s;
    color: var(--color-highlight);
}

.c-cast-detail__main-gallery-item:nth-child(5) span {
    pointer-events: none;
    z-index: 1;
    position: absolute;
}

.c-cast-detail__main-gallery-item:nth-child(5) div {
    width: 100%;
    height: 100%;
    filter: brightness(25%);
    background-image: url(../img/cast/Callum_Stamp-0/pic5.jpeg);
    background-size: cover;
    transition: filter 0.4s;
}

.c-cast-detail__main-gallery-item:nth-child(5) div:hover {
    transition: filter 0.1s;
    filter: brightness(50%);
}

@media (max-width: 991.98px) {
    .c-cast-detail__main-gallery-item:nth-child(1) {
        grid-area: 1/1/4/2;
    }

    .c-cast-detail__main-gallery-item:nth-child(2) {
        grid-area: 1/2/3/5;
    }

    .c-cast-detail__main-gallery-item:nth-child(3) {
        grid-area: 3/2/4/3;
    }

    .c-cast-detail__main-gallery-item:nth-child(4) {
        grid-area: 3/3/4/4;
    }

    .c-cast-detail__main-gallery-item:nth-child(5) {
        grid-area: 3/4/4/5;
    }
}

.c-cast-detail__tags {
    margin-top: 0.5rem;
    display: flex;
    justify-content: start;
    gap: 1.8rem;
}

.c-cast-detail__tags li {
    list-style: disc;
    color: var(--color-text-span);
    font-size: 1.15rem;
    margin-left: -0.2rem;
}

.c-cast-detail__tags li:first-child {
    list-style: none;
    margin-left: 0;
}

.c-cast-detail p {
    margin-top: 1.5rem;
}

.c-cast-detail__socials {
    fill: var(--color-text-span);
    display: flex;
    gap: 1rem;
}

.c-cast-detail__socials a {
    display: block;
    transition: 0.4s;
}

.c-cast-detail__socials a svg {
    height: 1.75rem;
}

.c-cast-detail__socials a:hover {
    transition: 0.1s;
    fill: var(--color-cg-red);
}

.c-gallery {
    background: radial-gradient(ellipse at 10% 90%, #310b16 0%, transparent 55%), radial-gradient(ellipse at 90% 90%, #0f0c22 0%, transparent 55%), radial-gradient(ellipse at 90% 10%, #101931 0%, transparent 55%), radial-gradient(ellipse at 10% 10%, #1c132a 0%, transparent 55%);
    background-color: #170d24;
    height: calc(100vh - var(--nav-height));
}

.c-gallery h2,
.c-gallery h3 {
    font-size: 0.8rem;
    color: var(--color-text-span);
    margin-bottom: 0.25rem;
}

.c-gallery__nav {
    z-index: 1;
    position: relative;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.c-gallery__nav h1 {
    font-size: 1rem;
    margin-right: 2rem;
    color: var(--color-highlight);
    text-align: end;
}

.c-gallery__close {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--color-text);
    background: rgba(10, 0, 0, 0.75);
    width: fit-content;
    padding: 0.5rem;
    border-radius: 2rem;
    z-index: 10;
    position: relative;
    transform: translateX(-0.5rem);
}

.c-gallery__close svg {
    fill: var(--color-text);
    width: 1rem;
    height: 1rem;
}

.c-gallery__close:hover {
    color: var(--color-highlight);
}

.c-gallery__close:hover svg path {
    fill: var(--color-highlight);
}

@media (max-width: 767.98px) {
    .c-gallery__close {
        margin: 1rem 0 0.5rem 0;
    }
}

.c-gallery__arrow {
    cursor: pointer;
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: calc(100vh - var(--nav-height));
    padding: 2rem;
    transition: background-color 0.1s;
}

.c-gallery__arrow::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.1s;
}

.c-gallery__arrow:hover::before {
    opacity: 1;
}

.c-gallery__arrow:hover svg {
    fill: var(--color-highlight);
    transition: fill 0.1s;
}

.c-gallery__arrow svg {
    fill: var(--color-text);
    z-index: 1;
    transition: fill 0.1s;
}

.c-gallery__arrow--left::before {
    background: linear-gradient(90deg, rgb(10, 0, 0) 0%, rgba(0, 0, 0, 0) 100%);
}

.c-gallery__arrow--right {
    right: 0;
}

.c-gallery__arrow--right::before {
    background: linear-gradient(-90deg, rgb(10, 0, 0) 0%, rgba(0, 0, 0, 0) 100%);
}

.c-gallery__arrow--inactive svg {
    fill: var(--color-text-span) !important;
    transition: fill 0.4s;
}

.c-gallery__arrow--inactive::before {
    opacity: 0 !important;
    transition: opacity 0.4s;
}

.c-gallery__view {
    display: flex;
    justify-content: center;
    align-items: center;
    height: calc(100vh - var(--nav-height) - 3rem);
}

.c-gallery__view img {
    max-width: 100%;
    max-height: 100%;
}

.c-gallery__info-top {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

.c-gallery__info {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    position: absolute;
    width: 100%;
    padding-top: 0.5rem;
    bottom: 0;
    left: 0;
    background: rgba(10, 0, 0, 0.75);
}

.c-gallery__overview {
    width: 100vw;
    bottom: 5rem;
    height: 0;
    padding: 0 5.5rem 0 1.5rem;
    transition: height 0.4s;
    display: flex;
    gap: 0.5rem;
    overflow: auto;
    overflow-x: visible;
}

.c-gallery__overview img {
    height: 4rem;
    transition: all 0.1s;
    outline-offset: -2px;
}

.c-gallery__overview img:hover {
    outline: 2px solid var(--color-highlight);
    filter: brightness(125%);
}

.c-gallery__overview--active {
    height: 5rem;
}

.c-gallery__overview--active-img {
    outline: 2px solid var(--color-cg-red);
    outline-offset: -2px;
}

.c-gallery__open-overview {
    cursor: pointer;
    color: var(--color-cg-red);
    transition: color 0.4s;
}

.c-gallery__open-overview:hover {
    color: var(--color-cg-darkred);
    transition: color 0.1s;
}

.c-gallery__fullscreen-btn,
.c-gallery .c-gallery__exit-fullscreen-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 0.5rem 0.6rem;
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    cursor: pointer;
    z-index: 10;
}

.js-galleryView {
    position: relative;
    overflow: hidden;
}

.js-galleryView img {
    -webkit-user-drag: none;
    user-select: none;
    pointer-events: auto;
}

.c-gallery__exit-fullscreen-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 0.5rem 0.6rem;
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    cursor: pointer;
    z-index: 10;
}

.c-about {
    padding: 5rem 0;
}

.c-about h1 {
    color: var(--color-cg-red);
    margin-bottom: 2.5rem;
}

.c-about h2 {
    color: var(--color-cg-red);
    margin-bottom: 1.5rem;
}

.c-about__img-caption {
    margin-top: 0.5rem;
    color: var(--color-text-span);
}

.c-news {
    overflow: hidden;
    height: fit-content;
}

.c-news__img {
    position: relative;
    border-radius: 1rem 1rem 0 0;
    height: 12.5rem;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

.c-news__content {
    margin-bottom: 2rem;
    background-image: linear-gradient(to top, transparent 0%, var(--color-bg-ultradark) 100%);
    border-top: none;
    padding: 1rem;
    color: var(--color-text);
}

.c-news__content h2 {
    margin-bottom: 0.5rem;
}

.c-news__date {
    color: var(--color-text-span);
    position: absolute;
    right: 0;
    bottom: 0;
    padding: 0.5rem 0.4rem 0.5rem 0.5rem;
    border-radius: 0.5rem 0 0 0;
    font-size: 0.8rem;
    background-color: var(--color-bg-dark);
}

.c-news:hover h2 {
    transition: color 0.1s;
    color: var(--color-highlight);
}

.c-people {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-wrap: wrap;
    max-height: 80rem;
    padding: 5rem 0;
}

.c-people .c-star-cast img {
    max-width: 3rem !important;
    max-height: 3rem !important;
    border-radius: 1.25rem !important;
}

.c-people h2 {
    margin-bottom: 1rem;
    width: 30%;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--color-text-span);
}

.c-people section {
    background: none;
}

.c-people__thumb {
    overflow: hidden;
    aspect-ratio: 3/4;
    width: 15rem;
}

.c-people__thumb a {
    display: block;
    height: 100%;
}

.c-people__name-list {
    color: var(--color-text-span);
}

.c-people__name-list li {
    margin-bottom: 0.25rem;
}

.c-page-counter {
    display: inline;
    position: absolute;
    right: 0;
    color: var(--color-text-span);
}

.c-page-counter__num-current {
    color: var(--color-text);
}

.c-page-counter__browse {
    position: absolute;
    right: 0;
}

.c-page-counter.is-hidden {
    display: none;
}

.c-showcase__navigation {
    background: linear-gradient(90deg, rgba(131, 58, 180, 1) 0%, rgba(253, 29, 29, 1) 50%, rgba(252, 176, 69, 1) 100%);
    margin-right: 1rem;
    padding: 1.75rem 1.75rem 0.75rem 1.5rem;
    border-radius: 1rem;
    display: flex;
    gap: 1.5rem;
    position: relative;
    overflow: hidden;
}

.c-showcase__navigation span {
    color: white;
    background-color: white;
    padding: 0.25rem 1.25rem;
    color: black;
    position: absolute;
    left: 0;
    top: 0;
    font-size: 0.75rem;
    border-radius: 0 0 0.4rem 0;
}

.c-showcase__navigation a {
    color: white;
    font-size: 0.8rem;
}

.c-showcase__navigation a:hover {
    color: blue;
}

/*---------------------------------------/*
 # UTILITIES
/*---------------------------------------*/
.u-hidden {
    display: none;
}

.u-bg-dark {
    background: linear-gradient(145deg, var(--color-bg-light) 0%, var(--color-bg-ultradark) 50%);
}

.u-bg-dark--red {
    background: linear-gradient(145deg, #3a0015 0%, var(--color-cg-dark-blue) 100%);
    background-attachment: fixed;
}

.u-bg-dark--blue {
    background: linear-gradient(145deg, #032227 0%, var(--color-cg-dark-blue) 100%);
    background-attachment: fixed;
}

.u-bg-dark--gray {
    background: linear-gradient(145deg, var(--color-bg-light) 0%, var(--color-cg-dark-blue) 100%);
    background-attachment: fixed;
}

.u-bg-light {
    background: linear-gradient(145deg, var(--color-bg-light) 0%, var(--color-bg-dark) 100%);
}

.u-static-bg {
    top: 0;
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: -9;
}

.u-text-highlight {
    color: var(--color-highlight);
}

.u-hover-highlight:hover {
    color: var(--color-highlight) !important;
}

.u-ckeditor-styling h2 {
    margin-bottom: 1rem;
}

.u-gate {
    color: var(--color-text);
    cursor: text;
}

.u-gate:hover {
    color: var(--color-text);
}

.u-tooltip {
    position: relative;
    cursor: default;
}

.u-tooltip .u-tooltip__text {
    visibility: hidden;
    padding: 0.25em 0.5em;
    background-color: var(--color-text-span);
    color: #fff;
    text-align: center;
    border-radius: 0.25em;
    white-space: nowrap;
    /* Position the tooltip */
    position: absolute;
    z-index: 1;
    top: -120%;
}

.u-tooltip:hover .u-tooltip__text {
    visibility: visible;
    transition-delay: 0.3s;
}

/*# sourceMappingURL=styles.css.map */