*, *::before, *::after {
			margin: 0;
			padding: 0;
			box-sizing: border-box;
            scroll-margin-top: 5rem;
        }

        body { min-width: 320px; width: 100%;}

        main {width: 100%; padding: 2rem 5rem; position: relative;}
        main > * {max-width: 800px; margin: auto;}


        .entry-fade {opacity: 0; transition: opacity 1460ms;}

        .large-text {font-size: 2rem;}
        .medium-text {font-size: 1.5rem;}
        .subtitle {opacity: .7;}
        .intext-link {color: inherit;}


        .invert-btn {display: flex; position: relative; place-content: center; place-items: center; padding: .2rem; border: 1px solid !important; height: fit-content; border-radius: 0px; transition: filter 1000ms; filter: invert(0); z-index: 1000000; color: inherit; text-decoration: none; text-align: center;}

        .invert-btn-motif { &::before {position: absolute; top: 100%; left: 100%; height: 50%; content: ''; aspect-ratio: 1/1; border-radius: 50%; transform: translate(-50%, -50%) scale(0); transition: transform 1000ms; background: inherit !important; filter: invert(1); clip-path: polygon(50% -1px, calc(100% + 1px) -1px, calc(100% + 1px)  calc(100% + 1px), -1px  calc(100% + 1px), -1px 50%, 50% 50%);}}

        .invert-btn-white {color: black !important; background: white !important;}
        .invert-btn-black {color: white !important; background: black !important;}

        .invert-btn-white.invert-btn-motif {
            &::before {border: 1px solid black; 
            }
        }


        .invert-btn-motif.bottom-left {&::before {bottom: 0; left: 0; clip-path: polygon(-1px -1px, 50% -1px, 50% 50%, calc(100% + 1px) 50%, calc(100% + 1px) calc(100% + 1px), -1px calc(100% + 1px)); background: white;}}
        .invert-btn-motif.top-left {&::before {top: 0; left: 0; background: white; clip-path: polygon(-1px -1px, calc(100% + 1px) -1px, calc(100% + 1px) 50%, 50% 50%, 50% calc(100% + 1px), -1px calc(100% + 1px));}}
        .invert-btn-motif.top-right { &::before {top: 0; right: 0; background: white; clip-path: polygon(-1px -1px, calc(100% + 1px) -1px, calc(100% + 1px) calc(100% + 1px), 50% calc(100% + 1px), 50% 50%, -1px 50%);}}

        .invert-btn.active, .invert-btn:hover {filter: invert(1) !important; &::before {display: flex;} }

            
        .invert-btn.active, .invert-btn-motif:hover {&::before {display: flex; transform: translate(-50%, -50%) scale(1) !important;}}        

        .focus-box {display: flex; flex-wrap: wrap; max-width: 250px; place-items: center; place-content: center; gap: .5rem; & > * {display: flex; flex-wrap: wrap; place-items: center; place-content: center; text-align: center; padding: .2rem; width: fit-content; background: black; color: white;}}


        .testimonial {
            min-height: 5rem; /* to ensure vertical gap between corner frames */
            padding: 1rem;  

            margin: 0 10%;
            & * {margin: 0;}
            border: 1px solid; 
        
            /* to show only top-left and bottom-right corners*/
            clip-path: polygon(-1px -1px, 1.5rem -1px, 1.5rem 1px, calc(100% - 1px) 1px, calc(100% - 1px) calc(100% - 1.5rem), calc(100% + 1px) calc(100% - 1.5rem), calc(100% + 1px) calc(100% + 1px), calc(100% - 1.5rem) calc(100% + 1px), calc(100% - 1.5rem) calc(100% - 1px), 1px calc(100% - 1px), 1px 1.5rem, -1px 1.5rem);

        }
        .testimonial blockquote {font-style: italic;}
        .testimonial-source {font-size: .9rem; text-align: right; margin-top: 1rem;}

        .testimonial-source .subtitle {font-size: 90% !important;}



        #homepage, section {margin-bottom: 6rem;}

        header { display: flex; align-items: center; align-content: center; position: fixed; background: black; z-index: 1099900; width: 100%; bottom: 0rem; left: 0; right: 0; gap: 2rem; padding: 1rem 2rem; transform: translateY(calc(100% + 4rem)); transition: transform 500ms, opacity 500ms, left 500ms, width 500ms, padding 500ms;
            
            &::after {display: block; position: absolute; z-index: 0; content: ""; background: black; box-shadow: 0px -5px 5px rgba(128,128,128,.5); pointer-events: none; inset: 0 -2rem 0 -2rem; background: black; transition: box-shadow 500ms;} 
            
        }
        
        .scrolled-past-footer {
            max-width: unset;
            width: calc(100% - 4rem);
            border-top: 1px solid white;
            left: 2rem;
            padding: 1rem 0.2rem;
            &::after {top: 0;
                box-shadow: none;
            }

        }


        #home-button {display: block; text-decoration: none; height: 4rem; aspect-ratio: 1/1; z-index: 1000; background: url('imgs/logo.svg'); background-size: contain;}

        #home-button, #hamburger-button { filter: invert(1);}

        .header-appear {
            transform: translateY(0);
        }

        #homepage h1 {font-size: 5rem;}

        h2 {font-size: 2.5rem;}
        h3 {font-size: 1.8rem;}
        h4 {font-size: 1.5rem;}

        header .nav-link, #homepage .nav-link {display: flex; width: 100%; height: 100%; min-height: 3.5rem; text-decoration: none;}

        footer {display: flex; flex-wrap: wrap; flex-basis: 150px; justify-content: space-between; padding: 2rem; height: 14rem; background: black; color: white;}

        .footer-text {font-size: .95rem; color: white; margin: 0; text-decoration: none; 
            & p {margin: 0;}
            & .fa-solid {font-size: 80%;}
        }



        #homepage, #projects-grid, #skills-grid {display: grid; width: 100%;}
        

        #homepage, #projects-grid {gap: 2rem; grid-auto-flow: column; grid-template-columns: auto 280px; align-items: start;}

        #homepage > div, #projects-nav, .skills-nav {display: flex; flex-direction: column; gap: 1.4rem; align-content: stretch; }

        #homepage {grid-template-columns: auto 280px;}

        #homepage > div {justify-content: stretch; justify-items: stretch;}

        #homepage-nav {height: 90vh; max-height: 700px;}
        
        #profile-tag {margin: 0;}

        #projects-grid {grid-template-columns: 180px auto; & > div {height: fit-content;}}

        #projects-nav {min-height: unset !important; position: sticky; top: 2rem;}
        #projects-nav button {min-height: 3.5rem;}






    .projects-slide {display: none;}
    .projects-slide .focus-box {max-width: unset !important; gap: 0 2rem; & > * {flex-direction: column; gap: 0; margin: 0; justify-content: center;}} /* displays tools used */
    .projects-tool-use {font-size: 70%;}

    .projects-slide .testimonial {margin-top: 2rem;}
 
    .projects-slide .focus-box-ctn {background: black; padding: 1.5rem; text-align: center; display: flex; gap: 1rem; flex-direction: column;
        & * {color: white !important; opacity: 1 !important;} 
        
      
        & h4 {color: white; width: fit-content; border-bottom: 1px solid white; margin: auto; padding: .5rem;}
        & article {

            width: 100%;
            border: 1px solid white;
            padding: .5rem;
            clip-path: polygon(0 0, 1.5rem 0,1.5rem 1.5px,calc(100% - 1.5px) 1.5px,calc(100% - 1.5px) calc(100% - 1.5rem),100% calc(100% - 1.5rem),100% 100%,calc(100% - 1.5rem) 100%,calc(100% - 1.5rem) calc(100% - 1.5px), 1.5px calc(100% - 1.5px), 1.5px 1.5rem, 0 1.5rem); 
        }
    }
    
    .projects-slide .focus-box-ctn article * {color: white !important; opacity: 1 !important;}

    .projects-slide img {max-width: 100%; height: auto; object-fit: cover; object-position: center center;}

    .projects-img-portrait {display: none;}

    

    .show {display: block !important;} /* for projects-slide selection*/
    .projects-slide-btt {text-decoration: none; color: black; background: white;}
    .projects-slide-btt-ctn {display: none; justify-content: end; width: 100%; margin-top: 2rem;}

    .projects-figure {width: 100%; border: 1px solid; position: relative; overflow: hidden; & div {display: flex; position: absolute; top: 0; right: 0; padding: .5rem; gap: .5rem; justify-content: end;}}



    .process-phase, .process-phase-num, .process-phase-title {display: grid;}

    .process-phase {
         grid-auto-flow: column; grid-template-columns: 4.5rem auto; justify-items: stretch; width: 100%; min-height: 5rem;
         margin-top: 2rem;
    }

    .process-phase-num {
        width: 5rem; color: white; background-color: black; place-content: center; place-items: center; clip-path: polygon(0% 0%, 100% 0%, calc(100% - 1.5rem) 100%, 0% 100%);
    }

    .process-phase-title {
        width: auto; border-top: 1px solid; border-bottom: 1px solid; background: white; align-content: center; padding-left: 2rem; clip-path: polygon(1.5rem 0%, 100% 0%, 100% 100%, 0% 100%);
    }

        
    #skills-grid {gap: 0 2rem; grid-template-columns: repeat(2, 1fr); & > * {border-left: 1px solid;} & > div {display: grid; align-items: stretch;}}
    #skills-grid h3 {padding: .5rem; color: white;}

    #skills-grid > div:first-of-type, #skills-grid > div:nth-of-type(2) {display: flex; flex-wrap: wrap; align-content: center; width: fit-content; background-color: black;} 



    #skills-services .focus-box {margin: auto;}
    
    .skills-nav {height: 100%; border-left: 1px solid; padding-top: 1.4rem;}


    .skills-nav details:last-of-type > div {border-bottom: 1px solid; & .focus-box {padding-bottom: 1rem !important; align-items: center; align-content: center;}}

   /* .skills-nav details > div { padding: 1rem 0rem;}*/

	.skills-nav details > div { padding: 0 !important;}
	.skills-nav .focus-box {padding-top: 2rem !important;}

    .skills-nav details {
        display: flex;
        flex-direction: column;
        align-content: stretch;
        align-items: stretch;
        height: 100%;
        margin-left: 1.4rem;

        
        & summary {
            list-style: none; /* Further ensures marker is gone */
            display: flex; 
            gap: .5rem;
            align-items: center;
            justify-content: space-between;
            padding: 0 1rem;
            min-height: 4.5rem;
            height: 100%;
            & span { /* for icon+subsection title*/
                display: flex;
                align-items: center;
                text-align: left;
            }
        }

        & summary .fa-chevron-down { 
            transition: transform 0.5s ease-in-out;
        }

        & summary .fa-solid {
            margin-right: 8px;
            font-size: 1.5rem;
        }

        &[open] summary .fa-chevron-down {
            transform: rotate(-180deg);
        }
    }



 
    #skills-grid details > div {visibility: hidden; height: 0px; overflow: hidden; transition: height 1000ms;}
    #skills-grid details[open][name="skills"] > div {visibility: visible; height: var(--skillset-height-skills, 0px); transition: height 1000ms;}
    #skills-grid details[open][name="services"] > div {visibility: visible; height: var(--skillset-height-services, 0px); transition: height 1000ms;}

    #about-me-some a {text-decoration: none; color: initial;}

    #about li {padding-left: .5rem;}
    #about li::marker {content: '»';}

    .nav-link.email-link {color: white;}

    header #nav-links-container {
        display: flex;
        width: 100%;
        gap: 1rem;
        transition: transform 0.3s ease-in-out; /* for mobile menu*/
    }


    #hamburger-button {
        display: none;
        width: 40px;
        height: 30px;
        background: none;
        border: none;
        cursor: pointer;
        position: relative;
        padding: 0;
        z-index: 1001;
    }

    #hamburger-button .bar {
        display: block;
        width: 100%;
        height: 4px; 
        background-color: #333;
        border-radius: 2px;
        position: absolute;
        left: 0;
        transition: all 0.3s ease-in-out;
    }

    #hamburger-button .top-bar {
        top: 0;
    }

    #hamburger-button .mid-bar {
        top: 50%;
        transform: translateY(-50%);
    }

    #hamburger-button .bottom-bar {
        bottom: 0;
    }

    #hamburger-button.open .top-bar {
        transform: translateY(13px) rotate(45deg);
        /* FOR translateY: (half of button height) - (half of bar height) */
    }

    #hamburger-button.open .mid-bar {
        opacity: 0; }

    #hamburger-button.open .bottom-bar {
        transform: translateY(-13px) rotate(-45deg);
    }

    .popup, #email-error-popup {
        position: fixed;
        top: 20px;
        left: 50%;
        transform: translateX(-50%);
        background: rgba(0, 0, 0, 0.8);
        color: white;
        padding: 1rem 2rem;
        border-radius: 8px;
        box-shadow: 0 .25rem .5rem rgba(0, 0, 0, 0.2);
        z-index: 2000000;
        opacity: 0;
        visibility: hidden;
        
        transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
    }

    #email-error-popup {background: rgba(255,0,0,.8);}

    .email-copied-confirm {
        opacity: 1 !important;
        visibility: visible !important;
 
        animation: boostDip 0.7s ease-out forwards; 
    }

    /* FOR EMAIL COPY POPUP */
    @keyframes boostDip {
        0% {
            transform: translateX(-50%) translateY(0); 
        }
        25% {
            transform: translateX(-50%) translateY(-15px); 
        }
        50% {
            transform: translateX(-50%) translateY(5px); 
        }
        75% {
            transform: translateX(-50%) translateY(-2px); 
        }
        100% {
            transform: translateX(-50%) translateY(0); 
        }
    }

    @media (max-width: 1023px) {
        #homepage h1 {font-size: 3.5rem;}

    }

    @media (max-width: 799px) {
        #homepage {grid-auto-flow: row; grid-template-columns: unset;} /* due to h1*/



    }


    @media (max-width: 767px) {
        :root {font-size: 12px;}
        main {padding: 3rem 1.5rem 0; position: relative;}
        footer {height: fit-content !important;}
        * {scroll-margin-top: 10rem !important;}
        header {bottom: unset; top: 0; margin-bottom: 0; transform: translateY(calc(-100% - 4rem)); &::after {box-shadow: 0px 5px 5px rgba(128,128,128,.5);}}

        #header-nav {
            justify-content: space-between;
            align-items: flex-start;
            & nav {gap: 0; padding: .5rem; & .invert-btn::before {display: none !important;}}
        }
        #hamburger-button {
            display: block; /* Show hamburger button on mobile */
            align-self: center;
        }

        .popup {
            background: rgba(0, 180, 0, 0.8);
            box-shadow: 0 .25rem .5rem rgba(0, 128, 0, 0.2);

        }
        
        #projects-grid {grid-auto-flow: row; grid-template-columns: unset;}
        #projects-nav {position: unset;}
        .projects-slide-btt-ctn {display: flex;}

        #skills-grid {grid-auto-flow: row; grid-template-columns: unset; grid-template-rows: unset;}
        #skills-grid > div:nth-of-type(2) {grid-row-start: 3; margin-top: 2rem;}
        #skills-grid > div {height: fit-content;;} /*??ANDROID - NOT CREATING SPACE NEEDED FOR FULL SECTION WHEN DETAILS OPEN!!!*/

        /* .skills-nav {height: fit-content;} !!! check if redundant*/

        .skills-nav details {
            & summary {
                height: unset; /* CHANGED FROM 100% in desktop */
                min-height: unset; /*!!! check if redundant*/
            }
        }




        header #nav-links-container {
            flex-direction: column;
            position: absolute;
            top: 100%;
            left: 0;
            width: 100%;
            z-index: 999; /* Below hamburger button */
            padding: 10px 0;
            background: white;

            /* Initial state: hidden */
            max-height: 0;
            overflow: hidden; 
            opacity: 0;
            pointer-events: none; /* Make it unclickable when hidden */
            transition: max-height 0.3s ease-out, opacity 0.3s ease-out;
                & .nav-link {border: none !important; border-bottom: 1px solid !important;}

        }

        header.header-appear #nav-links-container.open {
            max-height:  calc(100vh - 8rem) !important; /* FOR MOBILES IN LANDSCAPE */
            overflow-Y: scroll;
            scrollbar-width: none;
            opacity: 1;
            pointer-events: all;
        }

        .nav-link {
            width: 100%;
            text-align: center;
            padding: 15px 0;
        }

        header .nav-link:last-child {
            border-bottom: none;
        }

    }


    @media (max-width: 400px) {
        #homepage h1 {font-size: 3.5rem;}
        footer {flex-direction: column; gap: 1.5rem;}
        main {padding: 3rem 1rem 1rem;}

        .projects-img-landscape {display: none;}
        .projects-img-portrait {display: initial;}
    }