@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@250;300;400;700;800&display=swap');

:root {
    color-scheme: light dark;

    --periwinkle: #657EEA;
    --light-periwinkle: #B1C0FF;
    --dark-teal: #2A5E72;
    --coral: #EB8568;
    --light-coral: #F2D4C8;
    --white: #fff;
    --grid-column-gap: 40px;
    --grid-row-gap: 30px;
    --mobile-grid-column-gap: 20px;
    --mobile-grid-row-gap: 20px;
    --black: #000;

    --base: var(--white);
    --base-text-color: var(--dark-teal);
    --link-underline: var(--light-coral);

    --skiplinks-outline: var(--coral);

}

@media(prefers-color-scheme: dark) {
    :root {
    
        --base: var(--black);
        --base-text-color: var(--white);
        --link-underline: var(--coral);

        --skiplinks-outline: var(--white);
    
    }
}

HTML {
    min-height: 100%;
}

BODY {
    height: 100%;
    margin: 0;
    padding: 0;

    font-family: 'Roboto Slab', serif;

    background-color: var(--base);
}

/* TYPOGRAPHY & COLORS */

STRONG, H1, H2 {
    font-weight: 700;
}

P {
    font-weight: 300; 
    margin: 0 0 30px;
    font-size: 18px;
}

H1 {
    font-style: normal;
    font-size: 36px;
    line-height: 40px;
    color: var(--coral);
    padding-top: 76px;
    padding-bottom: 24px;
    margin: 0 0 30px;
}

H2 {
    color: var(--base-text-color);
    font-size: 24px;
}

A {
    color: var(--base-text-color);
    transition: text-decoration-thickness 0.5s,
                text-underline-offset 0.5s,
                text-underline-color 0.5s,
                color 0.5s,
                background-color 0.5s;
}

A:hover, A:focus {
    color: var(--white);
}


A {
    background-color: transparent;
    transition: background-color 0.5s,
                color 0.5s;
    text-decoration-color: var(--light-coral);
}

A:hover, A:focus {
    background-color: var(--coral);
}


MAIN DIV#sidebar H1 {
    color: var(--light-coral);
}

MAIN DIV#sidebar H2 {
    font-style: normal;
    font-weight: 300;
    line-height: 40px;
    color: var(--white);
}

MAIN DIV#sidebar P {
    line-height: 30px;
    font-size: 18px;
    color: var(--light-coral);
    font-weight: 250;
    margin: -2px 0 32px 0;
}

MAIN DIV#sidebar A {
    color: var(--light-coral);
    text-decoration-color: var(--coral);
}

/* MOBILE TYPOGRPHY */
@media (max-width: 999px) {
    H1 {
        font-size: 24px;
        line-height: 40px;
        color: var(--coral);
        padding-top: 72px;
        padding-bottom: 20px;
        margin: 0 0 20px;
    }
    
    H2 {
        color: var(--base-text-color);
        font-size: 18px;
    }

    P {
        font-size: 18px;
    }
}

/* GENERAL STRUCTURE */

HEADER {
    background: var(--light-coral);
    position: relative;
}

HEADER H1 {
    margin: 0;
    padding: 0;
    outline: none;
}

HEADER H1 A {
    display: block;
    padding: 20px;
    border-radius: 10px 0 10px 10px;
}

HEADER H1 A:hover, HEADER H1 A:focus {
    background-color: transparent;
}

HEADER H1 A:focus {
    outline: 4px solid var(--coral);
    background-color: var(--base-text-color);
}

MAIN {

}

MAIN DIV#main-column {

}

MAIN DIV#sidebar {
    background-color: var(--periwinkle);
    padding: 80px 40px 120px 40px;
}

/* DESKTOP STRUCTURE */
@media (min-width: 1000px) {

    MAIN {
        min-height: 100%;
        display: grid;
        grid-template-columns: repeat(8, 1fr);
        grid-template-rows: 1fr;
        grid-column-gap: var(--grid-column-gap);
        grid-row-gap: 0px;
        padding: 0 60px;
        align-items: normal;
    }

    HEADER {
        grid-column-start: 5;
        grid-column-end: -1;
        margin-right: -60px;
        height: 310px;
        margin-bottom: -410px;
        margin-top: 100px;
        z-index: 100;
        border-top-left-radius: 18px;
        border-bottom-left-radius: 18px;
        position: relative;
    }

    HEADER H1 {
        position: absolute;
        left: 20px;
        bottom: 14px; 
        z-index: 2;
    }

    HEADER IMG#headshot {
        position: absolute;
        width: 381px;
        right: 10px;
        bottom: 0;
        z-index: 1;
        display: block;
    }

    MAIN DIV#main-column {
        grid-column-start: 1;
        grid-column-end: 6;
        margin-top: 100px;
        margin-bottom: 400px;

        display: grid;
        grid-template-columns: repeat(5, 1fr);
        grid-column-gap: var(--grid-column-gap);
        grid-row-gap: var(--grid-row-gap);
        grid-template-rows: auto 1fr;
    }

    MAIN DIV#sidebar {
        grid-column-start: 6;
        grid-column-end: -1;
        margin-right: -60px;
        padding: 479px 60px 120px 40px;
    }

    /* Grid helpers ===================================   */
    /* apply this to any column that you'll want to divide further according to the top-level grid */
    MAIN .grid {
        display: grid;
        grid-template-rows: auto;
        grid-column-gap: var(--grid-column-gap);
        grid-row-gap: 0;
    }

    MAIN .full-row {
        /* full width */
        grid-column-start: 1;
        grid-column-end: -1;

        grid-template-columns: repeat(5, 1fr);
    }

    MAIN .four-columns {
        /* the start / ends assume first column. override to nest deeper */
        grid-column-start: 1;
        grid-column-end: 5;

        grid-template-columns: repeat(4, 1fr);
    }

    MAIN .three-columns {
        /* the start / ends assume first column. override to nest deeper */
        grid-column-start: 1;
        grid-column-end: 4;

        grid-template-columns: repeat(3, 1fr);
    }

    MAIN .two-columns {
        /* the start / ends assume first column. override to nest deeper */
        grid-column-start: 1;
        grid-column-end: 3;

        grid-template-columns: repeat(2, 1fr);
    }

    MAIN .one-columns, MAIN .one-column {
        /* the start / ends assume first column. override to nest deeper */
        grid-column-start: 1;
        grid-column-end: 2;

        grid-template-columns: repeat(1, 1fr);
    }

    /* do some text formatting to set proper side margins */
    MAIN .content-block {
        /* padding-left: 30px; */
        /* padding-right: 30px; */
    }

    /* END GRID HELPERS ================================================ */

    MAIN DIV#main-column DIV#narrative {
        grid-column-start: 1;
        grid-column-end: 5;

        padding-top: 10px;
        padding-bottom: 0;
    }
}

/* SMALL SCREEN STRUCTURE */
@media (max-width: 999px) {
    HEADER {
        display: grid;
        grid-template-columns: 1fr 3fr;
    }

    HEADER H1 {
        grid-column-start: 1;
        grid-column-end: -1;
        grid-row-start: 2;
        grid-row-end: 2;
        width: 100%;
        z-index: 2;
        height: 130px;
        
        background-image: url('images/mobile-h1-background.svg');
        background-repeat: no-repeat;
        background-size: 100% 100%;
        margin-top: -80px;
    }

    @media(prefers-color-scheme: dark) {
        HEADER H1 { 
            background-image: url('images/mobile-h1-background-000.svg');
        }
    }


    HEADER H1 A {
        /* background-position: bottom 8px left 20px; */
        padding: 40px 20px;
        border-radius: 0;
    }

    HEADER IMG#headshot {
        display: block;
        width: 100%;
        max-width: 350px;
        grid-column-start: 2;
        grid-column-end: 2;
        grid-row-start: 1;
        grid-row-end: 1;
        justify-self: end;
        margin-right: 20px;
    }

    MAIN {

    }

    MAIN DIV#main-column {
        margin: 60px 20px 120px;
    }

    MAIN DIV#sidebar {
        background-image: url('images/mobile-sidebar-notch.svg');
        background-repeat: no-repeat;
        background-size: 100% 70px;
        background-position: 0 0;
        padding: 80px 20px 120px 20px;
    }

    @media(prefers-color-scheme: dark) {
        MAIN DIV#sidebar {
            background-image: url('images/mobile-sidebar-notch-000.svg');
        }
    }

}


/* MAIN CONTENT COLUMN DETAILS */

MAIN DIV#main-column DIV#narrative P {
    font-size: 24px;
    line-height: 40px;
    color: var(--base-text-color);

    font-weight: 300;
}

@media (max-width: 999px) {
    MAIN DIV#main-column DIV#narrative P {
        font-size: 18px;
        line-height: 30px;
    }
}

MAIN DIV#main-column DIV#where-ive-been {
    font-weight: 300;
}

MAIN DIV#main-column DIV#where-ive-been P {
    font-size: 24px;
    line-height: 40px;
    color: var(--base-text-color);

    font-weight: 300;
}

@media (max-width: 999px) {
    MAIN DIV#main-column DIV#where-ive-been P {
        font-size: 18px;
        line-height: 30px;
    }
}


@media (min-width: 1000px) {
    MAIN DIV#main-column DIV#where-ive-been SECTION.history-item {
        align-items: start;
        margin-bottom: 40px;
        position: relative;
    }

    MAIN DIV#main-column DIV#where-ive-been SECTION.history-item DIV.history-header {
        background-color: var(--light-coral);
        border-radius: 18px;
        position: relative;
    }

    MAIN DIV#main-column DIV#where-ive-been SECTION.history-item::after {
        content: '';
        position: absolute;
        height: auto;
        border: 10px dotted var(--light-coral);
        border-width: 0 0 0 10px;
        width: 1px;
        left: 50%;
        top: 5px;
        bottom: -45px;
        margin-left: -5px;
        z-index: -1;
        grid-column-start: 1;
        grid-column-end: 2;
    }

    @media(prefers-color-scheme: dark) {
        MAIN DIV#main-column DIV#where-ive-been SECTION.history-item::after { 
            border-color: var(--periwinkle);
            opacity: 0.3;
        }
    }

    MAIN DIV#main-column DIV#where-ive-been SECTION:last-of-type::after {
        display: none;
    }

    MAIN DIV#main-column DIV#where-ive-been SECTION.history-item DIV.history-header DIV.history-legend-year {
        background-color: var(--periwinkle);
        padding-bottom: 100%;
        position: relative;
        border-top-left-radius: 18px;
        border-top-right-radius: 18px;
        z-index: 0;
    }

    MAIN DIV#main-column DIV#where-ive-been SECTION.history-item DIV.history-header DIV.history-legend-location {
        margin-top: 10px;
        text-align: center;
        padding: 0;
        z-index: 2;
        position: relative;
    }

    MAIN DIV#main-column DIV#where-ive-been SECTION.history-item DIV.history-header DIV.history-legend-location IMG {
        display: block;
        margin: auto;
        padding: 0;
        width: 100%;
        max-width: 200px;
    }

    MAIN DIV#main-column DIV#where-ive-been SECTION.history-item DIV.history-header DIV.history-legend-year DIV.year-icon {
        color: var(--white);
        width: 80px;
        height: 80px;
        text-align: center;
        border-radius: 50%;
        border: 6px solid var(--white);
        line-height: 290%;
        box-sizing: border-box;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -40px;
        margin-left: -40px;
        background: var(--periwinkle);
        display: grid;
        align-content: center;

        font-family: Roboto Condensed, sans-serif;
        font-size: 18px;
        font-weight: 700;
    }








    MAIN DIV#main-column DIV#where-ive-been SECTION.history-item DIV.history-entry {
        grid-column-start: 2;
        grid-column-end: -1;
        padding-right: 20px;
    }


}

@media (max-width: 999px) {


    MAIN DIV#main-column DIV#where-ive-been SECTION.history-item {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: 1fr;
        grid-column-gap: var(--mobile-grid-column-gap);
        margin-bottom: 40px;
    }



    MAIN DIV#main-column DIV#where-ive-been SECTION.history-item DIV.history-header {
        background-color: var(--light-coral);
        border-radius: 18px;
        position: relative;
        grid-column-start: 1;
        grid-column-end: -1;
        margin-bottom: 20px;

        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: 1fr;
        grid-column-gap: var(--mobile-grid-column-gap);
        min-height: 80px;

    }

    MAIN DIV#main-column DIV#where-ive-been SECTION.history-item DIV.history-header DIV.history-legend-year {
        grid-column-start: 1;
        grid-column-end: 3;

        background: var(--periwinkle);
        border-top-left-radius: 18px;
        border-bottom-left-radius: 18px;
        align-content: center;
        text-align: center;
        display: grid;
        margin-right: calc(0px - (var(--mobile-grid-column-gap)/2));

        color: var(--white);
        font-weight: 700;
    }

    MAIN DIV#main-column DIV#where-ive-been SECTION.history-item DIV.history-header DIV.history-legend-location {
        grid-column-start: 3;
        grid-column-end: -1;
        text-align: center;
        align-content: center;
    }
    MAIN DIV#main-column DIV#where-ive-been SECTION.history-item DIV.history-header DIV.history-legend-location IMG {
        max-height: 60px;
        margin-top: 10px;
    }

    MAIN DIV#main-column DIV#where-ive-been SECTION.history-item DIV.history-entry {
        grid-column-start: 1;
        grid-column-end: -1;
    }






    

    MAIN DIV#main-column DIV#where-ive-been DIV.history-item H2 {
        grid-column-start: 2;
        grid-column-end: -1;
    }
    
    MAIN DIV#main-column DIV#where-ive-been DIV.history-item DIV.history-legend {
        grid-column-start: 1;
        grid-column-end: 2;
        grid-row-start: 1;

        border-radius: 200px;
        background: var(--periwinkle);
        padding-top: 100%;
        position: relative;
    }

    MAIN DIV#main-column DIV#where-ive-been DIV.history-item DIV.history-legend DIV.year-icon {
        position: absolute;
        height: 80%;
        width: 80%;
        top: 10%;
        left: 10%;
        text-align: center;
        display: grid;
        align-content: center;
        font-weight: 700;
        color: var(--white);
        font-size: 4vw;
        border: 3px solid var(--white);
        box-sizing: border-box;
        border-radius: 100px;
    }
}

MAIN DIV#sidebar DIV.item {
    margin-bottom: 30px;
}

MAIN DIV#sidebar DIV.item A.wrapped-link {
    text-decoration: none;
    display: block;
    padding: 10px;
    margin: -10px;
}

MAIN DIV#sidebar DIV.item A.wrapped-link:hover {
    background: transparent;
}
MAIN DIV#sidebar DIV.item A.wrapped-link:focus-visible {
    background: transparent;
    border-radius: 20px;
    outline: 4px solid var(--coral);
}

MAIN DIV#sidebar DIV.item A.wrapped-link:hover IMG.showcase,
MAIN DIV#sidebar DIV.item A.wrapped-link:focus IMG.showcase {
    border-color: var(--white);
}

MAIN DIV#sidebar DIV.item A.wrapped-link:hover P,
MAIN DIV#sidebar DIV.item A.wrapped-link:focus P {
    color: var(--white);
}

@supports (text-underline-offset: -2px) {
    MAIN DIV#sidebar DIV.item A.wrapped-link:hover H2,
    MAIN DIV#sidebar DIV.item A.wrapped-link:focus H2 {
        text-decoration: underline;
        text-decoration-thickness: 6px;
        text-decoration-color: var(--coral);
        text-underline-offset: -3px;
        text-decoration-skip-ink: none;
    }
}

@supports not (text-underline-offset: -4px) {
    MAIN DIV#sidebar DIV.item A.wrapped-link:hover H2,
    MAIN DIV#sidebar DIV.item A.wrapped-link:focus H2 {
        background: transparent;
        text-decoration: underline;
        transition: background 0.5s,
                    color 0.5s;
        text-decoration-color: var(--light-coral);
    }
}

MAIN IMG.featured {
    max-width: 90%;
    box-shadow: 0 0 5px #ccc;
    display: block;
    margin: 0 auto 50px;
}

MAIN DIV#sidebar IMG.showcase {
    max-width: 100%;
    max-height: 200px;
    border-radius: 18px;
    border: 5px solid rgba(255,255,255,0.3);
    box-sizing: border-box;
    display: block;
}

/* image replacement */
.image {
    display: block;
    padding: 0;
    outline: none;
    text-indent: -9000px !important;
    background-repeat: no-repeat;
}

/* Skip Links */
NAV#skip-links { }

NAV#skip-links A {
    position:absolute;
    left:-10000px;
    top:auto;
    width:1px;
    height:1px;
    overflow:hidden;
}

NAV#skip-links:focus-within {
    padding: 0 10px;
    background: var(--base);
    outline: 4px solid var(--skiplinks-outline);
    position: absolute;
    top: 0;
    left: 25%;
    width: 50%;
    text-align: center;
    z-index: 10000;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

NAV#skip-links:focus-within A {
    position:static;
    width:auto;
    height:auto;
    display: inline-block;
    margin: 10px;
    padding: 10px;
}