@font-face {
    font-family: "FontAwesomeBrands";
    font-weight: normal;
    font-style : normal;
           src : url("assets/fonts/fa-brands-400.woff2");
}
@font-face {
    font-family: "FontAwesome";
    font-weight: normal;
    font-style : normal;
           src : url("assets/fonts/fa-solid-900.woff2");
}

@font-face {
    font-family: "FonoCompressed";
    font-weight: normal;
    font-style : normal;
           src : url("assets/fonts/fono-compressed.woff");
}

@font-face {
    font-family: "ArchivoNarrow";
    font-weight: normal;
    font-style : normal;
           src : url("assets/fonts/ArchivoNarrow-VariableFont_wght.ttf");
}

@font-face {
    font-family: "ArchivoNarrow";
    font-weight: normal;
    font-style : italic;
           src : url("assets/fonts/ArchivoNarrow-Italic-VariableFont_wght.ttf");
}

:root {
    --brand: rgb(35,169,225);

    --titletextcolor: rgb(35,31,32);
    --focustextcolor: black;
    --keywordtextcolor: rgb(64,64,64);
    --descriptiontextcolor: rgb(103,103,103);

    --bullets: rgb(147,149,152);

    --sectionh1color: var(--brand);
}

/* design elements */
:root {
    --left-colum-width: 1.5in;
    --triangle-size: .875in;
    --fastfcolor: rgb(147,149,152);
}

/* reset a bunch of semantic elements */
h1,h2,h3,h4,h5,h6,p {
    display: inline-block;
    margin: 0;
}

address {
    font-style: normal;
}

/* default font settings */
:root {
    font-family: ArchivoNarrow, sans-serif;
    font-style: normal;
    font-size: 10pt;
}

/* main grid layout */

body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 1.25in .5in fit-content(10in) 1in minmax(0, 1fr);
    grid-template-rows: minmax(0, .25in) 1.5in max-content 1in;
    column-gap: 0;
    grid-template-areas:
        ". title . . . ."
        ". title . main . ."
        ". contact . main . ."
        ". . . . . . ";
    margin: 0;
    min-height: 100vh;
    height: 200vh;
}

header {
    grid-area: title;
    position:relative;
    height: 100%;
    width: 100%;
}
header > * {
    display: none;
}

#contact {
    grid-area: contact;
}

main {
    grid-area: main;
}





ul { 
    padding: 0;
}

aside > h1 {
    margin-left: .5em;
}

h1 {
    display: block;
    color: var(--sectionh1color);
    line-height: 1;
    font-size: 1.66667em;
    font-weight: 100;
    font-family: FonoCompressed;
    font-variant: small-caps;
    margin: 0;
}

h2 {
    color: var(--keywordtextcolor);
    line-height: 1em;
    font-size: 1em;
}


section > p {
    color: var(--descriptiontextcolor);
    font-size: 1em;
    font-style: italic;
    margin: 0;
    margin-bottom: .5em;
}

/* default main */

main {
    min-width: 2in;
    max-width: 19in;
}

main > section {
    width: 100%;
}

main > section > p, main > section > section {
    min-width: 4in;
    max-width: 6in;
}

/* flex subsections */

main > section {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-start;
}

main > section > *:not(section) {
    width: 100%;
}

main > section > section {
    margin-top: 5px;
    flex: 1;
    flex-grow: 1;
    /* box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14),
                          0 1px 5px 0 rgba(0,0,0,0.12),
                          0 3px 1px -2px rgba(0,0,0,0.2); */
}

/* default grid */
main > section > section {
    display: grid;
    padding: 0;
    grid-template-columns: .5em repeat(2, fit-content(0)) 1fr .5em;
    grid-template-rows: repeat(4, fit-content(100%));
    width: fit-content;
    margin-bottom: 1em;
}

main > section > section > * {
    display: inline-block;
    justify-self: start;
    align-self: start;
}

main > section > section > h2 {
    white-space: nowrap;
}
main > section > section > span,
main > section > section > ul {
    color: var(--descriptiontextcolor);
    font-size: 1em;
    line-height: 1;
    white-space: nowrap;
}

main > section > section > p {
    line-height: 1.5;
    margin: .25em 0 .25em 0;
    grid-area: desc;
}

/* cute animated section highlighting */
main > section * {
    transition: color 450ms linear;
}

main > section > section:hover *,
main > section > section:hover > h2 {
    color: var(--focustextcolor)
}

/* summary */

#summary > p {
    font-size: 1.2em;
    color: var(--keywordtextcolor);
}

/* professional-experience grid */
#professional-experience > section {
    grid-template-areas: 
        "position position doe . ."
        ". company company company ."
        ". desc desc desc ."
        ". skills skills skills .";
}

#professional-experience > section > h2 {
    grid-area: position;
}
#professional-experience > section > .dates-of-employment {
    display: inline-block;
}
#professional-experience > section > address {
    grid-area: company;
}

#professional-experience > section > ul {
    display: inline-block;
    grid-area: skills;
}

/* professional experience formatting */

#professional-experience > section > .dates-of-employment::before {
    content: "\2014";
    padding: 0 .125em;
}

#professional-experience > section > address {
    white-space: nowrap;
    color: var(--keywordtextcolor);
    font-size: 1em;
}

#professional-experience > section > address > a {
    text-decoration: none;
    color: var(--keywordtextcolor);
}
#professional-experience > section > address > a::before {
    content: " - "
}
#professional-experience > section:hover > address > a {
    color: var(--focustextcolor);
}


#professional-experience > section > ul li { list-style: none ; display: inline-block;}
#professional-experience > section > ul li:last-child::after { content: none;}
#professional-experience > section >  ul li::after {
    color:  var(--bullets);
    content: " \2022";
}

#professional-experience > section > ul {
    color: var(--keywordtextcolor);
    font-size: 1em;
    height: 1.2em;
    width: 100%;
    line-height: 1;
    overflow-x: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    margin: 0;
}

/* interests grid */
#interests > section {
    grid-template-areas: 
        "interest interest loc loc ."
        ". desc desc desc .";
}

#interests > section > h2 {
    grid-area: interest;
}
#interests > section > ul {
    display: inline-block;
    grid-area: loc;
    justify-self: start;
    align-self: start;
}

/* interests formatting */

#interests > section > ul li { list-style: none ; display: inline;}
#interests > section > ul li:last-child::after { content: none;}
#interests > section > ul li::after {
    color:  var(--bullets);
    content: " \2022";
}
#interests > section > ul::before {
    font-size: 1em;
    line-height: 1;
    color:  var(--bullets);
    content: "\2022" ;
    padding: 0 0 0 .3em;
}

#interests > section > ul {
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0;
}

/* professional-experience grid */
#education > section {
    grid-template-areas: 
        "school school . . ."
        ". degree degree degree ."
        ". . . . ."
        ". . . . .";
}

#education > section > h2 {
    grid-area: school;
}

#education > section > .degree {
    grid-area: degree;
}

/* contact block */
#contact > address .name {
    display: none;
}

#contact > address > * {
    display: block;
    text-align: right;
    margin-bottom: .5em;
}

#contact > address > a {
    text-decoration: none;
    color: var(--keywordtextcolor);
}


/* contact icons */
#contact > address > .phone::after {
    margin-left: .25em;
    content: "\f095";
    font-family: FontAwesome;
    font-style: normal;
    display: inline-block;
    color: var(--brand);
}
#contact > address > .email::after {
    margin-left: .25em;
    content: "\f0e0";
    font-family: FontAwesome;
    font-style: normal;
    display: inline-block;
    color: var(--brand);
}
#contact > address > .github::after {
    margin-left: .25em;
    content: "\f09b";
    font-family: FontAwesomeBrands;
    font-style: normal;
    display: inline-block;
    color: var(--brand);
}

/* header settings */
header > h1 {
    font-size: .5in;
    line-height: .9;
    font-weight: 100;
    color: var(--titletextcolor);
    font-family: FonoCompressed;
    text-align: right;
    word-spacing: 100vw;
    display: block;
    position: absolute;
    top: .7in;
    right: 0;
}

header::before {
    grid-area: title;
    position: absolute;
    top: 0;
    left: 0;
    content: "";
    width: 100%;
    height: 100%;
    justify-content: start;
    align-items: start;
    background: url(export.svg#triangle) no-repeat top 0 left 0 / var(--triangle-size) var(--triangle-size);
}

/* fastf */
:root{
    --fastf-height: 41pt;
    --fastf-width: 35pt;
    --fastf-right-margin: 0pt;
    --fastf-bottom-margin: 15pt;
}

#resume * {
    z-index: 3;
}


#resume::before {
    z-index: 2;
    content: "";
    grid-row-start: 1;
    grid-row-end: 6;

    grid-column-start: 1;
    grid-column-end: 6;
    width: 100%;
    height: 100%;
    background:
    url(./export.svg#fastf) no-repeat bottom var(--fastf-bottom-margin) right var(--fastf-right-margin) / .513in .625in,
    url(./export.svg#vert) repeat-y bottom 0 right var(--fastf-right-margin) / .513in .625in
        ;
}

#resume {
    z-index: 1;
    width: 100%;
    height: 100%;
    background:
        url(./export.svg#horiz) repeat-x bottom var(--fastf-bottom-margin) right 0 / .513in .625in;
}


/* size rewrite */
@media screen and (max-width:8in) {
    #resume::before {
        background:
        url(./export.svg#fastf) no-repeat bottom var(--fastf-bottom-margin) right var(--fastf-right-margin) / .513in .625in;
    }
    header > h1 {
        top: auto;
        bottom: 0;
    }
}

/* size rewrite */
@media screen and (max-width:8in) {
    body {
        grid-template-columns: minmax(.0625in, .125in) minmax(1.8125in, 2.125in) fit-content(100%) minmax(.0625in, .125in);
        grid-template-rows: 1in 1.25in 1fr 1.5in;
        column-gap: 0;
        grid-template-areas:
            "title title contact ."
            ". main main ."
            ". main main ."
            ". . . . ";
        margin: 0;
        min-height: 100vh;
    }
    aside > h1 {
        display: none;
    }
    aside {
        align-self: end;
        justify-self: end;
    }
    header > h1 {
        word-spacing: normal;
        margin: 0
    } 
    main > section > section {
        min-width: 2in;
        max-width: 100%;
    }

    main > section > section {
        flex-basis: 100%;
    }
}

@page {
    margin: 0
}
  
@media print {
    main > section > section {
        flex-basis: 100%;
    }
    /* :root{
        font-size: 8pt;
    } */

    body {
        display: grid;
        grid-template-columns: .125in 1.25in .35in fit-content(100%) 1in .25in;
        grid-template-rows: .125in .25in 1.5in calc(100vh - 2.875in) 1in;
        column-gap: 0;
        grid-template-areas:
            ". . . . . ."
            ". title . . . ."
            ". title . main . ."
            ". contact . main . ."
            ". . . . . . ";
        margin: 0;
        min-height: 100vh;
    }
    main > section > section {
        page-break-inside: avoid;
        margin-top: 0;

    }

    #interests > section > section:hover li,
    main > section > section:hover p {
        color: var(--descriptiontextcolor);

    }
    main > section > section:hover li,
    main > section > section:hover span,
    #professional-experience > section:hover > address > a  {
        color: var(--keywordtextcolor);

    }
    main > section > section:hover > h2 {
        color: var(--titletextcolor);
    }

}