/*  Font Barlow */
    @import url('https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,400;0,600;1,400&family=Barlow+Condensed:wght@500;600;700&display=swap');

    /* ==== Mobile first ==== */
    /* ===== Header ===== */
    .hero_logo {
        padding-top: 40px;
        padding-bottom: 2%;
        width: clamp(280px, 60vw, 500px);
        align-self: center;
    }

    header {
        display: flex;
        flex-direction: column;
    }

    /* ==== Navigation ==== */

    nav {
        width: 100%;
    }

    .nav_pages,
    .social {
        display: none;
    }



    .flex_container {
        display: flex;
        flex-direction: column;
    }

    .nav_pages a:hover {
        color: whitesmoke;
        font-weight: bold;

    }

    .social a:hover {
        color: whitesmoke;
        font-weight: bold;
    }


    .nav_pages {
        flex-direction: column;
        align-items: center;

        list-style: none;
        font-family: "Barlow Condensed", sans-serif;

        font-size: 26px;
        gap: 20px;


    }

    .social {
        flex-direction: row;
        align-items: center;
        justify-content: space-around;

        list-style: none;
        padding-top: 16px;
        padding-bottom: 16px;
    }

    .nav_pages a {

        text-decoration: none;
        color: #999;
        text-shadow: 1px 1px 2px black;
    }

    .social a {
        color: whitesmoke;
        font-size: 25px;
        text-shadow: 1px 1px 2px black;
    }

    /* == Når burgeren klikkes == */

    nav.showNav {
        position: fixed;
        inset: 0;
        min-height: 100vh;


        background-image: url("images/black_bg.png");
        background-size: cover;
        background-position: center;

        z-index: 1000;

    }

    nav.showNav .flex_container {
        min-height: 100vh;

        display: flex;
        flex-direction: column;
    }

    nav.showNav .nav_pages {
        display: flex;

        flex-direction: column;
        align-items: center;
        justify-content: center;

        flex: 1;
    }

    nav.showNav .social {
        display: flex;

        justify-content: space-around;

        padding-bottom: 250px;
    }

    .showMenu {
        display: flex;
    }

    .burger {
        position: absolute;
        right: 5px;
        top: 5px;
        margin: 20px;
        color: whitesmoke;
        font-size: 30px;
        cursor: pointer;
        z-index: 1001;
    }

    /* ===== Footer ===== */

    .index_page footer ul {
        display: none;
    }

    footer {
        margin-top: auto;
        width: 100%;
    }

    footer ul {


        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-gap: 10px;
        margin-top: auto;


        justify-items: center;
        list-style: none;

        background-color: rgba(0, 0, 0, 0.8);

    }



    .disclaimer {
        grid-template-columns: 1fr;
        text-align: center;

        background-color: rgba(241, 19, 19, 0.8);
        border-radius: 5px;

        margin-top: 2%;
        padding-bottom: 2%;
    }

    .disclaimer p {
        color: black;

    }

    .fa-hooli,
    .fa-aviato {
        font-size: 60px;
    }



    /* == General styles == */

    #wrapper {
        max-width: 1440px;
        margin: 0 auto;
        min-height: 100vh;


        display: flex;
        flex-direction: column;

        background-image: url("images/bg.png");
    }

    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    html {
        overflow-y: scroll;
    }

    img {
        width: 100%;
        height: auto;
    }

    body {
        color: #e6e6e6;
    }

    h2 {
        color: #ffffff;
        font-size: 40px;
    }

    p {
        color: #ffffff;
        font-size: 20px;
    }

    h2 {
        font-family: "Barlow Condensed", sans-serif;
        text-shadow: 1px 1px 2px black;

    }

    p {
        font-family: "Barlow", sans-serif;
        text-shadow: 1px 1px 2px black;
    }

    body {
        background-color: black;
    }

    main {
        margin-left: 2%;
        margin-right: 2%;
    }


    /* ==== Home/Index ==== */

    .index_page #wrapper {

        background-image: url("images/index_bgmobile.png");
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }

    .btn_container {
        display: flex;
        flex-direction: column;
        align-items: center;

        position: fixed;

        top: 66%;
        left: 50%;
        right: 50%;

        gap: 20px;
    }



    .btn {
        text-align: center;
        color: black;
        font-size: 16px;
        border: none;
        cursor: pointer;

        width: 160px;
        padding: 16px 30px;
        border-radius: 5px;

        margin-top: 5%;
        margin-bottom: 5%;

    }

    .btn_container .btn:hover {
        background-color: black;
        color: white;
    }



    /* === Gallery === */

    .gallery {
        display: grid;
        grid-template-columns: 1fr;
        width: 100%;
        max-width: 500px;
        /* samme som left + right */
        margin-inline: auto;

    }




    figcaption {

        font-family: "Barlow", sans-serif;
        color: #ffffff;
        text-shadow: 1px 1px 2px black;
        margin-bottom: 16px;
        background-color: rgba(0, 0, 0, 0.7);

    }

    /* === Lightbox === */

    #lightbox img {
        display: none;
    }

    #lightbox figcaption {
        display: none;
    }

    /* == Synopsis == */

    .intro {
        font-weight: bold;
        padding-top: 16px;
        padding-bottom: 16px;
    }

    .synopsis_text p {

        padding-top: 16px;
        padding-bottom: 16px;
    }

    .synopsis_article {
        background-color: rgba(0, 0, 0, 0.7);
        padding-right: 16px;
        padding-left: 16px;
    }

    /* == TABELLER ==  */

    .datatabel {
        max-width: 400px;
    }

    td {

        font-family: "Barlow", sans-serif;
        vertical-align: top;
        padding-bottom: 16px;
        padding-top: 16px;
        text-shadow: 1px 1px 2px black;
        color: whitesmoke;
    }


    .datatabel_width {

        min-width: 150px;
        max-width: 200px;
        font-weight: bold;
    }

    table {
        padding-bottom: 16px;
    }





    /* ==== Cast ==== */

    .cast_container {
        display: grid;
        grid-template-columns: 1fr;



        width: 100%;
        margin-inline: auto;
    }

    .cast_text {
        background-color: rgba(0, 0, 0, 0.7);
        padding-right: 16px;
        padding-left: 16px;
        margin-top: 16px;
        margin-bottom: 16px;
    }

    .cast {
        width: min(100%, 520px);
        margin-inline: auto;
    }

    .cast picture {
        display: block;
        width: clamp(280px, 80%, 100%);
        margin-inline: auto;
    }

    .cast picture img {
        width: 100%;
        height: auto;
    }

    .cast_container p {
        padding-top: 16px;
        padding-bottom: 16px;

    }

    .xtra-txt {
        display: none;
    }

    .knap {
        cursor: pointer;
        color: whitesmoke;
    }

    /* == media query tablet == */
    @media (min-width: 768px) {

        /* === Header === */

        header {
            display: flex;
            flex-direction: column;
        }

        /* ==== Hero logo ==== */

        .hero_logo {
            padding-top: 0;
            padding-bottom: 0;

            order: 2;
            max-width: 60%;
            align-self: center;
        }




        /* == Navigation == */
        nav {
            order: 1;
        }


        .flex_container {

            display: flex;
            flex-direction: row;
            justify-content: space-between;

            margin-left: 2%;
            margin-right: 2%;

        }

        .burger {
            display: none;
        }

        nav {

            background-color: rgba(0, 0, 0, 0.8);
        }

        .nav_pages li {
            width: 80px;

        }

        .nav_pages,
        .social {
            display: flex;
        }

        .nav_pages {
            flex-direction: row;
            gap: 50px;

            padding-bottom: 2%;
            padding-top: 2%;


        }

        .social {
            gap: 10px;

            padding-bottom: 2%;
            padding-top: 2%;

        }

        .social a {
            color: #999;
        }

        /* === Footer === */
        .index_page footer ul {
            display: grid;
        }


        /* === Home/Index === */
        .index_page #wrapper {
            background-image: url("images/index_bgtablet.png");
        }

        /* == Gallery == */
        .gallery_page .hero_logo {
            display: none;
        }

        .gallery {
            grid-template-columns: repeat(2, 1fr);
            grid-template-rows: repeat(5, 1fr);
            max-width: 1000px;

            padding-top: 5%;
            column-gap: 16px;
        }

        .foto_gallery {
            display: block;
            margin-inline: auto;
        }

        /* == Synopsis == */

        .synopsis_article {
            display: grid;
            grid-template-columns: 1fr;
            grid-template-rows: auto 1fr 1fr;
            margin-right: 10%;
            margin-left: 10%;

        }

        .datatabel {
            grid-column-start: 1;
            grid-row-start: 2;
        }

        .intro {
            grid-column-start: 1;
            grid-row-start: 1;
        }

        .synopsis_text {
            grid-column-start: 1;
            grid-row-start: 3;
        }

        /* == Cast == */

        .cast picture {
            width: 280px;
        }

        .xtra-txt {
            display: block;
        }

        .knap {
            display: none;
        }

    }



    /* ==== Desktop ==== */
    @media (min-width: 1440px) {
        /* Navigation */

        .nav_pages {
            gap: 100px;
            margin-left: 10%;
        }

        .social {
            margin-right: 10%;
            gap: 20px;
        }

        /* === Home/Index === */
        .index_page #wrapper {
            background-image: url(images/index_bgdesktop.png);
        }

        /* === Gallery === */

        .gallery_page .hero_logo {
            display: none;

        }

        .gallery {
            padding-top: 2%;
            grid-template-columns: repeat(3, 1fr);
            grid-template-rows: repeat(3, 1fr);
            grid-gap: 32px;
            max-width: 1000px;
        }

        .gallery_container figcaption {
            display: none;
        }

        /* === Lightbox === */

        #lightbox-mask {
            background-color: rgba(0, 0, 0, 0.5);

            position: fixed;
            inset: 0;

            z-index: 2;

            display: grid;
            place-items: center;
        }

        #lightbox img {
            display: block;
        }

        #lightbox figcaption {
            display: block;
        }

        #lightbox {

            text-align: center;


            font-family: "Barlow Condensed", sans-serif;
            font-weight: bold;



            background-color: black;
            border-radius: 5px;
        }

        #lightbox img {
            max-width: 100%;
            max-height: 80vh;
            height: auto;
            width: auto;
        }

        .hideThis {
            display: none !important;
        }

        .gallery_page img {
            cursor: pointer;
        }

        /* === Cast === */

        .cast {
            width: min(100%, 1000px);
            margin-inline: auto;

            display: grid;
            grid-template-columns: 1fr 2fr;
            align-items: start;

        }

        .cast picture {
            grid-column: 1;
            grid-row: 1;
        }

        .cast_text {
            grid-column: 2;
            grid-row: 1;
        }

        .cast:nth-child(even) {
            grid-template-columns: 2fr 1fr;
        }

        .cast:nth-child(even) picture {
            grid-column: 2;
            grid-row: 1;
        }

        .cast:nth-child(even) .cast_text {
            grid-column: 1;
            grid-row: 1;
        }
    }