:root {
    --heading-font-family: 'Shippori Antique B1';
    --heading-font-weight: 700;
    --body-font-family: "Montserrat", sans-serif;
    --body-font-weight: 400;

    /*Colors*/
    --text-lighter: oklch(41.23% 0.009 17.54);
    --text-main: oklch(35.46% 0.00838 17.291);
    --text-darker: oklch(21.25% 0.005 17.53);

    --background-main: oklab(99.107% 0 -0.00011);
    --background-100: oklch(92.49% 0.000 89.88);
    --background-200: oklch(84.52% 0.000 89.88);
    --background-600: oklch(51.03% 0.000 89.88);
    --background-800: oklch(32.11% 0.000 89.88);
    --background-950: oklch(15.91% 0.000 89.88);

    --primary-lighter: oklch(94.47% 0.035 205.49);
    --primary-main: oklch(85.78% 0.086 204.99);
    --primary-darker: oklch(80.12% 0.114 205.20);

    --secondary-lighter: oklch(94.70% 0.025 11.58);
    --secondary-main: oklch(88.37% 0.057 12.90);
    --secondary-darker: oklch(79.44% 0.108 14.73);

    --accent-lighter: oklch(92.57% 0.098 91.74);
    --accent-main: oklch(87.38% 0.155 89.91);
    --accent-darker: oklch(83.53% 0.171 84.66);

}

body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: var(--body-font-family);
    font-weight: var(--body-font-weight);
    color: var(--text-main);
    background-color: var(--background);

}

h1,
h2,
h3,
h4,
h5,
#sitename {
    font-family: var(--heading-font-family);
    font-weight: var(--heading-font-weight);
}

html {
    font-size: 100%;
    /* 16px */
}

h1 {
    font-size: 1.990rem;
    /* 31.84px */
}

h2 {
    font-size: 1.658rem;
    /* 26.56px */
}

h3 {
    font-size: 1.382rem;
    /* 22.08px */
}

h4,
#sitename {
    font-size: 1.152rem;
    /* 18.4px */
}

h5 {
    font-size: 0.960rem;
    /* 15.36px */
}

/* .small {
    font-size: 0.667rem;
    /* 10.72px 
} */

main {
    margin: 0.5em;
    padding: 0.5em;
    width: 75%;
    margin: 0 auto;
}

header,
footer {
    padding: 1em;
    width: 90%;
    margin: 0 auto;
}

header,
footer {
    justify-content: space-between;
    background-color: transparent;
    color: var(--text-main);

}

footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid oklch(41.23% 0.009 17.54 / 0.322);
}

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1em;
    width: 90%;
    margin: 0 auto;
    background-color: transparent;
    color: var(--text-main);
    border-bottom: 1px solid oklch(41.23% 0.009 17.54 / 0.322);
    position: relative;
}

#icon {
    width: 55px;
    height: auto;
}

#sitename {
    text-transform: uppercase;
    font-family: var(--heading-font-family);
    font-weight: var(--heading-font-weight);
    font-size: 1.152rem;

}

a {
    text-decoration: none;
    color: var(--text-main);
}

.navigation ul {
    display: block;
    flex-direction: row;
    list-style: none;
    align-content: center;
    justify-content: space-evenly;
    text-align: center;
    column-gap: 2em;
}

.navigation ul li {
    padding: 1em;
    border-radius: 2em;
}

.navigation ul li:hover {
    background-color: var(--secondary-main);
    transition: 0.3s ease-in-out;
    box-shadow: 0 0 20px var(--secondary-main);

    & a {
        color: var(--text-main);
    }
}

/************** NAVIGATION *****************/
/* HAMBURGER NAVIGATION */
.hamburger {
    background: none;
    border: none;
    color: var(--text-main);
    align-self: center;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    padding: 0.5em;
    transition: transform 0.3s ease;
}

.hamburger::before {
    content: "\2630";
    font-size: 2rem;
}

.hamburger.show::before {
    content: "⛌";
    font-size: 1.8rem;
}

/* NAVIGATION BAR */
.navigation {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background-color: var(--background-main);
    z-index: 1000;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px var(--background-600);
    border-bottom-left-radius: 2em;
    border-bottom-right-radius: 2em;
}

.navigation.show {
    display: block;
}

.navigation ul {
    display: flex;
    flex-direction: column;
    list-style: none;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 1em;
    padding: 1em 0;
    margin: 0;
}

.navigation ul li {
    padding: 0.5em 1em;
    border-radius: 2em;
    width: 80%;
}

.navigation ul li:hover {
    width: 90%;
    background-color: var(--secondary-main);
    box-shadow: 0 0 20px var(--secondary-main);
    transition: all 0.4s ease-in-out;
}

.navigation a {
    display: block;
    text-decoration: none;
    color: var(--text-main);
    text-transform: uppercase;
    font-weight: 500;
}

button {
    height: 45px;
    padding: 0.5em;
    background-color: var(--primary-main);
    border: none;
    border-radius: 1rem;
    font-family: var(--body-font-family);
    font-weight: var(--body-font-weight);

}

img {
    border-radius: 2em;
    width: 100px;
    height: auto;
    scale: 0.8;
    opacity: 0.5;
    animation: fadeIn linear forwards;
    animation-timeline: view();
    animation-range: 100px 500px;
}

input {
    height: 45px;
    border-radius: 2em;
    border: 2px solid var(--text-darker);
    font-family: var(--body-font-family);
    font-weight: var(--body-font-weight);
    padding-left: 2em;
}

p {
    grid-area: paragraph;
    line-height: 1.5;
    text-indent: 2em;
    text-align: left;
    padding: 0;
    margin-top: 0;
}

/*Buttons for navigation in page*/
.pagesBtn {
    text-decoration: none;
    color: var(--text-darker);
    background-color: var(--accent-lighter);
    padding: 0 1em;
    height: 45px;
    width: auto;
    border-radius: 2em;
    display: inline-block;
    align-content: center;
    text-align: center;
}

.pagesBtn:hover {
    background-color: var(--accent-main);
}

#seeMoreFilms-main {
    margin-left: 5%;
}

/**nav active button**/
.active {
    background-color: var(--primary-main);
    box-shadow: 0 0 20px var(--primary-main);

    & a {
        color: var(--text-main);
    }
}

/***** HOME PAGE *****/
.cards {
    box-shadow: 0 4px 6px var(--background-600);
    padding: 3em;
    border-radius: 2em;
    margin: 0.6em 0.6em 2em 0.6em;
}

#popularFilms {
    margin-top: 1.5em;
}

#topRatedFilms section {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

#topRatedFilms h2 {
    display: inline-block;
}

#filmOfTheDay {
    display: block;
    grid-template-areas:
        "vid vid vid"
        "info info info ";
    margin-bottom: 2em;

    & h3 {
        text-align: center;
    }
}

.featureFilm-info {
    grid-area: info;
    display: block;
    grid-template-areas:
        "photo title"
        "photo synopsis"
        "photo paragraph";

    column-gap: 1em;
    margin: 2em 0.5em 3em 0.5em;

    & .title-heading {
        grid-area: title;
        align-content: center;

        & h1 {
            text-align: center;
            text-transform: uppercase;
            animation: fadeInUp 0.6s ease-out forwards;
        }

        & h2 {
            position: relative;
            text-align: center;
            color: var(--text-main);
            animation: fadeInUp 0.8s ease-out forwards;

            & span {
                position: absolute;
                top: -50%;
                left: 0;
                bottom: 0;
                right: 0;
                font-size: 200%;
                display: inline-block;
                z-index: -1;
                /* opacity / 0.171 / 0.322 */
                color: oklch(79.469% 0.10761 13.964 / 0.322);
            }
        }
    }

    & figure {
        grid-area: photo;
        align-self: center;
        margin: 0;
        padding: 0;
        animation: slideInLeft 1s ease-out forwards;

        & img {
            width: 100%;
            border-bottom: 8px solid var(--primary-lighter);
            border-left: 8px solid var(--primary-lighter);
            box-shadow: -4px 6px 20px var(--background-600);
        }
    }

    & h4 {
        grid-area: synopsis;
        text-align: center;
        margin-bottom: 0.5em;
        margin-top: 0;
        padding: 0 5em 0 5em;
        display: grid;
        align-items: end;
        animation: fadeInUp 1s ease-out forwards;
    }

    & p {
        animation: fadeInUp 1s ease-out forwards;
    }
}


.video {
    grid-area: video;
    align-self: center;
    justify-self: center;
    position: relative;
    border-radius: 2em;
    overflow: hidden;
    padding-top: 56.25%;
    width: 80%;
    height: 0;
    box-shadow: 0 4px 6px var(--background-600);
}

.video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/***** FILM PAGE *****/
.film-grid,
.character-grid,
#popularFilms {
    display: block;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    padding: 20px;
}

.film-grid img,
#popularFilms img {
    width: 250px;
    height: auto;
}

.mainFilmsPage,
.mainCharPage {
    display: block;
    grid-template-areas:
        "header header header"
        "search search search"
        "filter film-grid film-grid"
        "filter film-grid film-grid";

    grid-template-columns: auto 1fr;

    & h1 {
        grid-area: header;
        text-align: center;
        margin-bottom: 0;
    }

    & .search-container {
        grid-area: search;
        display: inline-block;
        text-align: center;
        align-items: center;
        position: relative;
        width: 100%;
        max-width: 500px;
        margin: 2em auto;


        & #search {
            padding-right: 2.4em;
            box-sizing: border-box;
            width: 100%;
            border: 1px solid oklch(41.23% 0.009 17.54 / 0.322);
            box-shadow: 0 0 20px var(--background-200);
            font-size: 16px;
        }

        & #search:focus {
            border-color: var(--accent-darker);
            outline: none;
            box-shadow: 0 0 20px var(--accent-darker);
        }

        & button {
            position: absolute;
            right: 0;
            top: 0;
            height: 100%;
            width: 2.5em;
            min-width: 45px;
            cursor: pointer;
            border-radius: 2em;
        }

        & button:hover {
            cursor: pointer;
            background-color: var(--accent-darker);
            box-shadow: 0 0 20px var(--accent-darker);
            transition: 0.3s ease-in-out;
        }
    }

    & #filterMenu {
        grid-area: filter;
        display: flex;
        flex-direction: column;
        row-gap: 1em;
        padding: 2em;
        text-align: left;
        align-items: left;

        border-top: 1px solid oklch(41.23% 0.009 17.54 / 0.322);

        & button {
            width: 100%;
            text-align: center;
        }
    }

    & .film-grid,
    & .character-grid {
        grid-area: film-grid;
        border-top: 1px solid oklch(41.23% 0.009 17.54 / 0.322);
        padding-left: 3em;
        padding-top: 2em;
    }
}

/*Collapsible Filter menu*/
#filterMenu.collapsed .filterBtn {
    display: none;
    /*hide filter buttons*/
}

.toggle-icon {
    display: inline-block;
    position: relative;
    width: 1em;
    height: 1em;
    margin-left: 1em;
    transition: all 0.3s ease;
    background: transparent;
    cursor: pointer;
    margin: 0 1em;
}

.toggle-icon::before,
.toggle-icon::after {
    content: '';
    position: absolute;
    background-color: var(--accent-darker);
    box-shadow: 0 0 15px var(--accent-darker);
    transition: all 0.3s ease;
}

.toggle-icon::before {
    /* Horizontal line */
    width: 100%;
    height: 2px;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    
}

.toggle-icon::after {
    /* Vertical line */
    width: 2px;
    height: 100%;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}

#filterMenu:not(.collapsed) .toggle-icon::after {
    opacity: 0;
    transform: translateX(-50%) scaleY(0);
}

.simpleFilm-card {
    position: relative;
    cursor: pointer;
    animation: slideInRight 1s ease-out forwards;

    & h4 {
        margin-top: 0;
        font-style: italic;
    }

    & h3 {
        margin-top: 0;
        margin-bottom: 0;
    }

    & img {
        box-shadow: 0 0 20px var(--background-200);
    }
}

.simpleFilm-card:hover {
    transform: scale(1.05);
    transition: 0.3s ease-in-out;

    & img {
        box-shadow: 0 0 20px var(--primary-main);
    }

    & .film-rating::before {
        content: '🍿 Rated ';
    }

    & .film-score::before {
        content: '⭐ Score: ';
    }

    & .film-favorites::before {
        content: '❤️ Favorite: ';
    }

}

.filmCard-overlay {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    grid-template-areas:
        ". . c"
        ". . a"
        ". . b";
    row-gap: 0.6em;
    padding: 0.8em;
    scale: 0.8;
    opacity: 0.5;
    animation: fadeIn linear forwards;
    animation-timeline: view();
    animation-range: 100px 500px;
}

.film-rating {
    display: inline-block;
    grid-area: c;
}

.film-score {
    display: inline-block;
    grid-area: a;
}

.film-favorites {
    display: inline-block;
    grid-area: b;
}

.filmCard-overlay span {
    text-align: center;
    align-content: center;
    background-color: var(--background-main);
    border-radius: 2em;
    padding: 0.3em;
    font-size: 0.887rem;
}

.character-grid {
    & h2 {
        grid-column: 1/-1;
    }
}

/****CHARACTER PAGE ***/
.simpleChar-card {
    display: flex;
    flex-direction: column;
    position: relative;
    cursor: pointer;
    animation: slideInRight 1s ease-out forwards;
}

.simpleChar-card:hover {
    transform: scale(1.05);
    transition: 0.3s ease-in-out;

    & img {
        box-shadow: 0 0 20px var(--primary-main);
    }

    & .char-favorites::before {
        content: '❤️ Favorite: ';
    }

}

.simpleChar-card h3 {
    margin-top: 0;
}

.simpleChar-card img {
    width: 250px;
    box-shadow: 0 0 20px var(--background-200);
}

.charCard-overlay {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    grid-template-areas:
        ". . c";
    row-gap: 0.6em;
    padding: 0.8em;
    scale: 0.8;
    opacity: 0.5;
    animation: fadeIn linear forwards;
    animation-timeline: view();
    animation-range: 100px 500px;
}

.charCard-overlay span {
    text-align: center;
    align-content: center;
    background-color: var(--background-main);
    border-radius: 2em;
    padding: 0.3em;
    font-size: 0.887rem;
}

/***FILM DETAILED PAGE***/
.detailedFilmPage {
    display: block;
    grid-template-areas:
        " heading heading"
        " photo   detailinfo"
        "geninfo  geninfo";

    & .title-heading {
        grid-area: heading;
        align-content: center;

        & h1 {
            position: relative;
            text-align: center;
            color: var(--text-main);

            & span {
                position: absolute;
                top: -20%;
                left: 0;
                bottom: 0;
                right: 0;
                font-size: 150%;
                display: inline-block;
                z-index: -1;
                /* opacity / 0.171 / 0.322 */
                color: oklch(79.469% 0.10761 13.964 / 0.322);
            }
        }
    }

    & .film-detail-info {
        align-self: center;
        text-align: left;
        padding: 1em 0;
        display: flex;
        flex-direction: column;


        & p {
            font-weight: 600;
            text-indent: 0;

            & span {
                font-weight: 400;
                font-style: italic;
            }
        }
    }

    & .film-photos {
        grid-area: photo;
        height: auto;
        align-self: center;
        justify-self: center;

        & figure {
            margin: 0;
        }

        & img {
            width: 90%;
            height: auto;
            box-shadow: 0 4px 20px var(--background-600);
        }
    }

    & .film-general-info {
        grid-area: geninfo;
    }

}

/***CHAR DETAILED PAGE***/
.detailedCharPage {
    display: block;
    grid-template-areas:
        "heading heading"
        "photo   genInfo"
        "photo   geninfo";

    & .title-heading {
        grid-area: heading;
        align-content: center;

        & h1 {
            position: relative;
            text-align: center;
            color: var(--text-main);

            & span {
                position: absolute;
                top: -50%;
                left: 0;
                bottom: 0;
                right: 0;
                font-size: 200%;
                display: inline-block;
                z-index: -1;
                /* opacity / 0.171 / 0.322 */
                color: oklch(79.469% 0.10761 13.964 / 0.322);
            }
        }
    }

    & .char-photos {
        grid-area: photo;
        height: auto;

        & img {
            width: 250px;
            height: auto;
            box-shadow: 0 4px 20px var(--background-600);
        }
    }

    & .char-general-info {
        grid-area: geninfo;

        & img {
            width: 250px;
            height: auto;
        }
    }
}

/* FILTER BUTTONS */
#filterMenu {
    & button {
        cursor: pointer;
        background-color: var(--primary-main);
        box-shadow: 0 0 20px var(--primary-main);
        border-radius: 2em;
        padding: 1em;
        height: 45px;
        font-family: var(--body-font-family);
        font-size: 0.8rem;
    }

    & button:hover {
        cursor: pointer;
        background-color: var(--accent-main);
        box-shadow: 0 0 20px var(--accent-main);
        transition: 0.3s ease-in-out;
    }
}

@media screen and (min-width: 904px) {

    .film-grid,
    .character-grid,
    .filmCard-overlay,
    .featureFilm-info,
    .detailedFilmPage,
    .charCard-overlay,
    .detailedCharPage,
    .mainFilmsPage,
    .mainCharPage,
    #popularFilms {
        display: grid;
    }

    .hero-overlay-content {
        display: flex;
    }

    .featureFilm-info p {
        padding: 0 5em 0 5em;
    }

    header {
        display: grid;
        grid-template-columns: 53px 1fr 2fr;
        column-gap: 0.5em;
        align-items: center;
        justify-content: center;
        position: static;
    }

    .hamburger {
        display: none;
    }

    .navigation {
        display: flex;
        position: static;
        width: auto;
        height: auto;
        background: none;
        box-shadow: none;
        justify-content: flex-end;
        align-items: center;
    }

    .navigation ul {
        display: flex;
        flex-direction: row;
        gap: 2em;
        padding: 0;
    }

    .navigation ul li {
        width: auto;
        padding: 1em;
    }

    #filterMenu {
        border-right: 1px solid oklch(41.23% 0.009 17.54 / 0.322);
    }
}

/************** ANIMATIONS *****************/
@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }

    100% {
        opacity: 1;
    }
}

@keyframes fadeIn {
    to {
        scale: 1;
        opacity: 1;
    }
}

@keyframes slideInLeft {
    0% {
        transform: translateX(-100%);
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes slideInRight {
    0% {
        transform: translateX(100%);
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}