@font-face {
    font-family: 'Aeonik-Regular';
    src: url('https://sebastianreed.xyz/font/Aeonik-Regular.woff2') format('woff2'),
        url('https://sebastianreed.xyz/font/Aeonik-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

*, h1, h2, h3, h4, h5, h6 {
    margin: 0;
    padding: 0;
}




/*         BASE UNITS - ALL PARAMETERS IS SET HERE         */

:root {



        /*          COLOUR SCHEME           */
        --light-bg: #EDE1D3;
        --light-contrast: #334229;
        --light-accent: #7C8C72;
        --dark-bg: #1C1E26;
        --dark-contrast: #BDC4DF;
        --dark-accent: #3C4260;
        --background: var(--light-bg);
        --foreground: var(--light-contrast);
        --accent: var(--light-accent);



        /*          UNITS           */
        --baseunit: 8px;
        --unit: var(--baseunit);
        --tight: calc(var(--unit) * 0.5); /* mini gap */
        --air: calc(var(--unit) * 2);    /* between elements */
        --stratosphere: calc(var(--unit) * 3);    /* between elements */
        --space: calc(var(--unit) * 4);     /* general distance */
        --box-space: calc(var(--unit) * 8);     /* section whitespace */
        --getouttheway: calc(var(--f_m) * -1);



        /*          ANIMATIONS           */
        --ani-f: 0.1s;      /* flash */
        --ani-s:  0.3s;     /* short */
        --ani-m: 0.6s;   /* medium */
        --ani-l: 2s;    /* long */
        --easing: ease-in-out;



        /*          TYPOGRAPHY           */
        --f: 'Aeonik-Regular', sans-serif;
        --f_weight: 400;
        --fontstyle: normal;
        --f_s: 20px;
        --f_m: 30px;
        --f_l: 40px;
        --f_lh_s: calc(--f_s * 1.2);
        --f_lh_m: calc(--f_m * 1.2);
        --f_lh_l: calc(--f_l * 1.2);

}



/*  NAV */
#nav {
    position: fixed;
    bottom: calc(var(--space) - var(--air));
    right: calc(var(--space) - var(--air));
    z-index: 100;
}

#burger {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--unit);
    z-index: 99;
    animation: burger-load var(--ani-m) var(--easing) forwards;
}


/*          DARK MODE           */

.darkmode {
    --background: var(--dark-bg);
    --foreground: var(--dark-contrast);
    --accent: var(--dark-accent);
} 


        /*         LUMIN SWITCH         */

        #lumin_switch {
            display: grid;
            grid-template-columns: 1;
            animation: burger-load var(--ani-m) 100ms var(--easing) forwards;
        
        }

        #lumin_day, #lumin_night {
            grid-column: 1;
            grid-row: 1;
            display: flex;
            align-items: center;
            gap: var(--unit);
        }

        .icon {
            fill: var(--background);

            }

        #lumin_switch .btn_label {
            width: max-content;
            transition: var(--ani-m) var(--easing);
        }

        .show {
            opacity: 1;
            transition: var(--ani-l) var(--easing);
        }

        .hide {
            opacity: 0;
            transition: var(--ani-f) var(--easing);
        }

        .darkmode .hide {
            opacity: 1;
            transition: var(--ani-l) var(--easing);
            
        }

        .darkmode .show {
            opacity: 0;
            transition: var(--ani-f) var(--easing);
        }

       

/*          CORE ELEMENTS            */



body {
    background-color: var(--background);
    color: var(--foreground);
    font-family: var(--f);
    font-weight: var(--f_tweight);
    font-style: var(--f_style);
    font-size: var(--f_s);
    line-height: var(--f_lh_s);
    scroll-behavior: smooth;
    transition: background-color var(--ani-l), color var(--ani-l);
    transition-timing-function: var(--easing);
}

#explorations{
    background-color: var(--accent);
    color: var(--foreground);
}

.backgroundvid {
    --controls: none;
    --media-object-fit: cover;
    --media-object-position: center;
    --controls-backdrop-color: rgb(0 0 0 / 0%);
    --media-background-color: var(--background) !important;
}

.reel {
    --media-background-color: var(--background) !important;
} 

#explorations .backgroundvid {
    --media-background-color: var(--accent) !important;
}

.regularvid {
    --media-object-fit: cover;
    --media-object-position: center;
    --media-background-color: var(--accent) !important;
    --controls-backdrop-color: rgb(0 0 0 / 60%);
    
}



        /*          LAYOUT          */
        
        #content_wrapper {
            padding: var(--space);
            /* scroll-behavior: smooth; */
        }

        .tophack {
            padding-top: 0;
        }

        #explorations .top_hack {
            margin-top: var(--box-space);
        }

        #split_info {
            width: 100%;
            height: calc(100svh - var(--space) - var(--space));
        }

        #split_visual {
            --padding-fix: calc(var(--box-space) * 2 * -1);
            width: 100%;
            height: calc(100vh + var(--padding-fix));        
        }

                #split_visual img, #split_visual mux-player {
                        width: 100%;
                        height: 100%;
                        object-position: 50% 50%;
                        object-fit: cover;
                }


                /*          FLEXBOX         */
                .fb {
                    display: flex;
                    gap: var(--space);
                }
                
                .fb_icon {
                    display: flex;
                    gap: var(--unit);
                }

                .fb_air {
                    display: flex;
                    gap: var(--air);
                }

                .fb_mini {
                    display: flex;
                    gap: var(--tight);
                }

                .fb_col {
                    flex-direction: row;
                }

                .fb_row {
                    flex-direction: column;
                }

                .fb_spread {
                    justify-content: space-between;
                }

                .fb_center {
                    justify-content: center;
                }

                .fb_flow {
                    flex-wrap: wrap;
                }


                /*          GRID            */

                .grid {
                    width: 100%;
                    padding-bottom: calc(100% / 12);
                    box-sizing: border-box;
                    display: grid;
                    grid-template-columns: repeat(12, 1fr);
                    gap: var(--space);
                }

  

                /*          SPACING         */

                .section {
                    padding-top: var(--box-space);
                    padding-bottom: var(--box-space);
                }


        /*          TYPOGRAPHY          */
        
        .f_large {
            font-size: var(--f_l);
            line-height: var(--f_lh_l);
            font-weight: inherit;
        }

        .f_medium {
            font-size: var(--f_m);
            line-height: var(--f_lh_m);
            font-weight: inherit;
        }

        .f_small {
            font-size: var(--f_s);
            line-height: var(--f_lh_s);
            font-weight: inherit;
        }

        .sticky {
            /* position: -webkit-sticky;
            position: sticky; */
            top: calc(var(--box-space) * 2);
            grid-column: -1 / 1;
        }
        
        .label {
            opacity: 0.6;
        }
        
        
        
        /*      LISTS       */


        ul {
            min-width: 14ch;
            max-width: 50ch;
            display: flex;
            column-gap: var(--air);
            flex-wrap: wrap;
            list-style-type: none;
        }
            
                ul.bullet li:before {
                    content: "\2197\fe0e";
                    margin: 0 var(--unit) 0 0;
                }

                .no_bullet {
                    display: flex;
                    flex-direction: column;
                    /* width: max-content; */
                }

                .no_bullet li {
                    display: flex;
                    flex-wrap: wrap;
                }

                .no_bullet span {
                    display: flex;
                    flex-wrap: nowrap;
                    flex-shrink: 0;
                }

                li .label {
                    margin-left: var(--unit);
                }
            


        /*          BUTTONS         */
        
        button {
            background-color: var(--foreground);
            padding: var(--air) var(--space);
            border: none;
            border-radius: calc(24px + var(--space) + var(--space) / 2);
            color: var(--background);
            font-family: var(--f);
            font-weight: var(--f_tweight);
            font-style: var(--f_style);
            font-size: var(--f_s);
            line-height: var(--f_lh_s);
            cursor: pointer;
            opacity: 1;
            filter: invert(0);
            border: 1px solid rgba(128, 128, 128, 0.0);
            z-index: 999;
            transition: var(--ani-m) var(--easing);
        }

        button svg {
            fill: var(--background);
        }

        button:hover {
            opacity: 0.5;
            background-color: var(--background);
            color: var(--foreground);
            border: 1px solid rgba(128, 128, 128, 0.1);
            transition: var(--ani-m) var(--easing);
        }

        button:hover svg {
            fill: var(--foreground);
        }

                /*          FLOATING ARROWS     */

                .icon .arrow_right {
                    position: relative;
                    left: 0px;
                    margin-left: 4px;
                    transition: var(--ani-s) var(--easing);
                }
                .icon:hover .arrow_right {
                    left: 2px;
                    transition: var(--ani-m) var(--easing);
                }
                
                .icon .arrow_left {
                    position: relative;
                    right: 0px;
                    margin-right: 4px;
                    transition: var(--ani-s) var(--easing);
                }
                .icon:hover .arrow_left {
                    right: 2px;
                    transition: var(--ani-m) var(--easing);
                }


        /*          LINKS           */

        a {
            text-decoration: none;
            color: inherit;
            opacity: 1;
            transition: var(--ani-s) var(--easing);
        }
    
            a::before {
                content: "\2197\fe0e";
                margin-right: var(--tight);
                transition: var(--ani-s) var(--easing);
            }

            a:hover {
                opacity: 0.5;
                cursor: pointer;
                margin-right: calc(var(--tight) * 0.5);
                transition: var(--ani-m) var(--easing);
            }

            a:hover::before {
                display: inline-block;
                margin-right: calc(var(--tight) * 0.5);
                -webkit-transform: rotate(45deg);
                -moz-transform: rotate(45deg);
                -ms-transform: rotate(45deg);
                -o-transform: rotate(45deg);
                transform: rotate(45deg);
                transition: var(--ani-m) var(--easing);
            }
            
            #menu a[aria-current="page"] {
                opacity: 0.2;
            }

            #menu a[aria-current="page"]::before {
                display: inline-block;
                margin-right: calc(var(--tight) * 0.5);
                -webkit-transform: rotate(-90deg);
                -moz-transform: rotate(-90deg);
                -ms-transform: rotate(-90deg);
                -o-transform: rotate(-90deg);
                transform: rotate(-90deg);
                transition: var(--ani-m) var(--easing);
            }



        /*          CONTACT         */

        #contact { 
            position: fixed;
            height: 100%;
            width: 100%;
            z-index: 101;
            display: grid;
            place-items: center;
            

        }

        #contact[aria-expanded="false"]{
            opacity: 0;
            transition: var(--ani-m) var(--easing);
            pointer-events: none;
        }
        
        #contact[aria-expanded="true"]{
            opacity: 1;
            transition: var(--ani-m) var(--easing);
            pointer-events: all;
        }

        .contact__bg1, .contact__bg2 {
            height: 100%;
            width: 100%;
            position: fixed;
            height: 100%;
            width: 100%;
            opacity: 1;
            background-color:var(--accent);
            transform: translateY(var(--rullgardin));
        }
        .contact__bg2 {
            transform: rotate(180deg) translateY(var(--rullgardin));
        }

        #contact[aria-expanded="true"] .contact__bg1, #contact[aria-expanded="true"] .contact__bg2 {
            --rullgardin: 49%;
            transition: var(--ani-m) var(--easing);
            
        }

        #contact[aria-expanded="false"] .contact__bg1, #contact[aria-expanded="false"] .contact__bg2 {
            --rullgardin: 110%;
            transition: var(--ani-s) var(--easing) var(--ani-f);
        }
        

        #contact__info {
            fill: var(--foreground);
            width: 40%;
        }

        #contact[aria-expanded="false"] #contact__info {
            opacity: 0.0;
            transform: scale(80%); 
            transition: var(--ani-f) var(--easing);
        }

        #contact[aria-expanded="true"] #contact__info {
            opacity: 0.9; 
            transform: scale(100%); 
            transition: var(--ani-m) var(--easing) var(--ani-m);
        }
    
        #contact #nope {
            position: fixed;
            bottom: var(--space);
            left: var(--space);
            z-index: 999;
            display: flex;
            justify-content: center;
            align-items: center;
            gap: var(--air);
            border-radius: calc(24px + var(--space) + var(--space) / 2);
        }

        #contact[aria-expanded="false"] {
            transform: translateY(var(--space));
        }

        #contact[aria-expanded="true"] {
            transform: translateY(0);
        }





        /*          MOBILE SPECIFIC           */

        @media only screen and (max-width: 900px) {
            :root {
                --f_s: 16px;
                --f_m: 24px;
                --f_l: 32px;
                --baseunit: 4px;
                --unit: var(--baseunit);
                --tight: calc(var(--unit) * 0.5); /* mini gap */
                --air: calc(var(--unit) * 2);    /* between elements */
                --stratosphere: calc(var(--unit) * 3);    /* between elements */
                --space: calc(var(--unit) * 4);     /* general distance */
                --box-space: calc(var(--unit) * 8);     /* section whitespace */
                --getouttheway: calc(var(--f_m) * -1);
            }
                
            #nav {
                top: auto;
                left: var(--space);
                bottom: var(--space);
                right: var(--space);
                justify-content: space-between;
            }

            #content_wrapper {
                flex-direction: column;
                margin-bottom: var(--box-space);
            }

            #hero {
                flex-direction: column;
                height: max-content;
            }
            
            .grid {
                grid-template-columns: 12, 1fr;
                gap: var(--space);
            }

            #split_visual {
                order: 1;
                width: 100%;
                margin-top: calc(var(--space) + var(--f_m));
                height: max-content;
                aspect-ratio: 3 / 4;
            }
            #split_visual img { 
                width: 100%;
            }
        
            #split_info {
                margin-top: var(--box-space);
                order: 2;
                height: max-content;
            }


            #text_only {
                gap: var(--box-space);
            }

            #skillset, #skill_first, #skill_sec {
                flex-direction: column;
                gap: var(--box-space);
            }

            #contact__info {
                width: 80%;
            }

            #contact #nope {
                bottom: var(--box-space);
            }

            #hero {
                padding-top: 0;
            }

        }


        /*          XXL         */

        @media only screen and (min-width: 2400px) {
            :root {
                --unit: 12px;
                --f_s: 30px;
                --f_m: 40px;
                --f_l: 50px;

                --unit: var(--baseunit);
                --tight: calc(var(--unit) * 2); /* mini gap */
                --air: calc(var(--unit) * 4);    /* between elements */
                --stratosphere: calc(var(--unit) * 6);    /* between elements */
                --space: calc(var(--unit) * 8);     /* general distance */
                --box-space: calc(var(--unit) * 16);     /* section whitespace */
                --getouttheway: calc(var(--f_m) * -1);
            }
            
        }