/* basic, non-grid and non-CSS variables version */

body {font-family: sans-serif}

.nav-link-logo svg  {display: none}
.main-nav svg       {display: none}

#mobile-menu,
#mobile-menu + label{display: none}

.main-nav       {overflow: hidden; font-size: 14px; font-weight: 400;}
.main-links     {float: left}
.contact        {float: right}
.nav-link       {margin-right: .5em}
.nav-link-icon  {margin-left: .5em}

.main-nav,
.content,
.resume-content {width: calc(100% - 24px); max-width: 600px; margin: 0 auto;}

.resume-sidebar img { width: 100%; max-width: 150px;}
.resume-sidebar dt  { float: left; clear: left;}
.resume-sidebar dd  { margin-left : 6em;}
.content .inlined   {max-width: 150px;}
.left               {float: left; margin-right: .5em;}
dl.examples img     {max-width: 200px}


@supports (display: grid) {
    /* reverse the above */

    .nav-link-logo svg,
    .main-nav svg,
    #mobile-menu,
    #mobile-menu + label { display: inline-block;}
    .main-nav            { overflow:visible; font-size:inherit; font-weight:inherit;}
    .main-links,
    .contact             { float: none;}
    .nav-link,
    .nav-link-icon       { margin: 0}
    .main-nav,
    .content,
    .resume-content      { width: 100%; max-width: inherit;}
    .resume-sidebar img  { width:auto; max-width:inherit;}
    .resume-sidebar dt   { float: none; clear: left;}
    .resume-sidebar dd   { margin :0;}
    img.inlined.left     { max-width: 100%;}
    .left                { float: none; margin: inherit}


/*
    going full-in on CSS variables (custom properties)

*/

    :root {
        /* named colors */
        --dark-gray: #444;
        --light-gray: #aaa;
        --orange: tomato;
        --light-teal : #e5f3f4;

        /* colors used */
        --text-color:   var(--dark-gray);
        --hover-color:  #fff;
        --nav-color: #fff;
        --nav-icon: rgba(255,255,255,.7);
        --active-color: var(--orange);
        --bg-color  :   var(--light-teal);
        --nav-bg-color: #555;
        --header-color: #666;

        --link-color : #1566f1;
        --link-start-color:  var(--header-color);
        --link-end-color: var(--active-color);
        --link-border-color: var(--link-color);

        --logo-color: var(--bg-color);
        --logo-color-hover: #fff;
        --logo-bg-color: transparent;
        --logo-bg-color-hover: var(--nav-bg-color);
        --subnav-bg-color: #444;
        --subnav-color: #bbb;
        --subnav-color-hover: #fff;

        /* units */
        --base-padding: 2.4rem;
        --page-width:   120rem;
        --page-padding: calc(var(--base-padding) * 2);
        --page-max: calc(var(--page-width) + var(--page-padding));
        --max-examples-width: 90rem;
        --column-min: 36ch;
        --font-weight-normal: 400;
        --font-weight-bold: 600;
        --font-weight-menu: 600;
        --font-weight-heading: 600;
        --burger-menu-top: .9rem;
        --main-links-width: 36rem;

        /* background images */
        --nav-bg-large   : url(../_img/large/bkg-05.jpg);
        --nav-bg-med     : url(../_img/med/bkg-05.jpg);
        --nav-bg-sm      : url(../_img/sm/bkg-05.jpg);
        --background-size: cover;
        --background-pos: center center;
        --background-pos-y: -25vw;

        /* fonts */
        --body-font   : 'Muli', sans-serif;
        --header-font : 'Oswald', 'Muli', sans-serif;

/*
        --chevron-right: '\203a';
        --times: '\00d7';
*/
        --chevron-right: url(../_img/svg/chevron-right-light.svg);
        --chevron-left: url(../_img/svg/chevron-left-regular.svg);
        --times: url(../_img/svg/times-regular.svg);
        --external-link: url(../_img/svg/external-link-light.svg);
        --page-link: url(../_img/svg/browser-light.svg);
        --img-link: url(../_img/svg/image-polaroid-light.svg);
    }

    ::selection {
        color: white;
        background-color: var(--nav-bg-color);
    }

    html {
        font-size: 62.5%;
        scroll-behavior: smooth;
    }

    body {
        background-color: var(--bg-color);

        font-size: 1.6rem;
        font-family: var(--body-font);
    	font-weight: var(--font-weight-normal);
    	color: var(--text-color);

    	padding-bottom: calc(var(--base-padding) * 5);
    }


/* scroll bars */
    html {
        --scrollbarBG: var(--dark-gray);
        --thumbBG: #bbb;

        scrollbar-width: auto;
        scrollbar-color: var(--thumbBG) var(--scrollbarBG);
    }

    html::-webkit-scrollbar {
        width: 13px;
    }
    html::-webkit-scrollbar-track {
        background: var(--scrollbarBG);
    }
    html::-webkit-scrollbar-thumb {
        background-color: var(--thumbBG) ;
        border-radius: 6px;
        border: 2px solid var(--scrollbarBG);
    }



    a,
    a:visited {
    /*     color: #1675f3; */
        color: var(--link-color);
        font-weight: 600;
        position: relative;
        text-decoration: none;

        -webkit-box-decoration-break: clone;
        box-decoration-break: clone;
    }

    a:not(.nav-link):not(.nav-link-icon):not(.nav-link-logo):not(.subnav-section) {
        border-bottom: 2px solid transparent;
    }

    a:not(.nav-link):not(.nav-link-icon):not(.anchor):not(.nav-link-logo):hover:not(.subnav-section):hover {
        background: linear-gradient(to right, var(--link-start-color), var(--link-end-color));
        background-size: 100%;
        background-position: left center;

        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        -webkit-box-decoration-break: clone;
        box-decoration-break: clone;
    /*
        text-decoration: underline;
        -webkit-text-decoration-color: #666;
        text-decoration-color: #666;
    */

        border-bottom-color: var(--link-border-color);
    }

    a.anchor {
        display: block;
        transform: translateY(-10rem);
    }

    span.newpage {
        color: var(--link-color);
    }

    .newpage::after,
    .external::after,
    .previous::before {
        content:'';
        width: 1.15em;
        height: 1.15em;
        margin-left: .35em;
        display: inline-block;
        background: var(--link-color);
        position: relative;
        top: .2em;

        -webkit-mask-repeat: no-repeat;
        -webkit-mask-position: center;
        -webkit-mask-clip: border-box;
        -webkit-mask-origin: border-box;
        -webkit-mask-size: auto;

        mask-repeat: no-repeat;
        mask-position: center;
        mask-clip: border-box;
        mask-origin: border-box;
        mask-size: auto;
    }

    .external::after {
        -webkit-mask-image: var(--external-link);
        mask-image: var(--external-link);
        height: .9em;
        top: 0;
    }

    .newpage-img::after {
        -webkit-mask-image: var(--img-link);
        mask-image: var(--img-link);
    }

    .newpage-window::after {
        -webkit-mask: var(--page-link);
        mask: var(--page-link);

    }

    a.newpage:hover::after,
    a.external:hover::after {
        background: var(--link-end-color);
    }

    .previous::before {
/*         content: var(--chevron-left); */
        -webkit-mask-image: var(--chevron-left);
        mask-image: var(--chevron-left);
        display: inline-block;
        width: 0.5em;
        margin-right: 0.3em;
        margin-left: 0;
        top: .2em;
    }

    label.link {
        color: var(--link-color);
        font-weight: 600;
    }

    abbr {
        text-decoration: none;
        border-bottom-style: dashed;
    }

    code {
        padding: 0 .5em;
        background-color: white;
        color: black;
        font-size: .9em;
    }

    h1, h2, h3, h4 {
        font-weight: var(--font-weight-normal);
        color: var(--header-color);
        margin: 0 0 .25em 0;
        font-family: var(--header-font);
    }

    header {
        margin-bottom: 1.35em;
    }

    header h1,
    header h2 {
        line-height: 1em;
    }

    h2 { font-size: 3rem;}
    h3 { font-size: 2.6rem;}

    header h3,
    header h4 {
        font-family: var(--body-font);
        font-weight: var(--font-weight-heading);
        color: black;
        margin: 0;
        text-transform: uppercase;
        font-size: 1em;
    }

    body.portfolio h2 {font-size: 2rem}
    h2.tab-header {margin-top: .5em}

    dt {
        font-weight: var(--font-weight-bold);
    }
    dd {
        margin-left: 0;
        margin-bottom: 1em;
    }

    .main-nav {
        background-color: #8d8d8d;
        background-image: var( --nav-bg-large);
        background-size: cover;
        background-position: center center;

        margin-bottom: calc(var(--base-padding) * 2);

        position: -webkit-sticky;
        position: sticky;
        top: 0;
        z-index: 1000;
    }


    @media (max-width: 1200px) {
        .main-nav {
            background-image: var( --nav-bg-med);
        }
    }

    @media (max-width: 830px) {
        .main-nav {
            background-image: var( --nav-bg-sm);
        }
    }



    .banner {
        height: calc(100vw / 6.57);
        max-height: 40rem;
        min-height: 16.8rem;
        padding: 0;
        margin: 0;

        background-color: #8d8d8d;
        background-image: var( --nav-bg-large);
        background-size: var(--background-size);
        background-position: center center;
    }

    @media (min-width: 500px) {
        .banner {
            --background-size: 100vw;
            background-position-y : var(--background-pos-y);
            background-attachment: fixed;
        }
    }

    .home {
        width: 100%;
        max-width: var(--page-max);
        padding: 0 var(--base-padding);
        padding-top: 1.2rem;
        margin: 0 auto;
        display: flex;
        height: 100%;
        align-items: flex-start;

    }

    .nav-link-logo {
        display: inline-block;
        height: 11rem;
        transition: background-color .3s;
        background-color: var(--logo-bg-color);
        padding: .5rem;

        position: -webkit-sticky;
        position: sticky;
        top: 0;
    }

    .nav-link-logo b {display: none}

    .nav-link-logo svg{
        width: 24.2rem;
        height: 10rem;
        fill: var(--logo-color);
        transition: fill .3s;
    }

    .nav-link-logo:hover {
        background-color: var(--logo-bg-color-hover);
    }
    .nav-link-logo:hover svg {
        fill: var(--logo-color-hover);
    }




    .navbar-wrapper {
        background-color: var(--nav-bg-color);
        height: 5rem;
    }

    .navbar-wrapper.subnav {
        background-color: var(--subnav-bg-color, #333);
    }
    
    @media (max-width: 420px) {
        .navbar-wrapper.subnav {
            display: none;
        }
    }
    
    .navbar {
        display: flex;
        align-items: stretch;
        height: 5rem;

        max-width: var(--page-max);
        padding: 0 var(--base-padding);
        margin: 0 auto;
        position: relative;
        z-index: 101;
    }

    .navbar strong {
        font-weight: var(--font-weight-menu);
        border-bottom: 4px solid transparent;
        padding-bottom: 2px;
        margin-top: 6px;
        transition: border-bottom .5s;
    }

    .navbar a,
    .navbar a:visited {
        text-decoration: none;
        color: var(--nav-color);
    }
    .navbar a::before {content:none}

    .navbar a.active {
        color: var(--active-color);
    }
    .navbar a.active svg {
        fill: var(--active-color);
    }


    .navbar a.nav-link:hover strong {
        border-bottom-color: var(--nav-color);
    }

    /* default order */
    .main-links          {order: 1}
    #mobile-menu         {order: 2}
    #mobile-menu + label {order: 3}
    .contact             {order: 4}


    .main-links {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        width: var(--main-links-width);
    }

    .navbar .icon {
        width: 2rem;
        height: 2rem;
        fill: var(--nav-icon);
        transition: fill .3s;
    }

    .navbar a:hover .icon {
        fill: var(--active-color);
    }

    .nav-link .icon {
        display: none;
    }

    /* socials */
    .contact {
        margin-left: auto;
        display: flex;
        flex-direction: row;
    }

    .nav-link-icon {
        display: flex;
        flex-direction: row;
        align-items: center;
        padding: 0 1.2rem;
    }

    .nav-link-icon.divider {
        border-top: none;
    }

    .nav-link-icon strong {
        visibility: hidden;
        display: inline-block;
        width: 0;
    }

    .subnav-links {
        display: flex;
        flex-direction: row;
        list-style-type: none;

        align-items: center;
        justify-content: flex-start;

        height: 100%;
        max-width: var(--page-max);
        padding: 0 var(--base-padding);
        margin: 0 auto;
        position: relative;
        z-index: 100;

        font-size: .865em;
        color: white;

    }

    .subnav-link {
        margin: 0;
        margin-right: 2em;
        padding: 0;
    }

    .subnav-link a,
    .subnav-link a:visited {
        color: var(--subnav-color, #bbb);
        text-decoration: none;
    }
    .subnav-link a:hover {
        color: var(--subnav-color-hover);
    }

    .subnav-link a.active {
        color: var(--active-color, #fff);
    }

    /* hamburger menu */

    #mobile-menu {
        display: none;
    }

    #mobile-menu + label{
        color: white;
        cursor: pointer;
        display: none;
        align-self: center;
        margin-left: auto;
        padding-right: 3rem;
        position: relative;
    }

    #mobile-menu + label em {
        font-weight: var(--font-weight-menu);
        font-style: normal;
    }

    /* hamburger menu widget styles */
    #mobile-menu + label::after,
    #mobile-menu + label::before,
    #mobile-menu + label span::after,
    #mobile-menu + label span::before {
        content: '';
        width: 1.8rem;
        height: 1px;
        border: 1px solid white;

        position: absolute;
        right: 0;
        top: var(--burger-menu-top);
        transform: rotate(0);
        transition: border-color .3s, transform .3s;
    }

    #mobile-menu + label span::before {
        top: calc(var(--burger-menu-top) - 8px);
    }
    #mobile-menu + label span::after {
        top: calc(var(--burger-menu-top) + 8px);
    }

    #mobile-menu:checked + label span::after,
    #mobile-menu:checked + label span::before {
        border-color:transparent;
    }

    #mobile-menu:checked + label::before {
        border-color: var(--active-color);
        transform: rotate(45deg);

    }
    #mobile-menu:checked + label::after {
        border-color: var(--active-color);
        transform: rotate(-45deg);
    }


    @media (max-width: 800px){

         .navbar {
             padding-right: 0
         }

         #mobile-menu + label {
             display: block;
             margin-right: var(--base-padding);
         }

        .contact {
            --nav-link-height: 4.6rem;
            flex-direction: column;
            height: calc(4 * var(--nav-link-height));

            position: absolute;
            top: 5rem;
            right: 0;

            display: none;
        }

        .nav-link-icon {
            height: var(--nav-link-height);
            background-color: var(--nav-bg-color);
            padding: 0 var(--base-padding);
        }

        .nav-link-icon strong {
            visibility: visible;
            display: inline-block;
            width: auto;
            margin-left: calc(var(--base-padding) / 2);
        }


        #mobile-menu:checked ~ .contact {
            display: flex;
        }
    }

    @media (max-width:650px){
    	.main-links {
        	--main-links-width: 32rem;
    	}
    }

    @media (max-width:580px){
        :root {
            --burger-menu-top: 2.4rem;
        }

         /* mobile order */
        #mobile-menu         {order: 1}
        #mobile-menu + label {order: 2}
        .main-links          {order: 3}
        .contact             {order: 4}

        .navbar {
            flex-direction: column;
            height: auto;
        }

        #mobile-menu + label {
            height: 5rem;
            padding-top: calc(var(--burger-menu-top) / 1.625);
            position: relative;
        }

        #mobile-menu + label em {
            color: transparent;
        }

        .main-links,
        .contact {
            width: 26rem;
            margin-left: auto;
            display: none;
        }

        #mobile-menu:checked ~ .main-links,
        #mobile-menu:checked ~ .contact {
            display: flex;
        }

    	.main-links {
        	flex-direction: column;
        	align-items: initial;
        	--main-link-height: 4.6rem;
        	height: calc(3 * var(--main-link-height));
        	background-color: var(--nav-bg-color);
    	}

    	.nav-link {
            height: var(--main-link-height);
            background-color: var(--nav-bg-color);
            padding: 0 var(--base-padding);
            display: flex;
            flex-direction: row;
            align-items: center;
        }

        .nav-link .icon {
            display: initial;
        }

        .nav-link strong {
            margin-left: calc(var(--base-padding) / 2);
        }

        .contact {
            position: static;
        }

        .nav-link-icon.divider {
            border-top: 1px solid #888;;
        }
    }




    .content {
        max-width: var(--page-max);
        padding: 0 var(--base-padding);
        margin: 1.6rem auto;
        margin-bottom: calc(var(--base-padding) * 2);
    }

    @media (max-width: 500px) {
        .content {
            padding: 0 calc(var(--base-padding) / 2);
        }
    }

    .columns {
        columns: var(--column-min);
        column-gap: calc(var(--base-padding) * 1.3);
        margin-bottom: calc(var(--base-padding) * 2);
    }

    .content:first-child {
        margin-top: 3.6rem;
    }

    .content h2 {
        -moz-column-span: all;  /* ff still doesn't support this :-( */
             column-span: all;
    }

    .content p {
        margin-top: 0;
        margin-bottom: calc(var(--base-padding) * .75);
    /*     break-inside: avoid; */ /* testing only */
    }


    .content .inlined {
        width: 50%;
        max-width: 27rem;
    }

    .nb {
        font-size: .8em;
        opacity: .8;
    }

    .left {
        float: left;
        margin: 0 1.2rem .2rem 0;
    }

    .round {
        max-width: 50%;
        min-width: 125px;
        shape-outside: border-box;
        shape-margin: 1.2rem;
        margin-left: -16.8%;
        transition: margin-left .5s;
    }

    @media (max-width: 1330px) {
            .round {
                margin-left: 0;
            }
        }

    @supports (shape-outside: border-box) {
       .round {
            border-radius: 50%;
        }

        /* kiiindaaa designed myself into a little corner here.
           I hate having to use media queries that are this precise */

        @media (max-width: 1330px){
        	.round {
                border-radius: 0 50% 50% 0;
                margin-left: -16.8%;
        	}
        }

        @media (max-width: 1288px) {
            .round {
                margin-left: calc((var(--base-padding) * -1) * 2);
            }
        }

        @media (max-width: 1248px) {
            .round {
                margin-left: calc(var(--base-padding) * -1);
            }
        }

    }

    .resume-content {
        position: relative;
        max-width: var(--page-max);
        padding: 0 var(--base-padding);
        margin: 0 auto;
        margin-top: calc(var(--base-padding) * 2.5);
    }

    .resume-sidebar,
    .resume-details {
        padding: 0;
    }

    .resume-sidebar {
        position: -webkit-sticky;
        position: sticky;
        top: 12rem;
        float:left;

    }

    .resume-details {
        max-width: 72ch;
        margin-left: 27rem;
    }

    .resume-sidebar img {
        width: 100%;
        max-width: 140px;
        margin-bottom: 4rem;
    }

    .resume-sidebar p {
        font-family: var(--header-font);
        font-size: 2em;
        margin-top: 0;
    }

    .resume-sidebar p span {
        display: block;
    }


    .resume-sidebar dt,
    .resume-sidebar dd {
        margin:0;
        padding: 0;
        float: none;
    }

    .resume-sidebar dd {
        margin-bottom: 2em;
    }

    .resume-sidebar a {
        text-decoration: none;
    }

    .resume-sidebar a.cta {
        color: var(--header-color);
    }

    .resume-details section {
        margin-bottom: 8rem;
    }

    .resume-details section header {
        position: -webkit-sticky;
        position: sticky;
        top: 5rem;
        background-color: var(--bg-color);
        padding-bottom: 1em;
        padding-top: .5em;
        z-index:10;
        border-bottom: 1px solid #d2d2d2;
    }

    @media (max-width: 600px) {
        .resume-details section header {
            margin: 0 calc(var(--base-padding) * -1);
            padding: .5em var(--base-padding) 1em;
        }
    }

    .resume-details section p {
        margin-top: 0;
    }


    @media (max-width: 600px) {
        .resume-sidebar {
            position: static;
            float: none;
            width: 100%;

            display: grid;
            grid-template-rows: repeat(2, 1fr);
            grid-template-columns: minmax(65px, 1fr) 5fr;
            grid-column-gap: 2rem;
            margin-bottom: 4rem;
        }
        .resume-sidebar img{
            margin: 0;
            grid-column: 1 / 2;
            grid-row: 1 / 3;
        }

        .resume-sidebar p {
            margin: 0;
            grid-row: 1 / 2;
            grid-column: 2 / 3;
        }
        .resume-sidebar p span {display: inline}

        .resume-sidebar dl {
            margin:0;
            grid-row: 2 / 3;
            grid-column: 2 / 3;
        }

        .resume-sidebar dt,
        .resume-sidebar dd {
            display: none;
        }

    /*     .resume-sidebar dt:last-of-type, */
        .resume-sidebar dd:last-of-type {
            display: inline-block;
        }

        .resume-details {
            margin-left: 0;
            max-width: 100%;
        }
    }


/* dl.table */

    dl.table {
        display: grid;
        grid-template-columns: repeat(3, min-content 1fr);
        grid-gap: 12px;

        --table-cell-bg-header: rgba(255,255,255,.4);
        --table-cell-bg: rgba(255,255,255,.9);
    }

    dl.table > dt {
        font-family: var(--header-font);
        font-weight: var(--font-weight-normal);
        color: var(--header-color);
        padding: .6rem;
        margin-bottom: 0;
        background: var(--table-cell-bg-header);
    }
    dl.table > dd {
        padding: .6rem;
        margin-bottom: 0;
        background: var(--table-cell-bg);
        margin-left: -12px;
    }


/*
    @media(min-width: 801px) {
        dl.table.headline {
           grid-template-columns: repeat(3, min-content 1fr);
        }

        dl.table.headline > dd:nth-of-type(1) {
            grid-column: span 5;
        }
    }
*/
    @media (max-width: 900px) {
        dl.table {
            grid-template-columns: repeat(2, min-content 1fr);
        }

    }


    @media (max-width: 650px) {
        dl.table {
            grid-template-columns: min-content 1fr;
        }
    }


    @media (max-width: 500px) {
        dl.table{
            grid-template-columns: 1fr;
            --table-cell-bg-header: rgba(255,255,255,.5);
            --table-cell-bg: rgba(255,255,255,.5);
            grid-gap: 0;
        }

        dl.table > dd  {
            margin-left: 0;
            margin-bottom: 1.2rem;
        }
    }


/* dl.grid     */

    dl.grid {
        display: grid;
        grid-template-columns: max-content 1fr;
        grid-row-gap: 2rem;
    }

    dl.grid > dt {
        font-weight: var(--font-weight-bold);
    }

    dl.grid > dd {
        margin-left: 1em;
        margin-bottom: 0;
    }


    dl.stared > dt::before {
        content:'\00ba';
        color: var(--header-color);
        padding-right: .35em;
        position: relative;
        top: .2em;
        left: 0;
    }


    @media (max-width: 450px) {
        dl.grid {
            grid-template-columns: 1fr;
            grid-row-gap: 0;
        }
        dl.grid > dd {
            margin-bottom: 1em;
            margin-left: 0;
        }

        dl.stared > dt {
            border-bottom: 1px solid var(--light-gray);
            width: max-content;
        }

        dl.stared > dt::before {
            content: '';
            padding: 0;
        }
    }


/*  div.examples */

    div.examples {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(18.3em, 1fr));
        grid-gap: 1.2rem;
        background: var(--bg-color);
    }

    div.examples-wide {
        grid-template-columns: repeat(2, 1fr);
    }

    @media (max-width: 900px) {
        div.examples-wide {
            grid-template-columns: repeat(auto-fit, minmax(17.3em, 1fr));
        }
    }

    div.examples .card {
        display: flex;
        flex-direction: column;
/*         box-shadow: 2px 2px 4px rgba(150,150,150, .3); */
    }

    div.examples .card img {
        width: 100%;
        border: 1px solid transparent;
    }

    div.examples .card h2 {
        margin: 0;
/*         background: rgba(255,255,255,.4); */
        background: linear-gradient(-135deg, transparent 0 .635em, rgba(255,255,255,.4) .635em 100%);
        padding: .35em;
/*         padding-left: .635em */

    }

    div.examples .card p {
       background: rgba(255,255,255,.7);
       margin: 0;
       padding: .6rem;
       height: 100%;
    }

    ul.examples {
        list-style-type: none;
        padding: .6rem;
        margin: 0;
        background: rgba(255,255,255,.7);

        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }

    ul.examples li {
        flex: 0 1 calc(50% - 12px);
    }

    ul.examples li a:hover {
        border-bottom-color: transparent !important;
    }

    ul.examples li a:hover img {
        border: 1px solid var(--link-end-color);
    }

/* ul.grid */

    ul.grid {
        font-size: .85em;
        padding-left: 0;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
        grid-row-gap: .8em;
        grid-column-gap: 1.35em;
    }

    ul.dotted {
        list-style-type: none;
        padding: 0;
    }

    ul.dotted li {
        margin-left: 1em;
        position: relative;
    }

    ul.dotted li::before {
        content: "\2022";
        color: var(--header-color);
        padding-right: .5em;
        margin-left: -1em;
    }


    /* generic tabs */

    .tabs {
        display: grid;
    }

    .tabs > .tab-control {
        display: none;
    }

    .tabs > .tab-control:checked + .tab-label {
        color: var(--active-color);
    }



/* video */

    .video {
        padding-top: 2em;
    }

    .video-fullwidth {
        width: 100%;
        max-width: var(--max-examples-width);
        margin: auto;
    }

    .video video {
        width: 100%;
    }

    .video figure {
        background: #fff4;
        padding: calc(var(--base-padding) / 2);
        margin: 0;
    }

    .video figcaption {
        font-size: .9em;
        color: var(--header-color);
/*
        background: #fff8;
        border-radius: .35em;
        padding: calc(var(--base-padding) / 3);
*/
        margin-top: calc(var(--base-padding) / 3);
    }


/* tab closer */

    .tab-close-control{
        display: none;
    }

    .tab-close-control + .tab-close-label::after {
        content: '\D7  Close';
        cursor: pointer;
        font-size: .8em;

        background-color: var(--dark-gray);
        padding: 0.2em 1em;
        color: white;
        border-radius: 1em;
        transition: all .5s;
    }

    .tab-close-control:checked + .tab-close-label::after {
        content:'';
        padding: 0;
        background-color: transparent;
    }

    .tabs-pic .tab-close-control + .tab-close-label {
        grid-row: -2;
        grid-column: 1 / -1;
        text-align: right;
        color: #666;
        transition: all .5s;
        margin: .75em 0;
    }

    .tabs-pic .tab-close-control:checked + .tab-close-label {
        margin: 0;
    }


/* picture displays */


    .tabs-pic {
        margin: 0;
        margin-bottom: calc(var(--base-padding) * 2);
    }

    .tabs-pic .tab{
        opacity: 0;
        max-height: 0;
        overflow: hidden;
    }

    .tabs-pic .tab-control:checked + .tab-label + .tab {
        opacity: 1;
        max-height: 100vh;
        overflow-y: auto;
    }

    .tabs-pic .tab-close-control:checked ~ .tab {
        transition: all .4s;
    }

    .tabs-pic {
        grid-template-rows: repeat(6, auto);
        grid-auto-rows: auto;
        grid-template-columns: repeat(6, 1fr);
        grid-column-gap: .8rem;
    }

    .tabs-pic.tabs-final-version {
        grid-template-columns: repeat(7, 1fr);
    }

    .tabs-pic .tab {
        grid-row: -1;
        grid-column: 1 / -1;
    }


    @media (max-width: 740px) {
        .tabs-pic,
        .tabs-pic.tabs-final-version {
            grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
        }

        .tabs-pic .tab-label {
            margin-top: .6rem;
        }
    }



    .tabs-pic img {
        width: 100%;
        display: block;
    }

    .tabs-pic .tab-control:checked + .tab-label + .tab img {
        border: 1px solid var(--light-gray);
    }

    .tabs-pic .tab-label {
        cursor: pointer;
        position: relative;
    }

    .tabs-pic .tab-label img {
        z-index: 1;
    }

    .tabs-pic .tab-label span {
        z-index: 2;

        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        left: 1em;
        top:  1em;

        background-color: #fff;
        font-size: .75em;
        width: 2em;
        height: 2em;
        border-radius: 1em;
        box-shadow: 1px 2px 7px 1px rgba(0,0,0,.4);

        transition: all .3s;
    }

    @media (max-width: 600px) {
        .tabs-pic .tab-label span {
            left: calc(50% - 1em);
            top: calc(50% - 1em);
        }
    }

    .tabs-pic .tab-label:hover span {
        color: var(--active-color);
    }

    .tabs-pic .tab-control:checked + .tab-label span {
        background-color: rgba(255,255,255, .92);
        border-radius: 0;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        box-shadow: 0 0 0 2px var(--active-color);
    }

    .tabs-pic .tab-label span::before {
/*         content:'Version \2003'; */
    }


    .tabs-pic.tabs-dark-mode .tab-label span,
    .tabs-pic.tabs-final-version .tab-label span,
    .tabs-pic.tabs-setup .tab-label span {
       background-color: #fff;
       border: 1px solid var(--dark-gray);
    }

    .tabs-pic.tabs-dark-mode .tab-label:hover span,
    .tabs-pic.tabs-final-version .tab-label:hover span,
    .tabs-pic.tabs-setup .tab-label:hover span {
       background-color: #fff;
       border-color: var(--active-color);
    }


    .tabs-pic.tabs-dark-mode .tab-control:checked + .tab-label span,
    .tabs-pic.tabs-final-version .tab-control:checked + .tab-label span,
    .tabs-pic.tabs-setup .tab-control:checked + .tab-label span {
       background-color: rgba(255,255,255, .4);
       border: transparent;
    }


    .tabs-pic.tabs-dark-mode .tab-label span::before,
    .tabs-pic.tabs-final-version .tab-label span::before,
    .tabs-pic.tabs-setup .tab-label span::before {
        content:'';
        border: 3px solid var(--dark-gray);
        border-radius: 1em;
        width: 1em;
        height: 1em;
        transition: all .3s;
    }

    .tabs-pic.tabs-dark-mode .tab-label:hover span::before,
    .tabs-pic.tabs-final-version .tab-label:hover span::before,
    .tabs-pic.tabs-setup .tab-label:hover span::before {
        border-color: var(--active-color);
    }

    .tabs-pic.tabs-dark-mode .tab-control:checked + .tab-label span::before,
    .tabs-pic.tabs-final-version .tab-control:checked + .tab-label span::before,
    .tabs-pic.tabs-setup .tab-control:checked + .tab-label span::before {
        border-radius: 0;
        border-color: transparent;
        width: 100%;
        height: 100%;
    }


    @media (max-width: 720px) {
       .tabs-pic .tab-label span::before {
/*             content:'Vrs. \2003'; */
        }

        .tabs-pic.tabs-final-version .tab-label span::before {
/*             content:'Ex. \2003'; */
        }
    }


    @media (max-width: 500px) {
       .tabs-pic .tab-label span {
            font-size: .7em
        }
    }




    .tabs-pic .description {
        background: rgba(255,255,255,.3);
        padding: .5em;
        margin-top: .5em;
        border: 1px solid var(--light-gray);
    }



    /* layout */
    .tabs-split {
        --col-tab-width: 100px;
        --grid-border-color: #555;

        border: 1px solid var(--grid-border-color);
        grid-template-rows: repeat(7, 1fr);
        grid-template-columns: var(--col-tab-width) 1fr;
        overflow: hidden;
    }

    .tabs-split .tab-label {
        grid-column: 1 / 2;
        position: relative;
        z-index: 3;
        display: flex;
        align-items: center;
        justify-content: center;

        cursor: pointer;
        border-bottom: 1px solid var(--grid-border-color);
        border-right: 1px solid var(--grid-border-color);
        background-color: #444;
        color: #ddd;
    }

    .tabs-split .tab-label::before {
        content: 'Version \a0';
    }


    .tabs-split .tab {
        grid-row: 1 / 8;
        grid-column: 2 / 3;
/*         min-height: 700px; */
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .tabs-split .tab video {
        width: 100%;
    }

    .tabs-split > .tab-control + .tab-label:hover {
        background-color: #333;
    }
    .tabs-split > .tab-control:checked + .tab-label {
        background-color: #222;
    }

    /* animation */
    .tabs-split .tab {
        position: relative;
        left: calc(-100% - var(--col-tab-width) - 12px);
        transition: left .75s;
        z-index: 1;
    }

    .tabs-split > .tab-control:checked + .tab-label + .tab {
        left: 0;
    }
    .tabs-split > .tab-control:checked ~ .tab {
        left: calc(100% + var(--col-tab-width) + 12px);
    }


    @media (max-width: 600px) {
        .tabs-split {
            grid-template-rows: auto 2em 1fr;
            grid-template-columns: repeat(7, 1fr);
        }

        .tabs-split .tab-label {
            grid-column: unset;
            grid-row: 2 / 3;
            font-size: .8em
        }

        .tabs-split .tab-label::before {
            content: 'V \a0';
        }

        .tabs-split .tab {
            grid-row: 1 / 2;
            grid-column: 1 / 8;
        }
    }

    @media (max-width: 400px) {
        .tabs-split .tab-label::before {
            content: '';
        }
    }


.example-section {
    position: relative;
}

.example-section::before {
    content: '\2026';
    position: absolute;
    top: -1em;
    left: calc(50% - .5em);
    font-size: 8rem;
    color: var(--nav-bg-color);
    opacity: .3;
}


/* templates on portfolio  */

.templates {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: var(--base-padding);

    width: 100%;
    max-width: var(--max-examples-width);
    margin: -1em auto 1em;
    padding-top: 1em;
    position: relative;
}

@media (max-width: 1148px) {
    .templates {
        margin-top: -2em;
    }
}


.templates > p {
    grid-row: 1;
    grid-column: 1 / -1;
    margin-bottom: 0;
}

.templates > div {
    padding: calc(var(--base-padding) / 2);

    display: flex;
    flex-direction: column;
    justify-content: flex-start;

    border: 1px solid;
    border-image-slice: 1;
    border-image-source: linear-gradient(to bottom right, var(--link-color), var(--link-end-color));
}

@media (max-width: 600px) {
    .templates {
        grid-template-columns: 1fr;
    }
}


.video-link {
    display: inline-block;
    border: 2px solid transparent;
    position: relative;
    z-index: 1;
    margin-bottom: 1em;
    align-self: center;
}

.video-link video {
    display: block;
    padding: 0;
    margin: 0;
}

.video-link:hover {
    text-decoration: none;
    border-color: transparent !important;
}

.video-link:hover::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;

    background: linear-gradient(to right, var(--link-color), var(--link-end-color));;
    opacity: .5;
    z-index: 2;
    width: 100%;
    height: 100%;
}


    /* test colors */

/*
    .tabs-split .tab:nth-of-type(1)  { background-color: #8df2f5 }
    .tabs-split .tab:nth-of-type(3)  { background-color: #99f56b }
    .tabs-split .tab:nth-of-type(5)  { background-color: #f5dd63 }
    .tabs-split .tab:nth-of-type(7)  { background-color: #8df2f5 }
    .tabs-split .tab:nth-of-type(9)  { background-color: #99f56b }
    .tabs-split .tab:nth-of-type(11) { background-color: #f5dd63 }
    .tabs-split .tab:nth-of-type(13) { background-color: #8df2f5 }
    .tabs-split .tab:nth-of-type(15) { background-color: #99f56b }
*/



    /* page-specific styles */


    body.resume {
    /*     --bg-color: #CBD3DE; */
    /*     --bg-color: #D3D9E0; */
    /*     --nav-bg-color: #445658; */
        --nav-bg-color: #444;
        --bg-color: #f1f1f1;
        --active-color: #F4A857;
        --logo-color: rgba(255,255,255, .75);
        --logo-color-hover: #fff;
        --logo-bg-color: rgba(0,0,0,.4);
        --logo-bg-color-hover: var(--nav-bg-color);
        --header-color: #F15A24;
        --nav-bg-large : url(../_img/large/bkg-03.jpg);
        --nav-bg-med   : url(../_img/med/bkg-03.jpg);
        --nav-bg-sm    : url(../_img/sm/bkg-03.jpg);

        --background-pos-y : -27vw;

        --link-color: var(--text-color);
        --link-start-color:  var(--active-color);
        --link-end-color: var(--header-color);
        --link-border-color: var(--link-start-color);
    }


    body.about {
    /*     --bg-color: #faebed; */
        --bg-color: #FAEDEF ;
        --logo-color: var(--bg-color);
        --nav-bg-color: #221936;
        --header-color: #412F69;
        --active-color: #ED8BA4;
        --logo-bg-color: rgba(0,0,0,0);
        --logo-bg-color-hover: var(--nav-bg-color);

        --text-color: var(--nav-bg-color);
        --nav-bg-large : url(../_img/large/bkg-07.jpg);
        --nav-bg-med   : url(../_img/med/bkg-07.jpg);
        --nav-bg-sm    : url(../_img/sm/bkg-07.jpg);

        --background-pos : center bottom -3vh;

        --link-color : #e1007d;
        --link-start-color:  var(--link-color);
        --link-end-color: var(--header-color);
        --link-border-color: var(--link-color);
    }


    body.portfolio {
    /*     --bg-color: #C9D3D2; */
    /*     --logo-color-hover: #0F1D1E; */
        --bg-color: #D3DBDA;
        --active-color: #EF7727;
        --logo-color: #2E4243;
        --logo-bg-color: rgba(255,255,255,.6);
        --nav-bg-color: var(--logo-color);
        --header-color: var(--logo-color);
        --nav-bg-large : url(../_img/large/bkg-02.jpg);
        --nav-bg-med   : url(../_img/med/bkg-02.jpg);
        --nav-bg-sm    : url(../_img/sm/bkg-02.jpg);
        --logo-bg-color-hover: var(--nav-bg-color);

        --subnav-bg-color: #2E3536;
        --subnav-color: #ccc;
        --subnav-color-hover: #fff;

        --link-color : #2677b5;
        --link-start-color:  var(--link-color);
        --link-end-color: #17b5bd;
        --link-border-color: var(--link-end-color);
    }
}

/*
.navbar { border:1px dotted purple}
.nav-link {border: 1px solid red}
.nav-link-icon {border: 1px solid blue}
*/