/*
This is the rough structure of the HTML:

body
    #menu
    article#page-1
        header#header-1
        div#name-box
            div#main-name-box
            div#mobile-name-box
        div#skills-summary
        div#page-1-experience
        footer#footer-1
    div#page-break
    article#page-2
        header#header-2
        div#page-2-experience
        footer#footer-2

For mobile-first: .not-mobile elements have display: none by default.  This includes footer-1, header-2, page-break, and main-name-box

There are three layouts: mobile, small, and large-enough.
    Mobile is one continually scrolling page, and the others are presented as a traditional two-page resume.
    Small is when the page is rather narrow and some things need to be adjusted to fit well.
    Large-enough is when the page is wide enough to fit everything without adjustment in an 8.5x11 format.
*/
.qa-version div.for-qa-version {
    display: block;
}
.qa-version tr.for-qa-version {
    display: table-row;
}
.standard-version div.for-standard-version {
    display: block;
}
.standard-version tr.for-standard-version {
    display: table-row;
}
.for-qa-version,
.for-standard-version {
    display: none;
}

* {
    box-sizing: border-box;
}

/* 'luxurious' sans font */
@font-face {
    font-family: 'Josefin Sans';
    src: url('JosefinSans.eot');
    src: url('JosefinSans.eot?#iefix') format('embedded-opentype'),
        url('JosefinSans.woff2') format('woff2'),
        url('JosefinSans.woff') format('woff'),
        url('JosefinSans.ttf') format('truetype'),
        url('JosefinSans.svg#JosefinSans') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* Parameterize some variables */
:root {
    --header-height: 29px;
    --footer-height: var(--header-height);
    font-size: 14px;
    --main-name-box-height: 8rem;
}

/* html/body, full height, stack all the content in a flexy centered column with our luxurious font */
html {
    height: 100%;
}
body {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    height: 100%;
    margin: 0 10px;
    padding: 0;
    font-family: 'Josefin Sans', sans-serif;
    align-items: center;
    background-color: #190101;
}

/* Change some default styles */
h1 {
    margin: 0;
}
h3 {
    margin-bottom: 0;
}
a {
    font-size: 1.2em;
    text-decoration: none;
    color: darkslategray;
    font-weight: bolder;
}
a:visited {
    text-decoration: none;
    color: black;
}
.italics {
    font-style: italic;
}
.bold {
    font-weight: bold;
}
table {
    width: 80%;
}
td {
    width: 33%;
}
/* Menu */
#menu {
    position: fixed;
    top: 0;
    left: 0;
    width: max(10svw, 100px);
    height: var(--header-height);
    background-color: black;
    border-radius: 0 0 10px 10px;
    color: lightgray;
    z-index: 1000;
}

/* "article" is used for each page of the resume, using Grid to lay out the content. Media queries are used to change the layout */
article {
    max-width: 850px;
    display: grid;
    background-color: white;
    padding-left: 10px;
    padding-right: 10px;
}

/* Mobile pages
stack everything vertically.
There is no footer-1 or header-2
*/
.not-mobile {
    display: none;
}
#page-1 {
    grid-template-areas:
        "header-1"
        "name-box"
        "skills-summary"
        "page-1-experience"
    ;
    grid-template-rows: var(--header-height) calc(var(--main-name-box-height)+20px) auto auto;
}
#page-2 {
    grid-template-areas:
        "page-2-experience"
        "footer-2"
    ;
    grid-template-rows: auto var(--footer-height);
}

/* Header and footer, set the height, fill, and grid/display properties */
header {
    background-color: lightgray;
    width: 100%;
    height: var(--header-height);
    min-height: var(--header-height);
}
#header-1 {
    grid-area: header-1;
}
#header-2 {
    grid-area: header-2;
}
footer {
    width: 100%;
    height: var(--footer-height);
    min-height: var(--footer-height);
    background-color: darkgray;
}
#footer-1 {
    grid-area: footer-1;
}
#footer-2 {
    grid-area: footer-2;
}


/* Name boxes
#name-box
    #main-name-box
        #main-name
        #main-slash
        #main-details
            div
            div
            #main-email
    #mobile-name-box
        #mobile-name
        #mobile-summary
            #mobile-details
                div
                div
            #mobile-slash
            #mobile-email
*/
#name-box {
    grid-area: name-box;
    padding: 20px 20px 10px 20px;
}
#main-name-box > * {
    height: var(--main-name-box-height);
    margin: 0;
}
#main-summary {
    text-align: right;
}
#main-details {
    font-size: 1.95em;
    align-content: center;
}
#main-email {
    font-size: 0.8em;
}
#main-name {
    font-size: 4em;
    line-height: var(--main-name-box-height);
}
#main-slash {
    font-size: 7em;
    font-weight: 50;
}
#mobile-name-box {
    font-size: min(1.4em, 4.77vw);
    text-align: center;
    /* display: flex; */
}
#mobile-name {
    font-size: 2em;
}
#mobile-summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
#mobile-details {
    text-align: left;
}
#mobile-slash {
    font: 3em sans-serif;
    font-weight: 100;
}


/* Skills summary 
    A flexbox element with divs of the summary items - the skill bars and project links
    row by default, column on larger screens
*/
#skills-summary { 
    grid-area: skills-summary;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    flex-basis: content;
}
#skills-summary > div > ul {
    padding: 0px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
#skills-summary > div > ul > li {
    width: 100%;
    list-style-type: none;
    margin-bottom: 5px;
}
.skill-bar-container {
    border-radius: 0.5em;
    height: 0.6em;
    background-color: darkgray;
}
span.skill-bar-container {
    width: 60px;
    display: inline-block;
    margin-right: 1em;
}
.skill-bar {
    border-radius: inherit;
    background-color: darkslategray;
    height: 100%;
}
#skills-summary > div {
    text-align: center;
}


/* Experience 
    Set the grid areas
    Use a more normal font
    Create the experience header blocks: flex row of two flex columns, space-between to push them out to the ends, bold job titles
*/
#page-1-experience {
    grid-area: page-1-experience;
    font-family: sans-serif;
}
#page-2-experience {
    grid-area: page-2-experience;
    font-family: sans-serif;
}
#experience {
    grid-area: experience;
    font-family: sans-serif;
}
.experience-header {
    display: flex;
    justify-content: space-between;
}
.experience-title-and-company
.experience-date-and-location {
    display: flex;
    flex-direction: column;
}
.experience-date-and-location {
    text-align: right;
}
.experience-title {
    font-size: 1.1em;
    font-weight: bold;
    color: darkslategray;
}
.coop-company-name {
    padding-left: 15px;
}

/*** Layouts ***/

/* Styles for small and large-enough screens (>666px) */
@media print,
screen and (min-width: 666px) {
    /* Get rid of body margin */
    body {
        margin: 0;
    }

    /* Add whitespace to experience sections */
    .experience {
        padding: 0 10px 0 15px;
    }
    .experience-block {
        margin-bottom: 30px;
    }
    
    /* Switch to "main" name box */
    div#main-name-box {
        display: flex;
        justify-content: space-between;
        height: var(--main-name-box-height);
        margin: 0;
    }
    div#mobile-name-box {
        display: none;
    }

    /* Show footer-1 and header-2 */
    footer#footer-1 {
        display: block;
    }
    header#header-2 {
        display: block;
    }

    /* Add page break */
    #page-break {
        display: block;
        height: 100px;
        min-height: 100px;
    }

    /* Make skills-summary a column */
    div#skills-summary {
        flex-direction: column;
        justify-content: start;
    }
    #skills-summary > div > ul > li {
        width: 80%;
        margin-bottom: 7px;
        text-align: left;
    }

    /* Full grid layout */
    #page-1 {
        grid-template-areas:
            "header-1 header-1"
            "name-box name-box"
            "skills-summary page-1-experience"
            "skills-summary page-1-experience"
            "footer-1 footer-1"
        ;
        grid-template-rows: var(--header-height) var(--main-name-box-height) auto auto var(--footer-height);
    }
    #page-2 {
        grid-template-areas:
            "header-2"
            "page-2-experience"
            "footer-2"
        ;
        grid-template-rows: var(--header-height) auto var(--footer-height);
    }
}
@media print {
    #page-break {
        display: none;
    }
    #menu {
        display: none;
    }
    article {
        height: 1100px;
        min-height: 1100px;
        max-height: 1100px;
    }
}
/* Styles for small screens only (666px to 849px wide) */
@media screen and (min-width: 666px) and (max-width: 849px) {
    div#main-name-box {
        font-size: 1.65vw;
    }
}
/* Styles for large-enough screens only (850px and wider) */
@media screen and (min-width: 850px) {
    /* Set fixed page height */
    article {
        height: 1100px;
        min-height: 1100px;
        max-height: 1100px;
    }
}