:root{
    --headerHeight:3rem;
    --color-link:#fff;
    --color-linkAlt:#65beff;  /* #dfeb5e */
    --color-text:#9dacc2; /* #94a3b8  #B4D1D5 */
    --color-textAlt:#d1d8e3; /* #94a3b8  #B4D1D5 */
    --color-textTitle: #e1e7f0;
    --color-selection:rgba(182, 224, 255, 0.8);

    --fontFamSans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;;
    --fontFamMain: var(--fontFamSans);
}


html{
	font-family:var(--fontFamMain);
    font-weight: 300;
    font-optical-sizing: auto;
    font-style: normal;
    overflow-y:scroll;
    min-width: 480px;
    scroll-behavior: smooth;
}


body{
    color:var(--color-text);
	overscroll-behavior-y: none;
    position: relative;
    margin:0;

    bakground:transparent;

    font-size:12pt;
    font-optical-sizing: auto;
    font-style: normal;
    line-height: 1.5;
    z-index: 1;
}

body::before{
    content:"";
    position: fixed;
    top:0;right:0;bottom:0;left:0;
    background-image:url('../img/bg-blue-dark.svg');
    background-size: cover;
    background-position: top left;
    background-attachment: fixed;
    z-index:-1;
}


/* Misc setup
** ----------------------------------- */

::selection {
    background-color: var(--color-selection);
    color: rgba(0,0,0,.85);
}

::-moz-selection{
    background-color: var(--color-selection);
    color: rgba(0,0,0,.85);
}

a{
    color:var(--color-link);
    text-decoration: none;
    text-decoration-thickness: .025em;
    text-underline-offset: .125em;
}
a:hover{ color:var(--color-linkAlt); }

p{ margin-bottom:1rem; }
u{
    text-underline-offset:.2em;
}
.color-textAlt{ color:var(--color-textAlt); }

.ini::first-letter{
    -webkit-initial-letter: 3;
    initial-letter: 3;
    font-weight: 700;
    margin-right:.5em;
}


/* Button
** ----------------------------------- */
.btn{
    cursor: pointer;
    outline: 0;
    display: inline-block;
    font-weight: 300;
    line-height: 1.5;
    text-align: center;
    background-color: transparent;
    border: 1px solid transparent;
    padding: .375em .75em;
    font-size: 1rem;
    border-radius: .5rem;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    border-color: var(--color-linkAlt);
}

.btn:hover {
filter:brightness(10);
}

#getStartedBtn{
    display: inline-block;
    vertical-align: middle;
}

#getStartedBtn::before{
    content:" ";
    display: inline-block;
    vertical-align: middle;
    width:1.5em;
    height:1.5em;
    margin-right:.5em;
    background-image:url('../img/icons/envelope.svg');
    background-repeat: no-repeat;
    background-position: center left;
    filter: invert(72%) sepia(9%) saturate(4402%) hue-rotate(178deg) brightness(101%) contrast(101%);
}



/* _____________________________________________________________________________________

    Site structure
_____________________________________________________________________________________ */

#siteFrame{
    max-width:1280px;
    margin:0 auto;
    padding:0 3.5rem;
    display: flex;
    flex-flow: row nowrap;
    gap:1em;
}

#siteHead{
    padding:5em 0 0;

    position: sticky;
    top:0;

    max-height: 100vh;
    flex:0 0 48%;


    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-start;
}

#pageContent{
    padding:5em 0 15em;
    flex:0 0 52%;
    width:100%;
    min-width: 0;
}

#pageContent > section{
    padding:3em 0;
}



/* _____________________________________________________________________________________

    Site Head
_____________________________________________________________________________________ */


.site-title{
    font-size:2.5rem;
    font-weight:700;
    letter-spacing: -.02em;
    line-height:1.05;
    color:var(--color-textTitle);
}


.site-subtitle{
    font-size:1.25rem;
    font-weight:400;
    letter-spacing: -.02em;
    color:var(--color-textTitle);
    margin-top:.85em;
}


.site-tag{
    margin-top:.85em;
    max-width:35ch;
}

.site-tag b{
    color:var(--color-textTitle);
}


/* Main Navigation
** ----------------------------------- */
nav.main {}

nav.secondary{
    margin-top:auto;
    margin-bottom:1em;
}

.ping-btn{
    display: inline-block;
    vertical-align: middle;
}

.ping-btn::before{
    content:" ";
    display: inline-block;
    vertical-align: middle;
    width:1.5em;
    height:1.5em;
    margin-right:.5em;
    background-image:url('../img/icons/envelope.svg');
    background-repeat: no-repeat;
    background-position: center left;
    filter: invert();
}

nav.main ul{
    max-width:35ch;
}
nav.main ul li{
    padding: .375em .75em;
    transition: font-size 100ms;
    white-space: nowrap;
}

nav.main ul li.active{
    background: rgba(255,255, 255,.05);
    font-size:1.2em;
    border-left:.25em rgba(255,255, 255,.65) solid;
}
nav.main ul li.active a{
    color:var(--color-linkAlt);
    font-weight: 500;
}






/* _____________________________________________________________________________________

    PageContent
_____________________________________________________________________________________ */

/* General
** ----------------------------------- */
section > h2{
    font-size:1rem;
    font-weight:400;
    letter-spacing: -.02em;
    color:var(--color-textTitle);
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    gap:0 .5em;
    margin-bottom:.75em;
}
section > h2::after,
section > h2::before{
    content:"";
    flex:0 0 .5em;
    border-top:1px solid var(--color-text);
}
section > h2::after{
    flex:1 1 2em;
}



/* Experience s
** ----------------------------------- */

#expDomainList > li{
}
#expDomainList > li ul{
    margin-bottom: 2.5em;
}
#expDomainList > li summary{
    font-size:1.25em;
    color:var(--color-link);
    margin-bottom:.5em;
    cursor: pointer;
    list-style-position:outside;
    padding-left:.5em;
    margin-left:1em;
}

#expDomainList > li summary::marker{
    color:var(--color-linkAlt);

}
#expDomainList > li summary:hover{
}
#expDomainList > li ul li{
    list-style: disc;
    margin-left:2em;
    padding-left:.5em;
}




/* Showcase
** ----------------------------------- */
#showcaseList{
    margin:0 0;
    display: flex;
    flex-flow:row wrap;
    gap:1em;
}
#showcaseList > li{
    flex:0 0 100%;
    padding:2em .5em;
    overflow: hidden;
    border-bottom:1px dashed rgba(255,255,255,0.2);
}




.project-head{
}

.project-head h3{
    font-size:1.1rem;
    font-weight: 400;
    color:var(--color-textAlt);
    line-height: 1;
    margin-bottom:1em;
}
.project-blurb{
    font-size:.825em;
    font-style: italic;
    flex:0 0 100%;
    padding:.25em 0;
    margin-bottom:1em;
}

.project-blurb h4{
    color:var(--color-textAlt);
}

.project-blurb details{
    font-style:normal;
    display: inline;
}
.project-blurb details:open{
    display: flex;
    flex-flow: column;
    margin-top:1em;
}

.project-blurb details summary{

    display:inline-block;
    color:var(--color-link);
    cursor: pointer;
    list-style-position:outside;
    white-space: nowrap;
}
.project-blurb details summary::after{
    content:"read more..."
}
.project-blurb details:open summary{
    order:9999;
    text-align: right;
    width:min-content;
    align-self: flex-start;
}
.project-blurb details:open summary::after{
    content:"\21E7  hide";
}
.project-blurb details > :last-child{
    margin-bottom: 0;
}



ul.tags{
    display: flex;
    flex-flow:row wrap;
    gap:.25rem .25rem;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 1em;
}

ul.tags li.tag{
    font-size:.7em;
    border-radius:1em;
    padding:.25em 1em;
    background:rgba(255, 255, 255, 0.15);
    color:var(--color-textAlt);
    font-weight:300;
    cursor: default;
}

/*
#showcaseList details{
    font-size:.9em;
}
#showcaseList summary{
    color:var(--color-link);
    margin-bottom:.5em;
    cursor: pointer;
    list-style-position:outside;
    padding-left:.5em;
    margin-left:1em;
}
#showcaseList summary:hover{
    color:var(--color-linkAlt);
}

*/


/* _____________________________________________________________________________________

    Carousel
_____________________________________________________________________________________ */

ul.img-carousel {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width:none;
    display:flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    gap:0 1em;
    width:100%;
    scroll-marker-group: none;
    scroll-target-group: auto;
    position: relative;

    > li {
        scroll-snap-align: center;
        height:15em;
        max-width:100%;
        flex:0 0 content;
        user-select: none;
        border-radius: .25em;
        overflow: hidden;
        cursor: pointer;
        border:1px solid rgba(255,255,255,.15);

        > img {
            height:15em;
            display: block;
        }
    }

    > li.centered{
        cursor: zoom-in;
    }


    &::-webkit-scrollbar {
      width: 12px; /* Set a width for the scrollbar */
    }

    &::-webkit-scrollbar-track {
      background-color: transparent; /* Make the track transparent */
    }

    &::scroll-button(*){
        position:fixed;
        position-anchor:auto;
        position-area:center start;
        position-visibility:always;
        z-index:2;
        height:2em;
        width:2em;
        border:none;
        border-radius: 50%;
        outline:none;
        color:var(--color-link);
        cursor: pointer;
        border:1px solid #fff;

    }
    &::scroll-button(*):hover{
        color:var(--color-linkAlt);
        border:1px solid var(--color-linkAlt);
        transform:scale(1.1);
    }
    &::scroll-button(left) {
        position-area: inline-start center;
        background-image: url('../img/icons/prev.svg');
        background-position: center center;
        background-size: contain;
        background-repeat: no-repeat;
        content:" "  / "Scroll Left";
        display: block;
        right:-1em;
    }

    &::scroll-button(right) {
        position-area: inline-end center;
        background-image: url('../img/icons/next.svg');
        background-position: center center;
        background-size: contain;
        background-repeat: no-repeat;
        content:"";
        display: block;
        content: " " / "Scroll Right";
        left:-1em;
    }
    &::scroll-button(*):disabled{
        visibility:hidden;
    }

    &::scroll-button(*):focus-visible {
        outline-offset: 5px;
    }
    &::scroll-marker-group{
        display: flex;
        flex-flow:row wrap;
        justify-content: center;
        height:1em;
        padding:.5em 0;
        gap:.5em;
    }


    > li::scroll-marker {
        content: ' ';
        flex:0 0 .45em;
        height:.45em;
        border-radius: 50%;
        border:1px solid var(--color-link);
        opacity: .5;
    }

    > li::scroll-marker:target-current {
        background: var(--color-linkAlt);
        border:1px solid var(--color-linkAlt);
        opacity: 1;


    }

}

/* _____________________________________________________________________________________

    Image Lightbox
_____________________________________________________________________________________ */
.zoom-box{
    position: fixed;
    top:0;right:0;bottom:0;left:0;
    border:3em solid transparent;
    z-index:10050;
    background-color:rgba(0,0,0,0.8);
    background-size:contain;
    background-repeat: no-repeat;
    background-position: center;
    cursor: zoom-out;
    overscroll-behavior: contain;
}
html.img-zoom{
    overflow: hidden !important;
}

/* _____________________________________________________________________________________

    Responsive Breakpoints
_____________________________________________________________________________________ */
@media (max-width: 1024px) {


    #siteFrame{
        display: block;
    }

    #siteHead{
        padding:5em 0;
        position: relative;
        top:0;
        max-height: 100vh;
        display: block;
    }

    .mast{
        margin-top:2em;
    }

    #pageContent{
        padding: 0 0 15em;
    }

    nav.main{
        position: fixed;
        z-index: 100;
        top:0;right:0;left:0;
        backdrop-filter: blur(100px);
        -webkit-backdrop-filter: blur(100px);
    }

    nav.main ul{
        max-width: none;
        display: flex;
        flex-flow:row nowrap;
        justify-content: flex-end;
    }
    nav.main ul li{
        border-top:.25em transparent solid;
        border-bottom:.25em transparent solid;
    }
    nav.main ul li.active{
        font-size:1rem;
        border-bottom-color: rgba(255,255, 255,.65);
        border-left:none;
    }
    nav.main ul li.active a{
    }


    #pageContent > section{
        padding:5em 0 3em;
    }

}


@media (max-width: 767px) {


    nav.main ul{
        justify-content: center;
    }

    ul.img-carousel {

        > li {
            height:11em;

            > img {
                height:11em;
            }
        }
    }

    .zoom-box{
        border:1em solid transparent;
    }


}


@media (max-width: 480px) {
    body{
        font-size:14pt;
    }
    #siteFrame{
        padding:0 1.5em;
    }
    nav.main{
        font-size:.85em;
    }

    ul.img-carousel {

        > li {
            height:10em;

            > img {
                height:10em;
            }
        }
    }

}