:root {
    /* custom properties a.k.a. variables */

        /* fonts */
    
            /* family */

            --ff-primary: Raleway, 'Open Sans', Arial, 'Helvetica Neue', Helvetica, sans-serif;
            --ff-secondary: 'Permanent Marker', Raleway, 'Open Sans', Arial, 'Helvetica Neue', Helvetica, sans-serif;

            /* size */

            --fsz-arrow: /* 48px */ 3rem;
            --fsz-hero__n1:  /* 44px */ 2.75rem;
            --fsz-intro: /* 32px */ 2rem;
            --fsz-hero__n2: /* 30px */ 1.875rem;
            --fsz-js: /* 28px */ 1.75rem;
            --fsz-btn:  /* 24px */ 1.5rem;
            --fsz-h__p:  /* 23px */ 1.4375rem;
            --fsz-ctgry:  /* 21px */ 1.3125rem;
            --fsz-p:  /* 20px */ 1.25rem;
            --fsz-tools:  /* 18px */ 1.125rem;
            --fsz-a-extrnl:  /* 18px */ 1.125rem;
            --fsz-type:  /* 16px */ 1rem;
            --fsz-navItm:  /* 14px */ 0.875rem;

            /* weight */

            --fw-reg:  /* Regular */ 400;
            --fw-med:  /* Medium */ 500;
            --fw-bld:  /* Bold */ 700;
            --fw-blk:  /* Black */ 900;

            /* style */

            --fst-type: italic;

            /* transform */

            --tt-nav: uppercase;

            /* decoration */

            --td-a-extrnl: underline;

        /* colors */

            --navbar: #fff; --card: var(--navbar); --text: #1a1a1a;
            --navItem: #333;
            --spanHover: #33c;
            --defaultState: #2b1e59;
            --hoverState: #3e328c;
            --activeState: #f2913d;
            --focusState: #;
            --footer: rgba(51, 51, 51, 0.1);
            --animated-cursor: /* #2b1e59 */ rgba(43, 30, 89, 1);
            --borderLeft: 1px solid rgba(0, 0, 0, 0.1);
            --invisible: rgba(255, 255, 255, 0);
        
        /* gradients */

            --gradFooter: linear-gradient(to right, var(--footer), var(--invisible));
            --hero: linear-gradient(to bottom right, #66f2ca, #f7eabf);

        /* background-images */

            --imgResume: url(/images/resume/resume.svg);
            --imgButton: url(/images/exported/button.svg) center/contain no-repeat;
            --imgButton-hover: url(/images/exported/button-hover.svg) center/contain no-repeat;
            --imgButton-active: url(/images/exported/button-active.svg) center/contain no-repeat;
            --mixBlend: multiply;

        /* shadows */

            --navItem_tShadow: 1px 1px 2px #bfbfbf;
            --js_tShadow: 1px 2px 2px #66f2ca;
            --card_bInnerShadow: inset 1px 2px 4px rgba(80, 80, 80, 0.25);
            --card_bShadow: 1px 2px 4px rgba(191, 191, 191, 0.5);

    /* !end! custom properties a.k.a. variables */

    font-family: var(--ff-primary);
    font-size: 100%;
}

.darkmode {
    /* colors */

    --navbar: #1a1a1a; --card: var(--navbar); --text: #fff;
    --navItem: #f2f2f2;
    --spanHover: #3f9fff;
    --defaultState: #9474b2;
    --hoverState: #bb9ae5;
    --activeState: #66f2ca;
    --focusState: #;
    --footer: rgba(204, 204, 204, 0.1);
    --animated-cursor: /* #29474b2 */ rgba(148, 116, 178, 1);
    --borderLeft: 1px solid rgba(255, 255, 255, 0.1);

    /* gradients */

    --gradFooter: linear-gradient(to right, var(--footer), var(--invisible));
    --hero: linear-gradient(to bottom right, #101740, #372773);

    /* shadows */

    --navItem_tShadow: 0 2px 5px rgba(255, 255, 255, 0.33);
    --js_tShadow: 1px 2px 2px #347A66;
    --card_bInnerShadow: inset 2px 3px 6px rgba(145, 145, 145, 0.25);
    --card_bShadow: 0 3px 6px rgba(255, 255, 255, 0.1);

    /* background-images */

    --imgResume: url(/images/resume/resume-dark.svg);
    --imgButton: url(/images/exported/dark/button-dark.svg) center/contain no-repeat;
    --imgButton-hover: url(/images/exported/dark/button-dark-hover.svg) center/contain no-repeat;
    --imgButton-active: url(/images/exported/dark/button-dark-active.svg) center/contain no-repeat;
    --mixBlend: screen;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    position: relative;
    height: 100vh;
    overflow-x: hidden;
    width: 100vw;
    margin-right: calc(100vw - 100%);
}

body::-webkit-scrollbar {
    width: 10px;
}

body::-webkit-scrollbar-track {
    background: #333;
}

body::-webkit-scrollbar-thumb {
    background: #c3c3c3;
}

body::-webkit-scrollbar-thumb:hover {
    background: #949494;
}

body::-webkit-scrollbar-thumb:active {
    background: #666666;
}

nav {
    width: 100%;
    height: 2.75rem;
    background-color: var(--navbar);
    box-shadow: var(--card_bShadow);
    position: sticky;
    top: 0;
    z-index: 1;
}
 
nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: row;
    justify-content: center;
}
 
nav ul li a {
    display: flex;
    align-items: center;
    justify-items: center;
    height: 2.75rem;
    text-decoration: none;
    font-weight: var(--fw-blk);
}
 
nav ul li a span {
    margin: 0 1rem;
    font-size: 0.875rem;
    text-transform: uppercase;
    color: var(--navItem);
    border-top: 0.9375rem solid var(--invisible);
    border-bottom: 0.9375rem solid var(--invisible);
    transform: translateY(0.1171875rem);
}
 
nav ul li a span:hover {
    color: var(--spanHover);
}
 
nav ul li a span:active {
    color: var(--navItem);
    border-bottom: 0.5859375rem solid rgba(255, 255, 255, 0);
    box-shadow: 0 0.234375rem 0 0 var(--activeState);
    transform: translateY(-0.05859375rem);
}
 
#sumner {
    font-family: var(--ff-secondary);
    font-size: 1.75rem;
    text-transform: uppercase;
    color: var(--defaultState);
    text-shadow: var(--js_tShadow);
    border-bottom: none;
    box-shadow: none;
    transform: translateY(-0.470703125rem);
}
 
#sumner:hover {
    color: var(--spanHover);
}
 
#sumner:active {
    color: var(--navItem);
    text-shadow: 1px 2px 2px var(--activeState);
}

.dark-mode-toggle {
    fill: var(--defaultState);
    width: 2rem;
    height: 2rem;
    position: fixed;
    top: calc(2.75rem + 3rem);
    right: calc(2.75rem + 1.5rem);
    padding: 0.25rem;
    background: var(--invisible);
    border: 1px solid var(--defaultState);
    border-radius: 4px;
}

.dark-mode-toggle:hover {
    fill: var(--hoverState);
    background: var(--invisible);
    border: 2px solid var(--hoverState);
}

.dark-mode-toggle:active {
    fill: var(--navbar);
    background: var(--text);
    border: 3px solid var(--text);
}

.inner {
    height: fit-content;
    height: -moz-fit-content;
}

footer {
    position: absolute;
    bottom: 0;
    left: 0;
    display: flex;
    width: calc(50% - 3rem + 1.5rem);
    /* width: fit-content;
    width: -moz-fit-content; */
    height: calc(var(--fsz-type) + (0.5rem * 2));
    background: var(--gradFooter);
    padding: 0.5rem 3rem;
    font-size: var(--fsz-type);
    font-weight: var(--fw-med);
    flex-wrap: nowrap;
    align-items: center;
    color: var(--text);
}