@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wdth,wght@12..96,75..100,200..800&family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');
*{margin: 0 auto; padding: 0; box-sizing: border-box;}

/* .........Generelle stylings......... */
    html{
        scroll-behavior: smooth;
        font-size: 100%;
    }

    :root{
        /* Farver */
        --color-gradientlines: rgba(76, 33, 27, 0), rgb(76, 33, 27), rgba(76, 33, 27, 0);
        --color-neutral: #fefbf2;
        --color-text: #1E1E1E;
        --color-accent-moss: #7f7349;
        --color-accent-sky: #bdd3f7;
        --color-accent-rose: #fad7de;
        --color-cta: #b85630;
        --color-cta-strong: #4c211b;
        --color-bg-gradient: linear-gradient(170deg, var(--color-accent-rose), var(--color-neutral) 45%);

        /* Typografi */
        --font-display: "Bricolage Grotesque", sans-serif;
        --font-header: "Playfair Display", serif;
        --font-body: "DM Sans", sans-serif;

        /* Fontstørrelser */
        --text-mobile-xs: 1rem;
        --text-mobile-s: 1.2rem;
        --text-mobile-m: 1.5rem;
        --text-mobile-l: 1.8rem;
        --text-mobile-xl: 2.1rem;
        --text-mobile-xxl: 62px;

        --text-tablet-xs: 1rem;
        --text-tablet-s: 1.6rem;
        --text-tablet-m: 2rem;
        --text-tablet-l: 2.5rem;
        --text-tablet-xl: 3rem;
        --text-tablet-xxl: 98px;

        --text-desktop-xs: 1.3rem;
        --text-desktop-s: 1.6rem;
        --text-desktop-m: 2.2rem;
        --text-desktop-l: 2.7rem;
        --text-desktop-xl: 3rem;
        --text-desktop-xxl: 150px;

        /* Spacing */
        --space-xs: .5rem;
        --space-s: 1.5rem;
        --space-m: 3rem;
        --space-l: 5rem;
        --space-xl: 6.5rem;

        /* Radius */
        --radius-s: .5rem;
        --radius-m: 1rem;
        --radius-l: 1.5rem;
        --radius-xl: 2rem;

        /* Animation */
        --transition-fast: .3s ease-in-out;
        --transition-base: .6s ease-in-out;
        --transition-slow: 1s ease-in-out;
        --transition-slower: 4s ease-in-out;
    }

    h1{
        font-family: var(--font-display);
        font-optical-sizing: auto;
        font-variation-settings: "wdth" 100, "wght" 800;
        color: var(--color-text);
        font-size: var(--text-desktop-xl);
        line-height: 1;
        margin-bottom: var(--space-s);
        max-width: 70ch;
    }

    h2{
        font-family: var(--font-display);
        color: var(--color-accent-moss);
        margin-bottom: var(--space-s);
        font-size: var(--text-desktop-l);
        line-height: 1.3;
        font-weight: 900;
        max-width: 70ch;
    }

    h3{
        font-family: var(--font-display);
        color: var(--color-text);
        font-size: var(--text-desktop-m);
        line-height: 1.2;
        font-weight: 600;
        text-align: left;
        margin-bottom: var(--space-xs);
        max-width: 70ch;
        margin-bottom: var(--space-s);
    }

    h4{
        font-family: var(--font-header);
        color: var(--color-cta-strong);
        font-style: italic;
        font-size: var(--text-desktop-s);
        line-height: 1.2;
        font-weight: 500;
        text-align: left;
        margin-bottom: var(--space-s);
        max-width: 70ch;
    }

    p{
        font-family: var(--font-body);
        color: var(--color-text);
        font-size: var(--text-desktop-xs);
        line-height: 1.5;
        font-weight: 400;
        margin-bottom: var(--space-m);
        max-width: 70ch;
    }

    a{
        font-family: var(--font-header);
        color: var(--color-neutral);
        font-style: italic;
        font-size: var(--text-desktop-xs);
        font-weight: 500;
        text-decoration: none;
        max-width: 70ch;
    }

    li{
        font-family: var(--font-header);
        color: var(--color-cta-strong);
        font-style: italic;
        font-size: var(--text-desktop-xs);
        font-weight: 400;
        max-width: 70ch;
    }

    button{
        padding: .7rem 2rem .9rem 2rem;
        border-radius: var(--radius-xl);
        border: 3px solid var(--color-cta);
        background-color: var(--color-cta);
        color: var(--color-neutral);
        background-image: linear-gradient(var(--color-cta-strong), var(--color-cta-strong));
        background-size: 0% 100%;
        background-position-y: 100%;
        background-position-x: 100%;
        background-repeat: no-repeat;
        transition: background-size var(--transition-fast);
    }

    button:hover{
        background-size: 100% 100%;
        background-position-x: 0%;
    }

    body{
        background-image: var(--color-bg-gradient);
        width: 100%;
        height: 100%;
        overflow-x: hidden;
    }

    section, article, nav, aside, main, footer, header, figure{
        display: block;
    }

    section{
        margin-top: var(--space-xl);
        margin-bottom: var(--space-xl);
        width: 80%;
    }


/* BURGERMENU OG NAV BURGERMENU OG NAV BURGERMENU OG NAV BURGERMENU OG NAV BURGERMENU OG NAV BURGERMENU OG NAV BURGERMENU OG NAV BURGERMENU OG NAV BURGERMENU OG NAV */
    /* .........Wrapper......... */
        /* Sørger for at det resterende indhold ikke er tilgængeligt og kan ses, mens menuen vises */
        div#wrapper{
            width: 100%;
        }


    /* .........Navigation......... */
        header a#burger_menu{
            display: none;
        }

        /* generel styling af navigation (ul, li osv.) */
        nav{
            display: flex;
            flex-direction: row;
            width: 100%;
            height: 10vh;
        }

        .logo{
            background: url(img/logo_orange.svg) no-repeat center left;
            display: block;
            width: 50%;
            background-size: 150px;
            background-position: 10% 50%;
        }

        nav>ul{
            position: relative;
            z-index: 4;
            width: 50%;
            height: 100%;
            display: flex;
            flex-direction: row;
            float: right;
        }

        /* ALLE list items styling */
        nav li{
            list-style-type: none;
            display: flex;
            align-items: center;
            width: 100%;
        }

        /* Overmenuen styling */
        nav>ul>li>a{
            color: var(--color-cta-strong);
            background-image: linear-gradient(var(--color-gradientlines));
            background-size: 0% 2px;
            background-position-y: 100%;
            background-position-x: 100%;
            background-repeat: no-repeat;
            transition: background-size 0.2s ease-in-out;
            padding: .2rem 1rem;
        }

            /* Hover transition på overmenupunkterne */
            nav ul>li>a:hover{
                background-size: 100% 2px;
                background-position-x: 0%;
            }

        /* Undermenuen styling */
        nav li>ul{
            position: fixed;
            inset: 10vh 0 0 0;
            width: auto;
            height: auto;
            opacity: 0;
            transition: all 1s ease-in-out;
            display: flex;
            flex-direction: row;
            color: var(--color-cta-strong);
            background-color: var(--color-accent-rose);
            /* Virker på Chrome og andre browsere */
            -webkit-transform:translate(100%, 0);
            /* Virker på Firefox */
            -moz-transform:translate(100%, 0);
            /* Får det til at virke generelt */
            transform:translate(100%, 0);
        }

            /* Hover transitions på selve undermenuen */
            nav>ul>li:hover>ul, nav>ul>li:active>ul, nav>ul>li:focus>ul{
                /* Virker på Chrome og andre browsere */
            -webkit-transform:translate(0, 0);
            /* Virker på Firefox */
            -moz-transform:translate(0, 0);
            /* Får det til at virke generelt */
            transform:translate(0, 0);
                opacity: 1;
            }

        nav li>ul>li{
            padding: var(--space-l) 0 var(--space-l) 0;
            position: relative;
        }
   
        nav ul>li>ul>li>a{
            width: 100%;
            height: 100%;
        }

        nav h3{
            font-style: normal;
        }

        nav h2>span{
            position: relative;
            font-family: var(--font-display);
            color: var(--color-text);
            font-size: var(--text-desktop-xxl);
            line-height: 1;
            font-weight: 800;
        }

        /* Baggrundsbilleder i undermenuen */
        .backimg1, .backimg2, .backimg3, .backimg4{
            width: 100%;
            height: 100%;
            position: absolute;
            z-index: 1;
            opacity: 0;
            top: 0;
        }

            .navschool .backimg1{
                background: url(img/hf4_thumbnail.webp) no-repeat center center;
                background-size: cover;
                transition: all var(--transition-base);
            }

            .navschool .backimg2{
                background: url(img/hf3_thumbnail.webp) no-repeat center center;
                background-size: cover;
                transition: all var(--transition-base);
            }

            .navschool .backimg3{
                background: url(img/hf2_thumbnail.webp) no-repeat center center;
                background-size: cover;
                transition: all var(--transition-base);
            }

            .navschool .backimg4{
                background: url(img/hf1_thumbnail.webp) no-repeat center center;
                background-size: cover;
                transition: all var(--transition-base);
            }

            .navwork .backimg1{
                background: url(img/eyeroll.gif) no-repeat center center;
                background-size: contain;
                transition: all var(--transition-base);
                background-color: rgb(220, 183, 225);
            }

            .navwork .backimg2{
                background: url(img/info_map_thumbnail.webp) no-repeat center center;
                background-size: cover;
                transition: all var(--transition-base);
            }

            .navwork .backimg3{
                background: url(img/tenth_back.webp) no-repeat center center;
                background-size: cover;
                transition: all var(--transition-base);
            }

            .navwork .backimg4{
                background: url(img/pop_gocard_thumbnail.webp) no-repeat center center;
                background-size: cover;
                transition: all var(--transition-base);
            }

        /* Hover transitions på undermenupunkter */
            .navschool1:hover .backimg1, .navschool2:hover .backimg2, .navschool3:hover .backimg3, .navschool4:hover .backimg4, .navwork1:hover .backimg1,
            .navwork2:hover .backimg2, .navwork3:hover .backimg3, .navwork4:hover .backimg4{
                opacity: 1;
            }

        .line{
            background-image: linear-gradient(var(--color-gradientlines));
            height: 100%;
            min-width: 2px;
        }

        .hug{
            position: relative;
            z-index: 2;
            display: flex;
            flex-direction: column;
            height: 100%;
            justify-content: space-between;
        }

        nav ul .titles{
            margin: 0 var(--space-s);
        }


/* PROJECT TEASERS PROJECT TEASERS PROJECT TEASERS PROJECT TEASERS PROJECT TEASERS PROJECT TEASERS PROJECT TEASERS PROJECT TEASERS PROJECT TEASERS PROJECT TEASERS */
    .projects{
        padding-bottom: var(--space-xl);
        margin-top: var(--space-s);
        display: flex;
        flex-direction: row-reverse;
        gap: var(--space-m);
        width: 100%;
        height: auto;
    }

    .projects article{
        width: 50%;
        position: relative;
        z-index: 1;
        filter: blur(0);
        transition: filter var(--transition-fast), scale var(--transition-fast)
    }

    .projects img, .projects video{
        object-fit: cover;
        width: 100%;
        aspect-ratio: 16 / 9;
    }

        /* Hover animation på projekterne */
        .projects>article:hover, .projects>article:hover{
            scale: 1.02;
        }

    /* Laver et pseudo-element i form af en udtonet baggrundsfarve mellem billede/video og teksten */
    .projects>article a::after{
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background: var(--color-neutral);
        opacity: 0;
        transition: all var(--transition-fast);
        z-index: 2;
    }

        /* Hover animation på pseudo-elementet */
        .projects>article:hover a::after{
            opacity: .7;
    }

    /* Styling af tekst på projekterne */
        .projects h4{
            color: var(--color-text);
            padding: 0 var(--space-m);
            text-align: center;
        }

        .projects h2{
            color: var(--color-cta-strong);
            font-style: normal;
            font-size: var(--text-mobile-xl);
            margin: 0 var(--space-s);
            text-align: center;
        }

        .projects .inside{
            position: absolute;
            z-index: 3;
            height: 100%;
            width: 100%;
            top: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            opacity: 0;
            transition: var(--transition-fast);
            gap: var(--space-xs);
        }
        
        /* Hover animation på teksterne */
            .projects>article:hover .inside{
                opacity: 1;
            }



    
/* PROJECT PAGES PROJECT PAGES PROJECT PAGES PROJECT PAGES PROJECT PAGES PROJECT PAGES PROJECT PAGES PROJECT PAGES PROJECT PAGES PROJECT PAGES PROJECT PAGES */
    .around{
        display: flex;
        flex-direction: row;
        width: 100%;
        align-items: flex-start;
        height: 100%;
    }

    .context{
        position: sticky;
        top: 0;
        width: 35%;
        height: 100%;
        padding: var(--space-m) var(--space-m) 0;
        align-self: flex-start;
        overflow: hidden;
        margin-top: 0;
    }

    /* gallery styling */
        .gallery{
            width: 65%;
            height: 100%;
            overflow-y: auto; 
            margin-top: 0;
        }

        .gallery>img, .gallery>iframe{
            width: 100%;
            height: 80vh;
            overflow: hidden;
            margin-bottom: var(--space-s);
            border-style: none;
        }

        .gallery .doubleimg{
            display: flex;
            flex-direction: row;
            gap: var(--space-s);
            width: 100%;
            height: 80vh;
            overflow: hidden;
            margin-bottom: var(--space-s);
        }

        .doubleimg>img, .doubleimg>video{
            width: 50%;
            height: 100%;
        }

        .gallery img:nth-child(1), .gallery img:nth-child(2), .gallery img:nth-child(3), .gallery img:nth-child(4), .gallery img:nth-child(5), .gallery img:nth-child(7), .gallery img:nth-child(8), .gallery video{
            display: block;
            object-fit: cover;
        }

        video{
        background-color: transparent !important;
        }


    /* Generel Infoblock styling */
        .info{
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            margin-bottom: var(--space-s);
        }

        .info h3, .info h4{
            margin-bottom: 0;
        }

        .around h3{
            margin-left: 0;
        }

        .around h4{
            text-align: right;
            margin-right: 0;
        }

        .textbox button{
            margin-top: var(--space-m);
            width: 100%;
        }


    /* Sidebar styling*/
        #sidebar{
            width: 35%;
            left: 0;
            height: 100%;
            padding: var(--space-xs);
            background-color: var(--color-cta-strong);
            z-index: 2;
            position: fixed;
            top: 0;
            align-self: start;
            transition: .6s ease-in-out;
        }

        /* Den lukkede sidebar */
                #sidebar.close{
                    left: -35%;
                    padding: 0;
            }

        /* Den åbne sidebar */
            #sidebar .container{
                display: flex;
                flex-direction: row;
                height: 100vh;
            }

            .elaborate{
                overflow: scroll;
                padding: var(--space-m) var(--space-xs) var(--space-m) var(--space-m);
            }

            .elaborate h3{
            color: var(--color-accent-rose);
            }

            .elaborate p{
                color: var(--color-neutral);
            }

            /* Gem scrollbar for Chrome, Safari og Opera */
            .elaborate::-webkit-scrollbar, .gallery::-webkit-scrollbar {
                display: none;
            }

            /* Gem scrollbar for IE, Edge og Firefox */
            .elaborate, .gallery{
                -ms-overflow-style: none;  /* IE and Edge */
                scrollbar-width: none;  /* Firefox */
            }

        /* Sidebar knap */
            #toggle-btn{
                height: fit-content;
                padding: var(--space-s) var(--space-xs);
                border: none;
                background-color: var(--color-cta-strong);
                border-radius: 0 var(--radius-s) var(--radius-s) 0;
                cursor: pointer;
                position: relative;
                top: 50vh;
                left: 2.3rem;
                transition: all .6s ease-in-out;

                background-image: none;
                background-size: 0%;
                
                svg{
                    transition: rotate .6s ease;
                    fill: var(--color-accent-rose);
                }
            }

            #sidebar.close:hover{
                left: -34%;
                background-size: 0%;
            }

            #toggle-btn svg{
                height: var(--text-desktop-xs);
                fill: none;
                stroke: var(--color-accent-rose);
                stroke-linecap: round;
                stroke-linejoin: round;
                stroke-width: var(--radius-s);
                rotate: 90deg;
            }

            #toggle-btn.rotate svg{
                rotate: -90deg;
            }


/* BACK TO TOP BACK TO TOP BACK TO TOP BACK TO TOP BACK TO TOP BACK TO TOP BACK TO TOP BACK TO TOP BACK TO TOP BACK TO TOP BACK TO TOP BACK TO TOP BACK TO TOP */
    .back_to_top{
        width: 100%;
        height: 80px;
        background: url(img/chevron_up.svg) no-repeat center center;
        background-size: 6rem;
        transition: 0.2s ease-in-out;
    }

    .back_to_top:hover{
        background-size: 7rem;
    }


/* FOOTER FOOTER FOOTER FOOTER FOOTER FOOTER FOOTER FOOTER FOOTER FOOTER FOOTER FOOTER FOOTER FOOTER FOOTER FOOTER FOOTER FOOTER FOOTER FOOTER FOOTER FOOTER FOOTER */
    footer{
        width: 100%;
        height: 100%;
        padding: var(--space-s) 0;
    }

    footer>div{
        width: 80%;
        display: flex;
        flex-direction: row;
        align-items: center;
    }

    .contact{
        width: 50%;
    }

    .contact ul{
        list-style-type: none;
        float: right;
    }

    .contact button{
        margin-top: var(--space-xs);
        width: 100%;
    }

    .contact a{
        text-decoration: none;
    }

    .socials{
        width: 80%;
    }

        /* Animation af some ikoner */
            .socials>a{ 
                background: url(img/linkedin.svg) no-repeat center left; 
                transition: .5s all;
                width: 4rem;
                height: 4rem;
                display: block;
                margin: 0 0;
            }

            .socials>a:hover{ 
                background: url(img/linkedin_dark.svg) no-repeat center left;
            }


@media screen and (max-width:768px){
/* .........Generelle stylings......... */
    h1{
        font-size: var(--text-tablet-xl);
        margin-bottom: var(--space-m);
    }

    h2{
        font-size: var(--text-tablet-l);
    }

    h3{
        font-size: var(--text-tablet-m);
    }

    h4{
        font-size: var(--text-tablet-s);
    }

    p, li{
        font-size: var(--text-tablet-xs);
    }

    a{
        font-size: var(--text-tablet-xs);
        text-decoration: none;
    }

    button{
        padding: 1rem 4rem 1.2rem 4rem;
    }


/* BURGERMENU OG NAV BURGERMENU OG NAV BURGERMENU OG NAV BURGERMENU OG NAV BURGERMENU OG NAV BURGERMENU OG NAV BURGERMENU OG NAV BURGERMENU OG NAV BURGERMENU OG NAV */
    /* .........Wrapper......... */
        /* Sørger for at det resterende indhold slet ikke er tilgængeligt og kan ses, mens menuen vises */
            div#wrapper{
                width: 100%;
            }

        .menu_aaben{
            /* Virker på Chrome og andre browsere */
            -webkit-transform:translate(100%, 0);
            /* Virker på Firefox */
            -moz-transform:translate(100%, 0);
            /* Får det til at virke generelt */
            transform:translate(100%, 0);
        }

    /* .........Header......... */
        header{
            height: 75px;
            /* Så den ligger i et lag oven på sidens øvrige elementer, og altså ikke påvirkes af transitionings */
            position: absolute;
            width: 100%;
            z-index: 10;
        }

        header a{
            background: url(img/logo_orange.svg) no-repeat center left;
            display: block;
            height: 75px;
            background-size: 100px;
            background-position: 5% 50%;
            max-width: unset;
            background-color: var(--color-accent-rose);
        }

        header a#burger_menu{
            /* Styling og placering af burgermenu */
            background: none;
            display: block;
            width: 40px;
            height: 40px;
            position: relative;
            top: -83px;
            float: right;
            margin: var(--space-s);
        }

        a.butt span{
            /* Styling af stregerne i burgermenuen */
            display: block;
            height: 10%;
            width:80%;
            background: var(--color-cta-strong);
            position: absolute;
            top: 20%;
            left: 50%;
            border-radius: var(--radius-m);
            margin-left: -40%;
            transition: .3s
        }

        /* Placeringer af stregerne ift hinanden */
        a.butt span:nth-child(2) {
            top:45% 
        }

        a.butt span:nth-child(3) {
            top:70% 
        }

        /* Animation af brugermenuen */
        a.butt.open span:first-child {
            top:45%;
            transform: rotate(-45deg); 
        }

        a.butt.open span:nth-child(2) {
            opacity: 0;
            width: 0px
        }

        a.butt.open span:nth-child(3) {
            top:45%;
            transform: rotate(45deg) 
        }

        header + div {
            transition: var(--transition-base);
            position: relative;
            transform: none;
        }

    /* .........Navigation......... */
        nav{
            position: relative;
            left: -100%;
            top: 0;
            padding-top: 5vh;
        }

        .logo{
            width: 0%;
        }

        nav>ul{
            display: flex;
            flex-direction: column;
            width: 100%;
            margin-top: var(--space-s);
        }

        nav ul li{
            margin: var(--space-xs) 0 0 0;
            position: relative;
            flex-direction: column;
        }

        nav a{
            font-size: var(--text-tablet-s);
            margin: 0 0;
        }

        nav ul>li>a{
            border-bottom: 1px solid;
            border-image: linear-gradient(90deg, var(--color-gradientlines)) 1;
            width: 100%;
            padding: var(--space-xs) var(--space-s);
            font-size: var(--text-mobile-s);
        }


        /* Undermenuen styling */
        nav li>ul{
            opacity: 1;
            flex-direction: column;
            top: 0;
            position: relative;
            background-color: unset;
            width: 100%;
            /* undo transitions fra bred skærm */
                /* Virker på Chrome og andre browsere */
                -webkit-transform:translate(0, 0);
                /* Virker på Firefox */
                -moz-transform:translate(0, 0);
                /* Får det til at virke generelt */
                transform:translate(0, 0);
        }

        nav li>ul>li {
            padding: 0;
            margin: 0;
        }

        .hug{
            margin-left: 0;
            width: 100%;
            flex-direction: row-reverse;
        }

        nav ul .titles{
            width: 100%;
        }

        .hug span{
            display: none;
        }

        .titles h4{
            font-size: var(--text-tablet-xs);
            color: var(--color-text);
            font-style: normal;
            font-weight: 400;
            font-family: var(--font-body);
            margin-bottom: 0;
        }

        .line{
            height: .2%;
            width: 90%;
            background-image: linear-gradient(90deg, var(--color-gradientlines));
        }

        .titles h3{
            display: none;
        }


        /* Fjerner hover transitions på undermenu */
        nav>ul>li:hover>ul, nav>ul>li:active>ul, nav>ul>li:focus>ul{
            left: unset;
            opacity: 1;
        }

        /* Fjerner baggrundsbillede hover transitions på undermenupunkter */
        .navschool1:hover .backimg1, .navschool2:hover .backimg2, .navschool3:hover .backimg3, .navschool4:hover .backimg4, .navwork1:hover .backimg1,
        .navwork2:hover .backimg2, .navwork3:hover .backimg3, .navwork4:hover .backimg4{
                opacity: 0;
        }

/* PROJECT TEASERS PROJECT TEASERS PROJECT TEASERS PROJECT TEASERS PROJECT TEASERS PROJECT TEASERS PROJECT TEASERS PROJECT TEASERS PROJECT TEASERS PROJECT TEASERS */
    .projects{
            flex-direction: column-reverse;
        }

    .projects article{
        width: 100%;
    }


/* BACK TO TOP BACK TO TOP BACK TO TOP BACK TO TOP BACK TO TOP BACK TO TOP BACK TO TOP BACK TO TOP BACK TO TOP BACK TO TOP BACK TO TOP BACK TO TOP BACK TO TOP */
    .back_to_top{
        background-size: 4.5rem;
    }

    .back_to_top:hover{
        background-size: 5.5rem;
    }
}

/* Specielle breakpoints til projektsider */
@media screen and (max-width: 1100px){
/* PROJECT PAGES PROJECT PAGES PROJECT PAGES PROJECT PAGES PROJECT PAGES PROJECT PAGES PROJECT PAGES PROJECT PAGES PROJECT PAGES PROJECT PAGES PROJECT PAGES */
        .around{
            flex-direction: column;
            height: auto;
        }

        .context{
            width: 90%;
            padding: var(--space-m) 0 0 0;
            position: unset;
            overflow: visible;
        }

        .gallery{
            width: 90%;
            overflow-y: unset;
            overflow: visible;
            height: auto;
        }

        .gallery>.doubleimg{
            flex-direction: column;
            gap: var(--space-s);
            height: 180vh;
        }

        .doubleimg>img, .doubleimg>video{
            width: 100%;
            height: 50%;
        }

        .gallery>img{
            height: 80vh;
        }

    /* Sidebar styling*/
        /* Lukket sidebar */
            #sidebar.close{
                /* Virker på Chrome og andre browsere */
                -webkit-transform: translateY(100%);
                /* Virker på Firefox */
                -moz-transform: translateY(100%);
                /* Får det til at virke generelt */
                transform: translateY(100%);
                left: 0;
                padding: var(--space-xs);
            }

            #sidebar.close:hover{
            position: fixed !important;
            left: 0;
            padding: var(--space-xs);
            bottom: 0;
            width: 100%;
            height: auto;
            }

        /* Åben sidebar */
            #sidebar{
                position: fixed !important;
                left: 0;
                padding: var(--space-xs);
                width: 100%;
                height: fit-content;
                max-height: 80%;
                top: unset;
                bottom: 0;
                transition: transform .6s ease-in-out;
                /* Virker på Chrome og andre browsere */
                -webkit-transform:translateY(0);
                /* Virker på Firefox */
                -moz-transform:translateY(0);
                /* Får det til at virke generelt */
                transform: translateY(0);
            }

            #sidebar .container{
                flex-direction: column-reverse;
                height: 85vh;
            }

            .elaborate{
                flex: 1;
                min-height: 0;
                overflow-y: auto;
                overflow-x: hidden;
                padding: 0 var(--space-s) var(--space-s) var(--space-s);
                height: 40%;
            }

        /* Sidebar knap styling */
            #toggle-btn{
                top: -2.8rem;
                left: unset;
                border-radius: var(--radius-s) var(--radius-s) 0 0;
                padding: var(--space-xs) var(--space-s);
            }

            #toggle-btn svg{
                rotate: 0deg;
            }

            #toggle-btn.rotate svg{
                rotate: 180deg;
            }
}


/* Vises på små skærme */
@media screen and (max-width:480px){
/* .........Generelle stylings......... */
    h1{
        font-size: var(--text-mobile-xl);
        margin-bottom: var(--space-s);
    }

    h2{
        font-size: var(--text-mobile-l);
    }

    h3{
        font-size: var(--text-mobile-m);
    }

    h4{
        font-size: var(--text-mobile-s);
    }

    p, li{
        font-size: var(--text-mobile-xs);
    }

    a{
        font-size: var(--text-mobile-xs);
        text-decoration: none;
    }

    button{
        padding: .9rem 1.5rem;
    }

    section {
    margin-top: var(--space-l);
    margin-bottom: var(--space-l);
    }

/* BURGERMENU OG NAV BURGERMENU OG NAV BURGERMENU OG NAV BURGERMENU OG NAV BURGERMENU OG NAV BURGERMENU OG NAV BURGERMENU OG NAV BURGERMENU OG NAV BURGERMENU OG NAV */
    /* .........Navigation......... */
        /* Undermenuen styling */
        .titles h3{
            font-size: var(--text-mobile-xs);
        }


/* FOOTER FOOTER FOOTER FOOTER FOOTER FOOTER FOOTER FOOTER FOOTER FOOTER FOOTER FOOTER FOOTER FOOTER FOOTER FOOTER FOOTER FOOTER FOOTER FOOTER FOOTER FOOTER FOOTER */
        footer>div{
            width: 100%;
            padding: var(--space-s);
            flex-direction: column;
            gap: var(--space-xs);
        }

        .contact{
            width: 100%;
        }

        .contact>ul{
            float: unset;
        }

        .socials{
            width: 100%;
        }

        .socials>a{
            margin: auto;
        }

}