@import url('https://fonts.googleapis.com/css?family=Oswald:200,300,400,500,600,700&display=swap&subset=latin-ext');
:root {
    --text: #111111;
    --white: #EFEFEF;
    --green: #526a3e;
    --grey: #5e6769;
    --grey-dark: #414547;
    --grey-light: #99a3a6;
    --grey-pale: #d9dada;
    --grey-palest: #e9eaea; 
    --accent: #591E5A; 
    --accent-dark: #591E5A;
    --accent-mid: #8B4A8C;
    --accent-light: #BE8CBF;
    --challenge: url('./challenge.svg');
    --critique: url('./critique.svg');
    --rationale: url('./rationale.svg');
}
    
@media (prefers-color-scheme: dark) { 
    :root {
        --text: #EFEFEF;
        --white: #111111;
        --green: #526a3e;
        --grey: #e9eaea;
        --grey-dark: #d9dada;
        --grey-light: #99a3a6;
        --grey-pale: #343434;
        --grey-palest: #343434; 
        --accent: #BE8CBF; 
        --accent-dark: #BE8CBF;
        --accent-mid: #BE8CBF;
        --accent-light: #BE8CBF;
        --challenge: url('./challenge-dark.svg');
        --critique: url('./critique-dark.svg');
        --rationale: url('./rationale-dark.svg');
    }
}

html, body {
    font-size: 10px;
    background-color: var(--white);
    font-family: Oswald, Arial, Helvetica, sans-serif;
}

p, dl, ul, ol, li {
    font-size: 2rem;
    font-weight: 300;   
    margin-bottom: 2rem;
}

figcaption {
    font-size: 1.8rem;
    font-style: italic;
    font-weight: 200;   
    margin-bottom: 1rem; 
}

body > header {
    border-width: 0px 0px 0.8rem 0px;
    border-style: solid;
    border-image-source: linear-gradient(60deg,  var(--white), var(--accent-light), var(--accent-mid), var(--accent), var(--accent-mid), var(--accent-light), var(--white));
    border-image-slice: 1;
}

p, dl, ul, ol, li, h1, h2, h3 {
    max-width: 72ch;
    color: var(--text);    
}

h1, h2, h3 {
    margin: 1.5rem 0;
}

h1 {        
    font-weight: 700;
    font-size: 4rem;
}

h2 {
    font-size: 3.2rem;
    font-weight: 700;
    color: var(--accent);
}

h3 {
    font-size: 2.2rem;
    font-weight: 600;
    color: var(--text);
}

p.lede {
    font-size: 2.2rem;
}

abbr[title] {
    text-decoration: none;
}

a {
    color: var(--accent-mid);
    text-decoration: none;
    transition: all 0.5s ease-in-out;
    font-weight: 400;
}

a:active,
a:hover,
a:focus {
    color: var(--text);
    text-decoration: underline;
    text-decoration-skip: objects spaces;
    text-decoration-skip-ink: auto;
    text-decoration-color: var(--accent);
    text-decoration-style: solid;
}

a:active {
    color: var(--accent-light);
}

a:visited {
    color: var(--accent-dark);
}

p.lede:first-letter {
    float: left;
    padding-top: .25em;
    padding-right: .25rem;
    padding-left: 0;
    font-size: 6.75rem;
    line-height: 3rem;
    font-weight: 600;
    color: var(--accent);
    }

    #main-container {
    padding: 1rem;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(5, min-content);
    grid-gap: 1rem;
    grid-template-areas:    "header" 
                            "skills"
                            "exp"
                            "certs"
                            "edu";
}

@media (min-width: 1166px) {
    #main-container {
        min-height: calc(100vh - 55px);
        padding: 1rem 3rem;
        grid-template-rows: min-content min-content min-content 1fr;
        grid-gap: 3rem;
    }
}

main header {
    grid-area: header;
}

body > header img#navbar-logo {
    height: 4rem;
    margin: 1.5rem;
    grid-area: logo;
}    

body > header .navbar-brand {
    width: auto;
    margin-right: 2vw;
}

body > header .navbar-brand h1  {
    height: 4rem;
    line-height: 4rem;
    font-size: 3rem;
    margin: 1.5rem 0;
    grid-area: heading;
}

@media (min-width: 992px) {
    body > header img#navbar-logo {
        height: 6rem;
    }    

    body > header .navbar-brand {
        margin-right: 10vw;
    }

    body > header .navbar-brand h1  {
        height: 6rem;
        line-height: 6rem;
        font-size: 4rem;
    }
}
.dropdown-menu {
    background-color: var(--white);
}

body > header .navbar-expand-lg {
    padding: 0 0;
}

#skip-navigation {
    font-size: 2.4rem;
}

body > header .navbar-expand-lg .navbar-nav .nav-link,
body > header .navbar-expand-lg .navbar-nav .dropdown-item {
    color: var(--accent);
    line-height: 6rem;
    padding: 2rem 2rem 1rem 2rem;
    font-size: 2.6rem;
    font-weight: 600;
    background-color: transparent;
    border: 2px solid transparent;
    transition: background-color 0.3s ease-in, border-color 0.3s ease-in;
}

body > header .navbar-expand-lg .navbar-nav .nav-link:hover,
body > header .navbar-expand-lg .navbar-nav .dropdown-item:hover {
    color: var(--white);
    background-color: var(--text);
}

body > header .navbar-expand-lg .navbar-nav .nav-link:focus,
body > header .navbar-expand-lg .navbar-nav .dropdown-item:focus {
    border-color: var(--accent);
    background-color: transparent;
    text-decoration: underline;
    text-decoration-color: var(--accent);
}

body > header .navbar-expand-lg .navbar-nav .dropdown-item {
    padding: 0.5rem 2rem;
}
body > header .navbar-expand-lg .navbar-nav .dropdown-toggle::after {
    display: inline-block;
    margin-left: .255em;
    content: "\2261";
    font-weight: 700;
    border: none;
    vertical-align: 0;
}

body > header .navbar-expand-lg .navbar-brand {
    display: grid;
    grid-template-columns: repeat(2, min-content) 2rem;
    grid-template-rows: 1fr;
    grid-gap: 0;
    grid-template-areas:    "logo heading current";
    padding: 0;
    border: 2px solid transparent;
    transition: border-color 0.3s ease-in;
}

body > header .navbar-expand-lg .navbar-brand:hover,
body > header .navbar-expand-lg .navbar-brand:focus {
    border-color: var(--accent);
}

body > header .navbar-expand-lg .navbar-brand:focus h1 {
    text-decoration: underline;
    text-decoration-color: var(--accent);
}
@media (min-width: 992px) {
    body > header .navbar-expand-lg .nav-item {
        margin-bottom: 0;
    }

    body > header .navbar-expand-lg .active[aria-current="page"] {
        padding-left: 1rem;
    }

    body > header .navbar-expand-lg .active[aria-current="page"]::before {
        position: relative;
        float: left;
        content: "";
        display: inline-block;
        width: 0;
        height: 0;
        border: 1rem solid transparent;
        border-left: 1rem solid var(--accent);
        border-right: 0;
        left: -0.75rem;
        top: 2rem;
    }

    body > header .navbar-expand-lg .navbar-brand.active[aria-current="page"]::before {
        border: 1rem solid transparent;
        border-right: 1rem solid var(--accent);
        position:static;
        grid-area: current;
        margin: 4rem 0 0;
    }
}

.accent {
    color: var(--accent) !important;
}

.bg-accent {
    background-color: var(--accent) !important;
    color: var(--white) !important;
}

.accent-bold {
    color: var(--accent) !important;
    font-weight: 600;
}

body > header h1 a .accent-bold {
    color: var(--accent-light) !important;
} 

.text-thin {
    font-weight: 200;
}

.bg-grey {
    background-color: var(--grey);
}

.bg-grey.dark {
    background-color: var(--grey-dark);
}

.bg-grey.pale {
    background-color: var(--white);
}

a.btn,
button {
    color: var(--white);
    background-color: var(--accent);
    border: 2px solid var(--accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: auto;
    padding: 0.5rem 1rem;
    text-decoration: none;
    /*clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);*/
    transition: transform 0.3s ease, background-color 0.3s ease, text-decoration 0.3s ease;
    cursor: pointer;
    font-weight: 500;
    font-size: 2.2rem;
    margin: .5rem 0;
    border-radius: 5px;
}

a.btn:hover,
button:hover {
    color: var(--white);
    background-color: var(--text);
    border-color: var(--text);
}
a.btn:focus,
button:focus {
    color: var(--accent) !important;
    border-color: var(--accent) !important;
    background-color: var(--white);
    text-decoration: underline 2px solid var(--accent);
    /*background: radial-gradient(ellipse at center, var(--white) 55%, var(--accent) 100%);*/
}
button[disabled], 
a.btn[disabled] {
    color: var(--grey-dark) !important;
    background-color: var(--accent-light) !important;
    cursor:not-allowed;
}

button.navbar-toggler {
    min-width: 4rem;
    height: 4rem;
    background-color: var(--accent);
    padding: 0 2rem;
    clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
    border: none;
    border-radius: 0;
}

button.navbar-toggler .navbar-toggler-icon {
    width: auto;
    height: auto;
    font-size: 3rem;
    line-height: 3rem;
    align-self: flex-start;
}

button.navbar-toggler .navbar-toggler-icon::before {
    display: inline-block;
    content: "\2261";
    color: var(--white);
    font-size: 3rem;
    line-height: 3rem;
    padding: 0;
    margin: 0;
    align-self: flex-start;
}

button.navbar-toggler:hover {
    background-color: var(--text) !important;
    color: var(--white) !important;
}

button.navbar-toggler:focus,
button.navbar-toggler:focus .navbar-toggler-icon::before {
    color: var(--text) !important;
}

h2.challenge,
h2.critique,
h2.rationale {
    background-color: transparent;
    background-position: left center;
    line-height: 4rem;
    padding-left: 4rem;
    background-size: 3rem;
    background-repeat: no-repeat;
}

h2.challenge {
    background-image: var(--challenge);
}

h2.critique {
    background-image: var(--critique);
}

h2.rationale {
    background-image: var(--rationale);
}

li.crystal {
    list-style-image: url(./crystal-bullet.svg);
}
li.crystal::marker {
    font-size: 2rem;
}

.bordered {
    border-left: 4px dotted var(--accent);
    padding-left: 0.5rem;
}