:root {
    /* color-scheme: light dark; */
    --step-0: clamp(1.125rem, 1.0815rem + 0.2174vw, 1.25rem);
    --step-1: clamp(1.35rem, 1.2761rem + 0.3696vw, 1.5625rem);
    --step-2: clamp(1.62rem, 1.5041rem + 0.5793vw, 1.9531rem);
    --step-3: clamp(1.9438rem, 1.7707rem + 0.8652vw, 2.4413rem);
    --step-4: clamp(2.3325rem, 2.0823rem + 1.2511vw, 3.0519rem);
    --step-5: clamp(2.7994rem, 2.4461rem + 1.7663vw, 3.815rem);
    --step-6: clamp(3.3594rem, 2.8694rem + 2.45vw, 4.7681rem);
    

    --space-s: clamp(1.125rem, 1.0815rem + 0.2174vw, 1.25rem);
    --space-m: clamp(1.6875rem, 1.6223rem + 0.3261vw, 1.875rem);
    --space-l: clamp(2.25rem, 2.163rem + 0.4348vw, 2.5rem);
    --space-xl: clamp(3.375rem, 3.2446rem + 0.6522vw, 3.75rem);
    --space-2xl: clamp(4.5rem, 4.3261rem + 0.8696vw, 5rem);
    --space-3xl: clamp(6.75rem, 6.4891rem + 1.3043vw, 7.5rem);

    /* One-up pairs */
    --space-s-m: clamp(1.125rem, 0.8641rem + 1.3043vw, 1.875rem);
    --space-m-l: clamp(1.6875rem, 1.4049rem + 1.413vw, 2.5rem);
    --space-l-xl: clamp(2.25rem, 1.7283rem + 2.6087vw, 3.75rem);
    --space-xl-2xl: clamp(3.375rem, 2.8098rem + 2.8261vw, 5rem);
    --space-2xl-3xl: clamp(4.5rem, 3.4565rem + 5.2174vw, 7.5rem);

    /* Custom pairs */
    --space-s-l: clamp(1.125rem, 0.6467rem + 2.3913vw, 2.5rem);
}
html {
    background: #ffffff url("/gfx/bg7.jpg") repeat center;
    background-size: 100% auto;

    /* background-image:
        radial-gradient(#212121 2%, transparent 2%);
    background-color: #fff;
    background-position: 0 0, 50px 50px;
    background-size: 100px 100px;
    height: 200px;
    width: 100%; */
}
body {    
    font: 400 var(--step-0) / 1.6 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    padding: 0 var(--space-s) var(--space-s);
    background-color: #ffffffea;
}

a[href="#maincontent"] {
    background: #fff;
    color: #333 !important;
    font-weight: 700;
    padding: 4px;
    position: absolute;
    transform: translateY(-300%);
}
a[href="#maincontent"]:focus {
    transform: translateY(0%);
}
h1,
h2,
h3,
h4 {
    font-weight: 900;
    line-height: 1.2;
    margin: 0.5em 0;
}
h1 {
    font-size: var(--step-5);
}
h2 {
    font-size: var(--step-4);
}
h3 {
    font-size: var(--step-3);
}
h4 {
    font-size: var(--step-2);
}

img {
    border-radius: .5rem;
}

/* header */
header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .8rem;
}
header,
section {
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid #ccc;
}
section:last-child {
    border-bottom: 0;
}

body > header > h1:has(a) {
    font-size: calc(2em + (11.25 - 2) * ((100vw - 20em) / (600 - 20)));
}
header h1 {
    align-items: center;
}
header nav {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-evenly;
    gap: 1rem;
    margin: 0 .5rem;
    width: 100%;
}

header p {    
    text-align: center;
    display: flex;
    flex-direction: column;
    max-width: 60ch;
    gap: 1rem;       
}

/* footer */
footer {
    border-top: 3px solid #ccc;
    padding-top: 1rem;
}
footer,
footer nav {
    display: flex;
    flex-direction: column;
    text-align: center;
    gap: .5rem;
}
footer p {
    order: 1;
}

/* resume */
.resume main {
    display: flex;
    flex-direction: column;
}
.resume .aside {
    order: 2;
}
.resume .aside h2 {
    font-size: var(--step-1);
}
.resume .aside dl {
    display: grid;
    grid-template-columns: .5fr 1fr;
}
.resume .aside dt {
    font-weight: bold;
    padding-right: .8rem;
}
.resume .aside dd {
    text-wrap: pretty;
    word-break: break-all;
}
.resume .content {    
    order: 1;
}
 .resume .content article {
     margin-bottom: var(--space-l-xl);
 }
 .resume .wrapper.grid h5 {     
     font-size: var(--step-0);
     margin: 0 auto;
 }
 .resume .wrapper.grid ul {     
     list-style-type: disc;
     margin-top: .5rem;
 }

/* utilities */
article > * + *,
section >  * + *  {
    margin-top: var(--flow-space, 1em)
}

/* buttons */
.btn {
    font-size: 1.2rem;
    color: #141414;
    border: 1px solid #000;
    border-radius: .5rem;
    margin: 1rem 0;
    padding: 1rem 2rem;
    align-self: center;
    background-color: #000;
}
.btn:link,
.btn:visited {
    color: #fff;
    text-decoration: none;    
}
.btn:hover,
.btn:focus,
.btn:active {
    font-weight: bold;
    color: #000;
    background-color: #fff;
    text-decoration: underline;
}

.btn.red {
    background-color: red;
}
.btn.red:link,
.btn.red:visited {
    color: #fff;
}
.btn.red:hover,
.btn.red:focus,
.btn.red:active {
    font-weight: bold;    
    text-decoration: underline;
}

.btn.blue {
    background-color: rgb(62, 62, 176);
}
.btn.blue:link,
.btn.blue:visited {
    color: #fff;
}
.btn.blue:hover,
.btn.blue:focus,
.btn.blue:active {
    font-weight: bold;
    color: #fff;
    text-decoration: underline;
}

.btn.peach {
    font-weight: bold;
    color: #333;
    background-color: peachpuff;
}
.btn.peach:link,
.btn.peach:visited {
    color: #000;
}
.btn.peach:hover,
.btn.peach:focus,
.btn.peach:active {    
    color: #000;
    text-decoration: underline;
}


.centered-flex {
    display: flex;
    align-items: center;
    justify-content: center;
}
.centered-item {
    margin-left: auto;
    margin-right: auto;
}


.bold {
    font-weight: bold;
}

.emphasize {
    font-weight: bold;
    text-transform: uppercase;
}

/* grid setup */
.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--space-s);
}
.grid.grid-center {
    justify-items: center;
}

/* stack setup */
.stack {
    display: flex;
    flex-flow: column;
    margin: var(--space-l) var(--space-s);
}

/* margin styles */
.mt-0 {
    margin-top: 0;
}
.mt--5 {
    margin-top: .5em;
}
.mt-1 {
    margin-top: 1rem;
}
.mt-2 {
    margin-top: 2rem;
}
.mt-3 {
    margin-top: 3rem;
}
.mb-0 {
    margin-bottom: 0;
}
.mb-1 {
    margin-bottom: 1rem;
}
.mb-2 {
    margin-bottom: 2rem;
}
.mb-3 {
    margin-bottom: 3rem;
}
.w-300 {
    width: 300px;
}

.rounded-0 {
    border-radius: .5rem;
}
.rounded-1 {
    border-top-left-radius: .5rem;
}
.rounded-2 {
    border-top-right-radius: .5rem;
}
.rounded-3 {
    border-bottom-left-radius: .5rem;
}
.rounded-4 {
    border-bottom-right-radius: .5rem;
}

.thumbnail-title {    
    text-align: center;
    height: 3lh;
    display: flex;
    align-items: center;
    justify-content: center;
}
.thumbnail-caption {
    padding: 1rem;
}

/* media queries */
@media screen and (min-width: 840px) {
    .resume #maincontent {
        padding-top: 1rem;
        display: grid;
        grid-template-columns: 33.334% 66.667%;
        /* gap: var(--space-xl); */
        justify-content: space-between;
    }
    .resume .aside {
        order: 1;
    }   
    .resume .aside section {
        margin: var(--space-l) 0;
        padding-bottom: var(--space-l);
        border-color: #ccc;
    }
    .resume .aside section:first-child {
        margin-top: 0;
    }
    .resume .aside .bio h2 {
        padding-top: var(--space-s);
    }    
    .resume .content {
        padding-left: var(--space-xl);
    }
    .resume .content > h2 {
        margin-top: 0;
        padding-top: 0;
    }

    /* .stack *:not(h2) { */
    .blog .stack *:is( p ):not(h2) {        
        margin: var(--space-s) var(--space-3xl);
    }
     
}
@media screen and (min-width: 1065px) {
    body {
        max-width: 1240px;
        margin: 0 auto;
    }
}