/* ------------------------------------------------ */
/* GLOBAL CSS */
/* General CSS for the whole website */
/* ------------------------------------------------ */
    :root {
        --palette-test: rgb(231, 254, 156);

        --primary-blue: 44, 62, 143;
        --secondary-blue: 91, 112, 205;
        --light-blue: 165, 177, 228;
        --dark-blue: 14, 20, 53;
        --neon-yellow: 207, 234, 52;
        --light-yellow: 231, 254, 156;
        --lightest-yellow: 244, 255, 207;
    }   

    html {
        scroll-behavior: smooth;
        -webkit-font-smoothing: antialiased;
        scrollbar-width: none;
        /*overscroll-behavior: contain;
        background-color: rgb(163, 183, 235);*/
    }
    /* -------------------------- */
    /* FONTS */
    /* -------------------------- */

        @font-face {
            font-family: 'BricolageGrotesque-SemiBold';
            src: url('typeface/BricolageGrotesque-SemiBold.ttf');
        }

        @font-face {
            font-family: 'BricolageGrotesque-ExtraLight';
            src: url('typeface/BricolageGrotesque-ExtraLight.ttf');
        }

        @font-face {
            font-family: 'InterRegular';
            src: url('typeface/Inter-Regular.ttf');
        }

        @font-face {
            font-family: 'InterBold';
            src: url('typeface/Inter-Bold.ttf');
        }

        @font-face {
            font-family: 'MyFontRegular';
            src: url('typeface/MyFont-Regular.ttf');
        }


    /* -------------------------- */
    /* SCROLLBAR */
    /* -------------------------- */
        ::-webkit-scrollbar {
            width:0px; /* Hide it */
        }

    /* -------------------------- */
    /* SELECTED TEXT */
    /* -------------------------- */
        body ::selection { 
            background:rgb(var(--neon-yellow));
            color:rgb(var(--primary-blue));
        }

        body *:focus-visible{
            outline: 3px solid rgb(var(--secondary-blue));
            border-radius: 2px;
        }
    /* -------------------------- */
    /* OVERLAY */
    /* -------------------------- */

        #overlay {
            width: 100vw;
            height: 100vh;
            position: fixed;
            top: 0;
            z-index: 10;
            background-color: rgba(var(--dark-blue), 0.7);
            display: none;
            justify-content: center;
            align-items: center;
            opacity: 0;
            transition-property: opacity;
            transition-duration: 0.3s;
            transition-timing-function: cubic-bezier(0.34, 0.34, 0.02, 0.97);
            backdrop-filter: blur(3px);
        }
            #overlay > *{
                z-index: 1;
                opacity: 0;
                transition-property: opacity;
                transition-duration: 0.3s;
                transition-timing-function: cubic-bezier(0.34, 0.34, 0.02, 0.97);
            }
                #overlay > video,
                #overlay > img{
                    max-width: 95%;
                    max-height: 95%;
                }
                #overlay iframe{
                    background-color: rgb(var(--primary-blue));
                    width: calc(100% - 5vh);
                    height: calc(100% - 5vh);
                    overflow: hidden;
                }
                #overlay form{
                    width: 80%;
                    max-width: 864px;
                    padding: 45px;
                    display: grid;
                    position: relative;
                    grid-template-columns: repeat(2, 1fr);
                    grid-gap: 10px 90px;
                    background-color: rgb(var(--lightest-yellow));
                    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
                    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
                    box-sizing: border-box;         /* Opera/IE 8+ */
                }
                    #overlay form::after{
                        position: absolute;
                        content: "";
                        width: 50%;
                        height: 100%;
                        border-right: 2px dashed rgb(var(--primary-blue));
                        pointer-events: none;
                    }
                    #overlay form a{
                        position: relative;
                        width: 32%;
                        left: 45%;
                        margin-bottom: 10%;
                    }
                        #overlay form a img{
                            height: 80%;
                            margin-top: 10%;
                        }
                        #overlay form a::after{
                            position: absolute;
                            z-index: -1;
                            content:"";
                            width:100%;
                            height: 100%;
                            right: -80%;
                            background-image: url("images/contact_stamp.png");
                            background-size: contain;
                            background-repeat: no-repeat;
                        }
                        #overlay form a::before{
                            position: absolute;
                            z-index: -1;
                            content:"";
                            width:100%;
                            height: 100%;
                            left: -80%;
                            background-image: url("images/contact_waves.svg");
                            background-size: contain;
                            background-repeat: no-repeat;
                            background-position: center;
                        }
                    #overlay form p{
                        color: rgb(var(--primary-blue));
                        grid-column: 2;
                        margin: 0 auto 0 auto;
                        width: 100%;
                        text-align: center;
                        font-size: 12px;
                        line-height: 110%;
                        font-style: italic;
                        font-family: InterRegular, sans-serif;
                    }
                    #overlay form h5{
                        grid-column: span 2;
                        height: 0;
                        margin: 0;
                    }
                    #overlay form input,
                    #overlay form textarea{
                        font-size: 90%;
                        background-color: rgba(255, 255, 255, 0);
                        color: rgb(var(--primary-blue));
                        border: none;
                        border-bottom: 1px solid rgb(var(--primary-blue));
                        outline: none;
                        border-radius: 0px;
                        font-family: InterRegular, sans-serif;
                        cursor: none;
                        transition-property: background-color, border-color, scale, color;
                        transition-duration: 0.3s;
                        transition-delay: 0s, 0s, 0s, 0.3s;
                        transition-timing-function: cubic-bezier(0.34, 0.34, 0.02, 0.97);  
                    }
                    #overlay form input:hover,
                    #overlay form textarea:hover{
                        border-color:rgb(var(--light-blue));         
                    }
                        #overlay form input{
                            height: 35px;
                            grid-column: 2;
                            font-family: InterBold, sans-serif;
                        }
                            #overlay form input[type="submit"]{
                                grid-column: 2;
                                min-width: 40%;
                                margin: 0px auto 0 auto;
                                border-radius: 20px;
                                border-bottom: none !important;
                                color: rgb(var(--lightest-yellow));
                                background-color: rgb(var(--primary-blue));
                            }
                            #overlay form input[type="submit"]:hover,
                            #overlay form input[type="submit"]:focus{
                                background-color: rgb(var(--light-blue))
                            }
                            #overlay form input[type="submit"].response{
                                
                                background-color: rgba(0, 0, 0, 0);
                            }
                                #overlay form input[type="submit"].response.success{
                                    color: rgb(var(--primary-blue));
                                }
                                #overlay form input[type="submit"].response.failed{
                                    color: rgb(255, 121, 94);
                                }
                        #overlay form textarea{
                            padding: 13px;
                            grid-column: 1;
                            grid-row: 1 / span 5;
                            resize: none;
                            border: none;
                        }

                        #overlay form input::placeholder, 
                        #overlay form textarea::placeholder{
                            color: rgb(var(--primary-blue));
                            font-style: italic;
                            font-family: InterRegular, sans-serif;
                        }
                        /* Change the white to any color */
                        input:-webkit-autofill,
                        input:-webkit-autofill:hover, 
                        input:-webkit-autofill:focus, 
                        input:-webkit-autofill:active{
                            -webkit-box-shadow: 0 0 0 30px rgb(var(--lightest-yellow)) inset !important;
                        }
                        /*Change text in autofill textbox*/
                        input:-webkit-autofill{
                            -webkit-text-fill-color: rgb(var(--primary-blue)) !important;
                        }


            #overlay > *:focus{
                border: none;
                outline: none;
            }
            
            #overlay::after{
                z-index: 0;
                content: "";
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background-image: url("data:image/svg+xml,%3C!-- svg: first layer --%3E%3Csvg viewBox='0 0 250 250' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='4' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
                opacity: 0.1;
                pointer-events: none;
            }

    /* -------------------------- */
    /* CUSTOM CURSOR */
    /* -------------------------- */

        /* -------------------------- */
        /* MAIN CURSOR */
        /* -------------------------- */

            #cursor {
                width: 0px;
                height: 0px;
                position: fixed;
                z-index: 11;
                top: 0;
                left: 0;
                pointer-events: none;
                will-change: transform;
                transform: translate3d(calc(50vw - 50%), calc(110vh - 50%), 0);
                opacity: 0;
                transform-origin: 50%;
                transition-property: width, height, opacity;
                transition-duration: 1s;
                transition-timing-function: cubic-bezier(0.34, 0.34, 0.02, 0.97);
            }
                #cursor svg path.berry{
                    transition: fill 0.5s cubic-bezier(0.34, 0.34, 0.02, 0.97);
                    fill: rgba(var(--secondary-blue), 1);
                }
                #cursor svg path.leaves{
                    transition: fill 0.5s cubic-bezier(0.34, 0.34, 0.02, 0.97);
                    fill:rgba(var(--primary-blue), 1);
                }
            
            #cursor.hover {
                width: 40px !important; /* To override JS */
                height: 40px !important; /* To override JS */
            }
                #cursor.hover svg path:not(#pointer){
                    fill: rgba(var(--primary-blue), 0.2);
                }
                #cursor.hover svg path#pointer{
                    fill: rgb(var(--secondary-blue))
                }

    /* -------------------------- */
    /* BODY */
    /* -------------------------- */

        body {
            margin: 0px;
            /*cursor: url("images/hjortronpil.svg") 16 16, auto;*/
            cursor: none;
            overflow-x: hidden; 
            background-color: white;  
        }

        body form{
            display: none;
        }

    /* -------------------------- */
    /* VIDEO */
    /* -------------------------- */

        video::-webkit-media-controls-play-button,
        video::-webkit-media-controls-volume-slider-container,
        video::-webkit-media-controls-mute-button,
        video::-webkit-media-controls-timeline,
        video::-webkit-media-controls-fullscreen-button,
        video::-webkit-media-controls-volume-slider{
            cursor: none;
        }
        video::-webkit-media-controls-fullscreen-button{
            display: none;
        }
        video {
            clip-path: inset(0.1px 0.1px);
        }

    /* -------------------------- */
    /* IMAGE */
    /* -------------------------- */
        img{
            overflow: hidden;
            position: relative;
        }

    /* -------------------------- */
    /* LINKS/BUTTONS */
    /* -------------------------- */
        a,
        button{
            text-decoration: none;
            cursor: none;
            color: inherit;
        }

    /* -------------------------- */
    /* TEXT SETTINGS */
    /* -------------------------- */

        /* -------------------------- */
        /* HEADINGS */
        /* -------------------------- */

            /* Used for large title */ 
            h1 {
                font-family: BricolageGrotesque-SemiBold, sans-serif;
                font-size: 6vw;
            }
            /* Highlights sideheaders and large headings with background */
            h2 {
                font-family: BricolageGrotesque-SemiBold, sans-serif;
                font-size: 5vw;
            }

            /* Used for headers within text-blocks and case links*/
            h3 {
                font-family: InterBold, sans-serif;
                font-size: 2vw;
            }

            /* Used for summary sub-heading in header */
            h4 {
                font-family: BricolageGrotesque-ExtraLight, sans-serif;
                font-size: 1.3vw;
            }

            /* Used for sub-headings in My Experience */
            h5 {
                font-family: InterBold, sans-serif;
                font-size: 1.05vw;
                margin: 1% 0;
            }

        /* -------------------------- */
        /* PARAGRAPHS */
        /* -------------------------- */
        
            /* General Text */
            p {
                font-family: InterRegular, sans-serif;
                font-size: 1vw;
                line-height: 1.3vw;
                margin: 0%;
            }
            
            p b{
                font-family: InterBold, sans-serif;
            }

    /* -------------------------- */
    /* NAV SETTINGS */
    /* -------------------------- */

        /* -------------------------- */
        /* General Nav */
        /* -------------------------- */

            nav {
                display: flex;
                justify-content: space-between;
                position: fixed;
                top: 0.8vw;
                width: 80%;
                left: 50%;
                transform: translateX(-50%);
                max-width: 2400px;
                font-family: InterRegular, sans-serif;
                z-index: 10;
                pointer-events: none;
                opacity: 0;
                transition: opacity 2s 0.5s cubic-bezier(0.34, 0.34, 0.02, 0.97);;
            }
                nav div{
                    display: flex;
                    gap: 0.8vw;
                }
                nav div.contact_links{
                    margin-left: -0.5%;
                }
                nav .clickable{
                    font-size: 1.06vw;
                    pointer-events: auto;
                    background-color: #00000000;
                    border: none;
                    gap: 20px;
                }
                nav .clickable.active{
                    text-shadow: 0 0 0.8px, 0 0 0.8px;
                }
                    nav .clickable svg{
                        height: 1.8vw;
                        pointer-events: none;
                    }
                nav button.close{
                    margin-left: auto;
                    margin-top: -0.3%;
                }
                    nav button.close svg{
                        height: 0.8vw;
                    }
                a.home {
                    font-family: BricolageGrotesque-SemiBold, sans-serif;
                    font-size: 1.2vw;
                    position: absolute;
                    left: 50%;
                    translate: -50% 0;
                }

        /* -------------------------- */
        /* Primary and Secondary Nav */
        /* These are overridden case by case
        /* -------------------------- */

            nav.primary_nav .clickable,
            nav.secondary_nav .clickable:hover{
                color:rgb(var(--primary-blue));
                fill:rgb(var(--primary-blue));
            }

            nav.secondary_nav .clickable,
            nav.primary_nav .clickable:hover{
                color: rgb(var(--secondary-blue));
                fill: rgb(var(--secondary-blue));
            }

        /* -------------------------- */
        /* MOBILE MENU */
        /* -------------------------- */
            
            #mobile_menu {
                position: fixed;
                display: none;
                justify-content: space-between;
                align-items: center;
                top: auto;
                bottom: 2%;
                left: 50%;
                transform: translateX(-50%);
                width: 89%;
                padding: 8px 9px;
                z-index: 10;
                background-color: rgba(var(--primary-blue), 0.6);
                opacity: 1;
                backdrop-filter: blur(50px) brightness(0.8) contrast(180%) grayscale(20%) saturate(123%) sepia(23%);
                color:rgb(var(--primary-blue));
                color: white;
                border-radius: 100px;
                overflow: hidden;
                pointer-events: auto;
            }
                #mobile_menu::after{
                    content: "";
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    background-image: url("data:image/svg+xml,%3C!-- svg: first layer --%3E%3Csvg viewBox='0 0 250 250' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='4' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
                    opacity: 0.1;
                    pointer-events: none;
                }
                #mobile_menu a,
                #mobile_menu a.home {
                    text-align: center;
                    font-family: BricolageGrotesque-ExtraLight, sans-serif;
                    font-size: 113%;
                    border-radius: 100px;
                    background-color:rgba(var(--primary-blue), 0);
                    border-color: #00000000;
                    border-width: 14px 20px;
                    border-style: solid;
                    transition: background-color 0.2s ease-in-out;
                }
                    #mobile_menu a.home {
                        font-family: BricolageGrotesque-SemiBold, sans-serif; 
                        position: relative;
                        left: auto;
                        translate: none;
                    }
                    #mobile_menu a:hover {
                        background-color:rgba(var(--primary-blue), 1);
                    }
                

    /* -------------------------- */
    /* STAMP SETTINGS */
    /* -------------------------- */

        svg.stamp {
            position: absolute;
            transition: scale 400ms cubic-bezier(.47,1.64,.41,.8), opacity 200ms ease-in-out;
            z-index: 9;
        }
            svg.stamp:hover{
                scale: 1.1;
            }
        @-webkit-keyframes clockwise_rotation /* Safari and Chrome */ {
            from {
                -webkit-rotate: z 0deg;
                -o-rotate: z 0deg;
                rotate: z 0deg;
            }
            to {
                -webkit-rotate: z 360deg;
                -o-rotate: z 360deg;
                rotate: z 360deg;
            }
        }
        @keyframes clockwise_rotation {
            from {
                -ms-rotate: z 0deg;
                -moz-rotate: z 0deg;
                -webkit-rotate: z 0deg;
                -o-rotate: z 0deg;
                rotate: z 0deg;
            }
            to {
                -ms-rotate: z 360deg;
                -moz-rotate: z 360deg;
                -webkit-rotate: z 360deg;
                -o-rotate: z 360deg;
                rotate: z 360deg;
            }
        }
        @-webkit-keyframes c_clockwise_rotation /* Safari and Chrome */ {
            from {
                -webkit-rotate: z 0deg;
                -o-rotate: z 0deg;
                rotate: z 0deg;
            }
            to {
                -webkit-rotate: z 360deg;
                -o-rotate: z 360deg;
                rotate: z 360deg;
            }
        }
        @keyframes c_clockwise_rotation {
            from {
                -ms-rotate: z 360deg;
                -moz-rotate: z 360deg;
                -webkit-rotate: z 360deg;
                -o-rotate: z 360deg;
                rotate: z 360deg;
            }
            to {
                -ms-rotate: z 0deg;
                -moz-rotate: z 0deg;
                -webkit-rotate: z 0deg;
                -o-rotate: z 0deg;
                rotate: z 0deg;
            }
        }
        .clockwise_rotating {
            -webkit-animation: clockwise_rotation 20s linear infinite;
            -moz-animation: clockwise_rotation 20s linear infinite;
            -ms-animation: clockwise_rotation 20s linear infinite;
            -o-animation: clockwise_rotation 20s linear infinite;
            animation: clockwise_rotation 20s linear infinite;
            transform-origin: center center;
        }
        .c_clockwise_rotating {
            -webkit-animation: c_clockwise_rotation 20s linear infinite;
            -moz-animation: c_clockwise_rotation 20s linear infinite;
            -ms-animation: c_clockwise_rotation 20s linear infinite;
            -o-animation: c_clockwise_rotation 20s linear infinite;
            animation: c_clockwise_rotation 20s linear infinite;
            transform-origin: center center;
        } 

    /* -------------------------- */
    /* HEADER SETTINGS */
    /* -------------------------- */

        header {
            width: 100%;
            height: 100vh;
            max-height: 60vw;
            position: relative;
            z-index: 1;
            clip-path: polygon(0 0, 0 100.001%, 100% 100%, 100% 0); /*.001 extra to get rid of sub-pixel rendering glitch */
            -webkit-clip-path: polygon(0 0, 0 100.001%, 100% 100%, 100% 0); /*.001 extra to get rid of sub-pixel rendering glitch */
            overflow: hidden;
            background-color: rgb(var(--light-blue));
            display: flex;
            justify-content: center;
            background-size: 100%;
            background-repeat: no-repeat;
            background-position: top 0% center;
            background-attachment: fixed;
        }
            header svg.stamp{
                width: 400px;
                height: 400px;
                top: -60%;
                right: 10%;
                opacity: 0;
                transition: scale 400ms cubic-bezier(.47,1.64,.41,.8), opacity 0.5s ease-in-out; /* Different from regular stamp */
                transition-delay: 0s, 2.5s;
                rotate: 0 0 1 20deg;
            }
                header svg.stamp .cls-1, header svg.stamp .cls-3 {
                    font-family: BricolageGrotesque-SemiBold;
                    font-weight: 600;
                }
                header svg.stamp .hand{
                    transition: translate 400ms cubic-bezier(.47,1.64,.41,.8);
                }
                header svg.stamp .star{
                    transition: scale 400ms cubic-bezier(.47,1.64,.41,.8), opacity 0.2s ease-in-out;
                }
                    header svg.stamp:hover .left_hand{
                        translate: 4% 0;
                    }
                    header svg.stamp:hover .right_hand{
                        translate: -4% 0;
                    }
                    header svg.stamp:hover .star{
                        scale: 1.0;
                        opacity: 0;
                    }
            header video {
                width: 100%;
                min-height: 100%;
                top: 0px;
                position: fixed;
                object-fit: cover;
                pointer-events: none;
                z-index: 1;
                opacity: 0;
                transition: opacity 0.5s ease-in-out;
            }  

            header canvas {
                width: 100%;
                min-height: 100%;
                position: fixed;
                z-index: 0;
                transition: opacity 0.3s ease-in-out;
            }
            header #summary {
                text-align: center;
                position: fixed;
                top: 400px;
                left: 50%;
                translate: -50% -50%;
                z-index: 3;
                width: 80%;
                max-width: 2400px;
            }
                header #summary h1 {
                    margin: 0;
                    color:rgb(var(--primary-blue));
                    opacity: 0;
                    transition: opacity 0.5s ease-in-out;
                }
                
                header #summary h4 {
                    white-space: pre-line;
                    color:rgb(var(--primary-blue));
                    opacity: 0;
                    transition: opacity 0.5s ease-in-out;
                }

    /* ------------------------------------------------ */
    /* MAIN SETTINGS */
    /* Main is the outermost wrapper for the site content */
    /* On the frontpage, the main ends before the About section */
    /* In a case, it ends before the footer */
    /* ------------------------------------------------ */

        main {
            max-width: 1530px;
            width: 80%;
            margin: auto;
            position: relative;
            clip-path: polygon(-1000% 0, -1000% 100%, 1000% 100%, 1000% 0);
            -webkit-clip-path: polygon(-1000% 0, -1000% 100%, 1000% 100%, 1000% 0);
        }

/* ------------------------------------------------ */
/* CATEGORIES AND CASE GALLERY CSS */
/* ------------------------------------------------ */
    .categories{
        position: relative;
        min-height: 300px;
    }
    /* -------------------------- */
    /* HEADING ABOVE CASE GALLERY */
    /* -------------------------- */
        #cases {
            position: relative;
            margin: 0 0 0 0;
            padding: 5% 0 3% 0;
            text-align: center;
            color: rgb(var(--primary-blue));
        }

    /* -------------------------- */
    /* CATEGORY MENU */
    /* -------------------------- */

        #categories_menu {
            position: relative;
            display: flex;
            justify-content: space-between;
            margin: 0% auto 3% auto;
            z-index: 2;
            width: 50%;
            text-align: center;
        }

            #categories_menu a {
                border: none;
                background-color: #00000000;
                font-family: InterRegular, sans-serif;
                font-size: 1.06vw;
                color: rgb(var(--secondary-blue));
                border: 0px solid black;
                display: inline-block;
            }
                #categories_menu a::before,
                #categories_menu a::after{
                    content: "-";
                    position: absolute;
                    overflow: hidden;
                    width: 0px;
                    transition-property: width, margin-left;
                    transition-duration: 0.1s;
                    transition-timing-function: ease-in-out;
                }

            #categories_menu a:hover {
                text-shadow: 0 0 1px rgb(var(--secondary-blue)), 0 0 1px rgb(var(--secondary-blue));
            }

            #categories_menu a.active_button {
                color:rgb(var(--primary-blue));
                text-shadow: 0 0 1px rgb(var(--primary-blue)), 0 0 1px rgb(var(--primary-blue));
            }
                #categories_menu a.active_button::after,
                #categories_menu a.active_button::before{
                    width: 10px;
                }
                #categories_menu a.active_button::before {
                    margin-left: -1.2%;
                }


    /* -------------------------- */
    /* CONTENT BLOCK PER CATEGORY */
    /* -------------------------- */

        .categories .category_content {
            position: absolute;
            display: grid; /*Using display:none and switching causes forced reload of images */
            grid-template-columns: repeat(4, 1fr);
            grid-column-gap: 1vw;
            grid-row-gap: 2vw;
            width: 100%;
            margin: auto;
            height: auto;
            /*margin-bottom: 1vw; causes issues with clip path for navs*/
            z-index: 1;
            opacity: 0;
            transition-property: opacity, visibility;
            transition-duration: 0.5s, 0s;
            transition-delay: 0s, 0.5s;
            transition-timing-function: cubic-bezier(0.34, 0.34, 0.02, 0.97);
            top: 0;
            left: 50%;
            transform: translateX(-50%);
            visibility: hidden;
        }
        .categories .category_content.active_category,
        .categories.show_all .category_content{
            transition-delay: 0s, 0s;
            left: 0%;
            transform: translateX(0%);
            padding-bottom: 50px;
            z-index: 2;
            opacity: 1;
            position: relative;
            visibility: visible;
        }

    /* -------------------------- */
    /* CASE LINK SQUARES */
    /* -------------------------- */

        .categories .category_content a.categories_case{
            position: relative;
            -webkit-tap-highlight-color: transparent;
            border-radius: 0px; 
            transform: rotate(0.01deg); /*Forces smoother rendering*/
        }
            .categories .category_content a.categories_case::after{
                position: absolute;
                content: "";
                top: 0;
                width: 100%;
                height: 100%;
                transform: scale3d(1.05, 1.04, 1);
                background-color: rgba(0, 0, 0, 0);
                transition-property: background-color, transform;
                transition-duration: 0.6s;
                transition-timing-function: cubic-bezier(0.34, 0.34, 0.02, 0.97);
                z-index: 0;
            }
            .categories .category_content a.categories_case.coming_soon::before{
                position: absolute;
                content: "Coming Soon";
                font-size: 1.2vw;
                text-align: center;
                line-height: 300px;
                font-family: InterBold, sans-serif;
                top: 0;
                width: 100%;
                color: rgba(255, 255, 255, 0);
                aspect-ratio: 1;
                background-color: rgba(0, 0, 0, 0);
                transition-property: background-color, color;
                transition-duration: 0.6s;
                transition-timing-function: cubic-bezier(0.34, 0.34, 0.02, 0.97);
                z-index: 10;
            }
            .categories .category_content a.categories_case .card_wrapper {
                position: relative;
                z-index: 1;
                width: 100%;
                aspect-ratio: 1;
                overflow: hidden;
            }

                .categories .category_content a.categories_case .card_wrapper video,
                .categories .category_content a.categories_case .card_wrapper img {
                    width: 100%;
                    height: 100%;
                    transform: scale3d(1.04, 1.04, 1);
                    object-fit: cover;
                    transition-property: transform;
                    transition-duration: 0.6s;
                    transition-timing-function: cubic-bezier(0.34, 0.34, 0.02, 0.97);
                }

            .categories .category_content a.categories_case h3,
            .categories .category_content a.categories_case p {
                text-align: left;
                color: rgb(var(--primary-blue));
                position: relative;
                z-index: 1;
                transition: color 0.6s cubic-bezier(0.34, 0.34, 0.02, 0.97);
            }

                .categories .category_content a.categories_case h3 {
                    font-size: 1.2vw;
                    margin-top: 4%;
                    margin-bottom: 2%;
                }

                .categories .category_content a.categories_case p {
                    color: rgb(var(--secondary-blue));
                    font-size: 0.9vw;
                    line-height: 1.7vw;
                    margin: 0%;
                }

        .categories .category_content a.categories_case:hover::after,
        .categories .category_content a.categories_case:active::after{
            transform: scale3d(1.08, 1.06, 1);
            background-color: rgba(var(--primary-blue), 1);
        }
        .categories .category_content a.categories_case:hover::before{
        /*,
        .categories .category_content a.categories_case:active::before*/
            background-color: rgba(var(--primary-blue), 0.85);
            color: rgba(255, 255, 255, 1);
        }
        .categories .category_content a.categories_case:hover h3
        /*,
        .categories .category_content a.categories_case:active h3*/{
            color:white;
        }
        .categories .category_content a.categories_case:hover p
        /*,
        .categories .category_content a.categories_case:active p*/{
            color: rgb(var(--light-blue));
        }
        .categories .category_content a.categories_case:hover .card_wrapper video,
        .categories .category_content a.categories_case:hover .card_wrapper img
        /*,
        .categories .category_content a.categories_case:active .card_wrapper video,
        .categories .category_content a.categories_case:active .card_wrapper img*/{
            transform: scale3d(1.01, 1.01, 1);
        }
    
        .more_cases {
            min-height: 2.4vw;
            grid-column: span 4;
            margin: 2% 0 0% 0;
            text-align: center;
            padding-right: 20px;
            color:rgb(var(--secondary-blue));
        }
            .more_cases a::after {
                content: "->";
                position: absolute;
                transition: padding-left 0.2s ease-in-out, color 0.2s ease-in-out;
            }

            .more_cases a:hover::after{
                color: rgb(var(--secondary-blue));
                padding-left: 20px;
            }

/* ------------------------------------------------ */
/* GENERAL FADE TRANSITION */
/* ------------------------------------------------ */

    .fade_in,
    .fade_in_children > *{
        opacity: 0;
        translate: 0 50px;
        transition: opacity 0.5s ease-in-out, translate 0.5s ease-in-out;
    }

/* ------------------------------------------------ */
/* SKETCHBOOK */
/* ------------------------------------------------ */


    #book {
        grid-column: span 4;
        position: relative;
        margin: 6vw auto 17.1vw auto;
        width: 50%;
        aspect-ratio: 10/8;
        perspective: 1800px;
        transform-style: preserve-3d;
        translate: -25% 0%;
        rotate: 0 1 0 20deg;
        scale: 1.6;
        transition: rotate 1.5s 0.5s ease-in-out, translate 1s 0.5s ease-in-out, scale 200ms 200ms cubic-bezier(.47,1.64,.41,.8);
        will-change: transform;
    }
    #book.open {
        rotate: 0 1 0 0deg;
        translate: 0% 0%;
        scale: 1;
    }
        #book .page,
        #book .cover,
        #book .inner_cover{
            position: absolute;
            right: -5px;
            width: 50%;
            height: 100%;
            z-index: 10;
            background-color: #faf5f0;
            transform-style: preserve-3d;
            transform-origin: left center;
            background-size: 100%;
            will-change: transform;
            border-radius: 0px 5px 5px 0px;
            background-image: linear-gradient(to right, #ccc0b4dd 0%, #faf5f0dd 50%), url("sketchbook/paper_texture.avif");
            box-shadow: inset -1px -1px 2px rgba(50, 50, 50, 0.1), inset -1px 0px 1px rgba(150, 150, 150, 0.2);
            outline: 1px solid transparent;
        }
            #book .page:after {
                background-image:  linear-gradient(#ccc0b420 10%, #e0d3c7dd 90%, #ccc0b420 100%);
                bottom: 0;
                content: '';
                right: -1px;
                position: absolute;
                top: 10px;
                transform: rotateY(90deg);
                transform-origin: center center;
                width: 1px;
                height: calc(100% - 20px);
                box-shadow: 0px 0px 1px 0px #ccc0b444;
            }
                #book .page * {
                    -webkit-backface-visibility: hidden;
                    backface-visibility: hidden;
                }
                    #book .page .front * {
                        transform: rotateX(0deg); /* Fix for backface visibility in MacOS firefox */
                    }
                #book .page > * {
                    position: absolute;
                    width: 100%;
                    height: 100%;
                }
                #book .page .back {
                    rotate: 0 1 0 180deg;
                }
            #book .cover{
                outline: 1px solid #c3ceff00;
                transition: outline 0.1s ease-in-out;
            }
                #book .cover.left {
                    left: -9px;
                    transform-origin: right center;
                    transform: rotateY(150deg) scale(1.04) rotateZ(0.1deg);
                    background-image:  linear-gradient(to left, #0f0f0f 0%, #2e2e2e 100%);
                    box-shadow: inset 6px 0px 1px rgb(17, 17, 17) !important;
                    border-radius: 6px 4px 4px 6px;
                    -webkit-backface-visibility: visible; 
                    backface-visibility: visible;
                    transition: transform 1.5s 0.5s ease-in-out, border-radius 0s 0.8s ease, outline 0.1s ease-in-out;
                }
                    #book.open .cover.left{
                        left: -8px;
                        transform: rotateY(12deg) scale(1.04) rotateZ(0.1deg);
                    }

                #book .cover.right {
                    right: -8px;
                    transform-origin: left center;
                    transform: rotateY(-12deg) scale(1.04) rotateZ(0.1deg);
                    background-image:  linear-gradient(to right, #0f0f0f 0%, #2e2e2e 100%);
                    box-shadow: inset -6px 0px 1px rgb(17, 17, 17) !important;
                    border-radius: 4px 6px 6px 4px;
                }
                #book .inner_cover{
                    box-shadow: none !important;
                }
                    #book .inner_cover.left{
                        left:-6px;
                        transform-origin: right center;
                        transform: rotateY(150.1deg) rotateZ(0.1deg);
                        transition: transform 1.5s 0.5s ease-in-out;
                        border-radius: 5px 0px 0px 5px;
                        background-image: linear-gradient(to left, #ccc0b4dd 0%, #faf5f0dd 50%), url("sketchbook/paper_texture.avif");
                    }
                        #book.open .inner_cover.left{
                            transform: rotateY(12.1deg) rotateZ(0.1deg);
                        }
                    #book .inner_cover.right{
                        right: -6px;
                        transform-origin: left center;
                        transform: rotateY(-12.1deg) rotateZ(0.1deg);
                    }

                #book .page h3,
                #book .inner_cover h3{
                    position: relative;
                    width: 100%;
                    font-family: 'MyFontRegular', sans-serif;
                    text-align: center;
                    margin-top: 5%;
                    margin-bottom: 0;
                    color: #141412CC;
                    font-weight:normal;
                    transform: rotateX(0.01deg) translateZ(1px);
                }
                    #book .inner_cover h3{
                        margin-top: 60%;
                    }
                #book .page img{
                    position: relative;
                    margin-top: 12.5%;
                    left: 12.5%;
                    width: 75%;
                    filter: blur(0px);
                    z-index: 1;
                }
                #book .page img.edge_fuzz{
                    position: absolute;
                    scale: 1.008;
                    filter: blur(1px);
                    z-index: 0;
                }
        
        #book .spine{
            position: absolute;
            left: 50%;
            transform: translateX(-50%) scale(1.04) rotateY(0deg) translateZ(0.1px);
            border-radius: 4px;
            width:18px;
            height: 100%;
            background-color: rgb(22, 22, 22);
            box-shadow: 0 0 1px 0 black;
            outline: 1px solid #c3ceff00;
            transition: outline 0.1s ease-in-out;
        }
        #book .innerspine{
            position: absolute;
            left: 50%;
            transform: translateX(-50%) translateZ(0.1px);
            border-radius: 2px;
            width:15px;
            height: 100%;
            background-image:  linear-gradient(90deg,#ccc0b4ee 20%,#c4b7abee 50%, #ccc0b4ee 80%), url("sketchbook/paper_texture.avif");
        }
        
        #book .cover::after,
        #book .spine::after{
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: url("data:image/svg+xml,%3C!-- svg: first layer --%3E%3Csvg viewBox='0 0 250 250' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='4' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
            opacity: 0.2;
            pointer-events: none;
        }

        /*#book:hover .cover,
        #book:hover .spine{
            outline: 10px solid #c3ceff;
        }*/

        #book svg.stamp{
            opacity: 0;
            top: 75%;
            right: -6%;
            width: 150px;
            height: 150px;
            pointer-events: none;
            translate: 0 0 340px;
        }
        #book:hover svg.stamp{
            opacity: 1;
        }

/* ------------------------------------------------ */
/* ABOUT ME */
/* ------------------------------------------------ */

    #about{
        width: 100%;
        padding: 5vw 0;
        overflow: hidden;
        position: relative;
        clip-path: polygon(0 0, 0 100.001%, 100% 100%, 100% -0.001%); /*.001 extra to get rid of sub-pixel rendering glitch */
        -webkit-clip-path: polygon(0 0, 0 100.001%, 100% 100%, 100% -0.001%); /*.001 extra to get rid of sub-pixel rendering glitch */
        background-color: #c9d5fc;
    }
        #about #polaroids:hover svg.stamp{ 
            scale: 1.1;
        }
        #about #polaroids > *{
            transition: scale 400ms cubic-bezier(.47,1.64,.41,.8), opacity 200ms ease-in-out;
        }
            #about #polaroids.disabled > *{
                scale: 0;
                pointer-events: none;
                opacity: 0;
            }
        #about #polaroids:hover .polaroid#left{
            transform: rotateZ(-15deg);
        }
        #about #polaroids:hover .polaroid#right{
            transform: rotateZ(35deg);
        }
            #about #polaroids .polaroid{
                position: absolute;
                border-radius: 5px;
                width: 12vw;
                max-width: 230px;
                aspect-ratio: 5/6;
                transition: transform 400ms cubic-bezier(.47,1.64,.41,.8);
                transform-origin: center 150%;
                right: 10%;
                top: -5%;
            }
                #about #polaroids .polaroid#left {
                    transform: rotateZ(-10deg);
                }
                #about #polaroids .polaroid#right {
                    transform: rotateZ(30deg);
                }
            #about #polaroids svg.stamp{
                top: 52%;
                right: 10%;
                width: 10vw;
                height: 10vw;
                max-width: 200px;
                max-height: 200px;
                transform: rotateZ(20deg);
            }
                /*
                #about #polaroids svg.stamp:before,
                #about #polaroids svg.stamp:after{
                    content: "";
                    width: 200px;
                    aspect-ratio: 5/6;
                    transition: transform 400ms cubic-bezier(.47,1.64,.41,.8);
                    transform-origin: center 150%;
                    position: absolute;
                    border-radius: 5px;
                    background-color: red   ;
                }*/
        #about #about_content{
            position: relative;
            display: grid; /*Using display:none and switching causes forced reload of images */
            grid-template-columns: repeat(2, 1fr);
            grid-column-gap: 3.5vw;
            grid-row-gap: 2vw;
            width: 80%;
            max-width: 1530px;
            margin: auto;
            height: auto;
            color: rgb(var(--primary-blue));
        }
            #about #about_content div.left{
                display: flex;
                flex-direction: column;
                justify-content: space-between;
            }

            #about #about_content h5, #about #about_content p{
                display: inline;
            }
            #about #about_content h4 {
                line-height: 1.8vw;
                margin-bottom: 0;
                font-size: 1.25vw;
            }
            #about #about_content h5.my_experience{
                display: none;
                max-height: 100px;
                transition-property: opacity, max-height;
                transition-duration: 0.6s;
                transition-timing-function: cubic-bezier(0.34, 0.34, 0.02, 0.97);
                margin-bottom: 0;
            }
                #about #about_content h5.my_experience.disabled{
                    opacity: 0;
                    max-height: 0;   
                }
            #about #about_content .hidden_about{
                max-height: 0px;
                opacity: 0;
                transition-property: opacity, max-height;
                transition-duration: 0.6s;
                transition-timing-function: cubic-bezier(0.34, 0.34, 0.02, 0.97);
            }
                #about #about_content div.left .hidden_about{
                    bottom: 0;
                    transition-delay: 0.15s, 0s; /* Ugly fix */
                }
                #about #about_content.active .hidden_about{
                    max-height: 1000px;
                    opacity: 1;
                }
                #about #about_content .hidden_about > span{
                    display: flex;
                    justify-content: space-between;
                }
        #about canvas {
            top: 0px;
            width: 100%;
            min-height: 110%;
            position: fixed;
            z-index: 0;
        }

/* ------------------------------------------------ */
/* FOOTER */
/* ------------------------------------------------ */

    footer {
        position: relative;
        padding-bottom: 100px;
        width: 100%;
    }

        footer svg#cloudberry{
            display: block;
            width: 4%;
            max-width: 77px;
            margin: 0 auto 2% auto;
            padding-top: 3%;
        }
            footer svg#cloudberry *,
            footer .socials .icon:hover svg *{
                fill:rgb(var(--secondary-blue));
            }

            footer svg#cloudberry *.leaves,
            footer .socials .icon svg *{
                fill:rgb(var(--primary-blue));
            }

        footer p {
            color:rgb(var(--primary-blue));
            font-size: 0.9vw;
            text-align: center;
        }
        footer .socials{
            width: 10%;
            max-width: 192px;
            display: flex;
            margin: 0 auto 2% auto;
            justify-content: space-between;
            position: relative;
        }

            footer .socials .icon svg{
                height: 1.2vw;
                width: 1.2vw;
            }
            
        footer p#signature span{
            font-family: BricolageGrotesque-SemiBold, sans-serif;
        }

/* ------------------------------------------------ */
/* FRONTPAGE */
/* ------------------------------------------------ */

    body.frontpage header #summary {
        text-align: left;
        top: auto;
        bottom: 50px;
        translate: -50% -10%;
    }

        body.frontpage header #summary h1 {
            font-size: 10vw;
            line-height: 8vw;
            translate: 200% 0;
            margin-left: -1%;
            transition: opacity 3.2s cubic-bezier(0.34, 0.34, 0.02, 0.97), translate 2s cubic-bezier(.4,.64,.48,1.01);
        }

        body.frontpage header #summary h4 {
            width: 57%;
            max-width: 876px;
            line-height: 2vw;
            font-size: 1.51vw;
            translate: 400% 0;
            transition: opacity 3.2s 0.8s cubic-bezier(0.34, 0.34, 0.02, 0.97), translate 2s 0.8s cubic-bezier(.4,.64,.48,1.01);
        }

/* ------------------------------------------------ */
/* ALL_CASES PAGE*/
/* ------------------------------------------------ */

        body.all_cases header {
            background-color: #ffffff;
            height: 28vw;
            max-height:43vh;
        }

            body.all_cases header #summary {
                position: absolute;
                top: auto;
                bottom: 0;
            }
                body.all_cases header #summary h1,
                body.all_cases header #summary h4,
                body.all_cases nav.primary_nav .clickable,
                body.all_cases nav.secondary_nav .clickable{
                    color:rgb(var(--primary-blue));
                    fill:rgb(var(--primary-blue));
                }
                    body.all_cases header #summary h1{
                        margin-top: 0.67em; /* Standard H1 override */
                    }

                body.all_cases nav.primary_nav .clickable:hover,
                body.all_cases nav.secondary_nav .clickable:hover{
                    color:rgb(var(--secondary-blue));
                    fill:rgb(var(--secondary-blue));
                }

        body.all_cases main .categories {
            padding-top: 5%;
        }
            body.all_cases main .categories .category_content{
                pointer-events: none;
                opacity: 0.3;
                transition: opacity 0.2s ease-in-out;
            }
            body.all_cases main .categories .category_content.active{
                pointer-events: auto;
                opacity: 1;
                transition: opacity 0.2s ease-in-out;
            }
                body.all_cases main .categories .category_content .year_label_lane{
                    position: absolute;
                    width: 10%;
                    height: 100%;
                }
                    body.all_cases main .categories .category_content .year_label_lane.left{
                        margin-left: -10%;
                    }
                    body.all_cases main .categories .category_content .year_label_lane.right{
                        right: -10%;
                    }
                        body.all_cases main .categories .category_content .year_label_lane h2.year_label{
                            top: 40%;
                            position: sticky;
                            display: inline-block;
                            font-size: 5.1vw;
                            transition: color 0.1s ease-in-out;
                            margin: 0;
                            color:rgb(var(--primary-blue));
                            font-variant-numeric: tabular-nums;
                            writing-mode: vertical-rl;
                            width: 100%;
                        }
                            body.all_cases main .categories .category_content .year_label_lane.right h2.year_label {
                                padding-bottom: 17%;
                                margin-top: -2%;
                            }
                            body.all_cases main .categories .category_content .year_label_lane.left h2.year_label{
                                transform: scale(-1);
                                padding-top: 17%;
                            }


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


    .categories .category_content {
        /*margin-bottom: 20px; causes issues with clip path for navs*/
        grid-column-gap: 20px;
        grid-row-gap: 40px;
    }

    p {
        font-size: 120% !important;
        line-height: 130% !important;
    }
        .categories .category_content a.categories_case p{
            font-size: 110% !important;
            line-height: 180% !important;
        }
        #overlay form p{
            font-size: 12px !important;
            line-height: 110% !important;
        }

    p.extra_small {
        font-size: 96%!important;
        line-height: 160% !important;
    }

    h1 {
        font-size: 720%;
    }
        body.frontpage header #summary h1 {
            font-size: 1200%;
            line-height: 80%;
        }

    h2 {
        font-size: 600%;
    }

    h3{
        font-size: 240%;
    }
    .categories .category_content a.categories_case h3,
    .categories .category_content a.categories_case.coming_soon::before{
        font-size: 145%;
    }
    .more_cases {
        min-height: 46px;
    }

    h4 {
        font-size: 155%;
    }
        #about #about_content h4 {
            line-height: 140%;
            font-size: 150%;
        }

    h5 {
        font-size: 128%;
        margin: 1.2% 0;
    }
    body.frontpage header #summary h1{
        margin-left: -15px;
    }

    body.frontpage header #summary h4 {
        line-height: 130%;
        font-size: 180%;
    }

    #categories_menu a {
        font-size: 127%;
    }

    nav .clickable {
        font-size: 126%;
    }

    nav .clickable svg{
        height: 34px;
    }

    nav a.home {
        font-size: 144%;
    }

    body.all_cases main .categories .category_content h2.year_label {
        font-size: 612% !important;
    }

    #about{
        padding: 96px 0;
    }

    footer p {
        font-size: 110% !important;
    }
    footer .socials .icon svg{
        height: 23px;
        width: 23px;
    }
    footer svg#cloudberry{
        margin: 0 auto 38px auto;
        padding-top: 58px;
    }
    footer .socials {
        margin: 0px auto 38px auto;
    }
    #book{
        margin: 115px auto 328px auto;
    }
    
}

@media only screen and (max-width : 1440px) {
    .categories .category_content {
        grid-template-columns: repeat(3, 1fr);
        grid-column-gap: 2vw;
        grid-row-gap: 4vw;
        /*margin-bottom: 2vw; causes issues with clip path for navs*/
    }
        body.frontpage .categories .category_content a.categories_case:nth-of-type(7),
        body.frontpage .categories .category_content a.categories_case:nth-of-type(8){
            display: none;
        }
    .categories .category_content a.categories_case h3 {
        font-size: 1.8vw;
        margin: 2% 0;
    }
    .categories .category_content a.categories_case.coming_soon::before{
        font-size: 3vw;
    }

    .categories .category_content a.categories_case p {
        font-size: 1.2vw;
    }
    .more_cases,
    #book{
        grid-column: span 3;
    }
        #book{
            width: 60%;
            margin: 11vw auto 23vw auto;
        }
}
@media only screen and (max-width : 1024px) {

    nav{
        display: none;
    }
    #mobile_menu{
        display: flex;
    }
    #overlay form{
        grid-template-columns: repeat(1, 1fr);
        padding: 50px 50px 30px 50px;
    }

        #overlay form h3,
        #overlay form p,
        #overlay form h5,
        #overlay form input,
        #overlay form input[type="submit"]{
            grid-column: 1;
        }
            #overlay form h3{
                font-size: 120%;
            }
        #overlay form textarea{
            grid-column: 1;
            grid-row:auto;
            min-height: 100px;
            padding: 5px;
        }
        #overlay form a,
        #overlay form::after{
            display: none;
        }

    main{
        width: 550px !important;
        margin: auto !important;
    }

    header {
        background-size: cover !important;
        background-attachment: scroll !important;
        min-height: 300px !important;
        margin: auto;
    }   
        /*
        body.frontpage header{
            min-height: 530px !important;
        }*/
        body.all_cases header{
            min-height: 200px !important;
        }

    body.all_cases main .categories .category_content .year_label_lane{
            position: relative;
            width: 100%;
        }
            body.all_cases main .categories .category_content .year_label_lane.left{
                display: none;
            }
            body.all_cases main .categories .category_content .year_label_lane.right{
                right: auto;
            }
        body.all_cases main .categories .category_content .year_label_lane h2.year_label{
            top: auto;
            position: relative;
            font-size: 300%;
            writing-mode: horizontal-tb;
            text-align: center;
        }
            body.all_cases main .categories .category_content .year_label_lane.right h2.year_label {
                padding-bottom: 20px;
                padding-top: 50px;
                color:rgb(var(--primary-blue)) !important;
            }

    body.all_cases main .categories .category_content{
        opacity: 1 !important;
        pointer-events: auto !important;
    }

    #cases {
        color:rgb(var(--primary-blue)) !important;
    }

    #categories_menu {
        flex-wrap: wrap;
        column-gap: 10px;
        width: 85%;
        margin: 0 auto 5% auto;
    }

    #categories_menu a {
        border-radius: 20px;
        margin: 0;
        padding: 2% 3% 2% 2.5%;
        font-size: 100% !important;
        color: rgb(var(--primary-blue));
        flex-grow: 2;
        margin: 10px auto 0 auto;
        background-color: rgba(var(--primary-blue), 0.3);
    }

    #categories_menu a:hover {
        background-color:rgba(var(--secondary-blue), 0.18);
        text-decoration-line: none !important;
        text-shadow:none !important;
    }

    #categories_menu a.active_button {
        color: #ffffff;
        background-color:rgb(var(--primary-blue));
    }
        #categories_menu a.active_button::before,
        #categories_menu a.active_button::after {
            content: "";
        }
    .categories .category_content {
        width: 85%;
        grid-template-columns: 100%;
        grid-row-gap: 15vw;
    }
        .categories .category_content#sketchbook_content {
            display: none;
        }
        #categories_menu a#sketchbook_button {
            display: none;
        }
    /*
    .categories.show_all .category_content{
        margin-bottom: 10px; causes issues with clip path for navs
    }*/

    .categories .category_content a.categories_case {
        display: block !important; /*Important to take precedence over JS */
        width: 100%;
        margin: 1.25% 0 !important;
   
    }
        /*
        .categories .category_content a.categories_case:hover::after,
        .categories .category_content a.categories_case:hover::before{
            display: none;
        }*/
        /*.categories .category_content a.categories_case:hover h3,
        .categories .category_content a.categories_case:hover p{
            color: rgb(var(--primary-blue));
        }*/
        .categories .category_content a.categories_case:hover .card_wrapper video,
        .categories .category_content a.categories_case:hover .card_wrapper img{
            transform: scale3d(1.04, 1.04, 1);
        }
        .categories .category_content a.categories_case p {
            font-size: 110%;
            line-height: 160%;
            text-align: center;
        }

        .categories .category_content a.categories_case h3 {
            font-size: 180%;
            margin: 5% 0;
            text-align: center;
        }
        .categories .category_content a.categories_case.coming_soon::before{
            font-size: 180%;
        }

    p {
        font-size: 100%;
        line-height: 135%;
        margin: 0%;
    }

    p.extra_small {
        font-size: 80%;
        margin: 0.8% 0 0.2% 0;
    }

    h2 {
        font-size: 170%;
    }

    h3{
        font-size: 170%;
    }

    h4 {
        font-size: 100%;
    }
        #about #about_content h4 {
            line-height: 150%;
            font-size: 100%;
        }
    
    h5 {
        font-size: 100%;
        margin: 1.2% 0;
    }

    body header #summary{
        position: absolute;
    }

    body.frontpage header #summary h4{
        width: auto;
        max-width: 480px;
        line-height: 120%;
        font-size: 100%;
    }

    #categories_menu a {
        font-size: 170%;
    }
    #about{
        padding: 10px 0 50px 0;
    }
        #about #polaroids{
            display: none;
        }
        #about #about_content{
                grid-template-columns: repeat(1, 1fr);
                grid-column-gap: 0;
        }
            #about #about_content h5.my_experience{
                display: block;
            }
            /*#about #about_content .hidden_about{
                max-height: 1000px;
                opacity: 1;
            }*/
                #about #about_content .hidden_about > span{
                    display: block;
                }
                    #about #about_content .hidden_about > span .date{
                        display: block;
                    }
    footer svg#cloudberry{
        width: 55px;
        margin: 0 auto 7% auto;
        padding-top: 7%;
    }
    footer .socials{
        width: 133px;
        margin: 0 auto 7% auto;
    }

    footer p {
        font-size: 100% !important;
        padding-bottom: 20px;;
    }

    footer .socials .icon svg{
        height: 20px;
        width: 20px;
    }

    a,
    button {
        cursor: url("images/hjortronpil_hover.svg") 15 17, pointer !important;
    }

    body {
        cursor: url("images/hjortronpil.svg") 15 17, auto;
    }

    #cursor{
        display: none;
    }

    #book{
        width: 90%;
        margin: 80px auto 80px auto;
        grid-column: span 1;
    }
    .more_cases{
        grid-column: span 1;
    }
}
@media only screen and (max-width : 720px) {
        body.frontpage header #summary h1 {
            font-size: 450%;
            line-height: 80%;
        }

}
@media only screen and (max-width : 550px) {
    body,
    main,
    #about {
        width: 100% !important;
    }
    h1 {
        font-size: 205%;
    }
    header #summary {
        width: 85%;
    }
        body.frontpage header #summary h1{
            margin-left: -1.6%;
        }
}

@media only screen and (max-width : 480px) {
    h2{
        font-size: 250%;
    }
}