/* ================================
   CSS VARIABLES & FONTS
   ================================ */

@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');
:root {
    --color-primary: #0090C0;
    --color-primary-dark: rgb(0, 98, 136);
    --color-navy-teal: rgb(10, 92, 138);
    --color-border: #006B93;
    --color-accent: #00a4d2;
    --color-text: #151D29;
    --color-text-light: #444;
    --color-text-muted: #666;
    --color-bg: #fff;
    --font-body: 'Open Sans', sans-serif;
    --font-heading: zona, sans-serif;
}

@font-face {
    font-family: zona;
    src: url('/fonts/zona/zona-extrabold.otf') format('opentype');
    font-weight: 900;
}


/* ================================
   CSS RESET / BASE STYLES
   ================================ */

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
    display: block
}

img {
    border: 0;
    max-width: 100%
}

html {
    font-size: 13px;
    background: var(--color-bg);
    color: #000;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    background-image: url("images/watercolor-paper-light-2.jpg");
    background-size: 600px;
    background-repeat: repeat;
}

body,
html {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    overflow-x: hidden
}

body {
    font-family: var(--font-body);
    font-size: 11px;
}

hr {
    box-sizing: content-box;
    height: 0
}

figure {
    margin: 0
}


/* ================================
   TYPOGRAPHY
   ================================ */

h1 {
    font-size: 2em;
    margin: .37em 0
}

h1,
h2,
h3 {
    font-family: var(--font-heading);
}

h1,
h2 {
    letter-spacing: .5px;
}

h3 a {
    color: hsl(0deg 0% 20%);
}

h4 {
    font-family: var(--font-heading);
    font-size: 11pt;
    margin: 1ex 0 0.5ex 0;
}

b,
strong {
    font-weight: 700
}

a {
    color: var(--color-navy-teal);
    text-decoration: none;
}

a:active,
a:hover {
    outline: 0;
    color: var(--color-primary);
}

a:focus,
a:visited:hover {
    color: var(--color-accent);
}

a.plain[href]:after,
a[href^="javascript:"]:after,
a[href^="#"]:after {
    content: ""
}


/* ================================
   LAYOUT CONTAINERS
   ================================ */

.wrapper {
    max-width: 960px;
    margin: 0 5%;
}

.main.wrapper.clearfix {
    color: var(--color-text);
}

.main h1,
.main h2,
.main h3 {
    font-weight: 300
}

.main p {
    font-weight: 400;
}

.main-container {
    width: 100%;
    min-width: 380px;
    max-width: 960px;
    margin: 2.5em auto 1em auto;
    position: relative;
}

.main-container::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 110%;
    height: 100%;
    min-width: 580px;
    background-image: url(images/cube.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: bottom left;
    opacity: 0.07;
    pointer-events: none;
    z-index: -1;
    transform: translate(-25%, 60px);
}

.right-container {
    width: 100%;
    float: right;
    margin: -1.5em 0 0em 0;
}

.right-container>div {
    clear: both;
    border-left: 2px var(--color-border) solid;
}

.right-container h2 {
    color: white;
    background-image: linear-gradient(rgba(0, 0, 0, 0.00) 50%, 0, transparent 100%), linear-gradient(-183deg, var(--color-primary-dark), var(--color-primary));
    font-weight: 500;
    line-height: 1em;
    padding: .4em 1.5em .3em;
    margin: 0;
}

.right-container .list {
    margin: 0ex 1em 0em 1em;
}


/* ================================
   HEADER & ASIDE
   ================================ */

.header-container {
    max-width: 960px;
    margin: 0 auto;
}

.header-container .clearfix {
    margin-top: 28px;
    margin-bottom: 40px;
    position: relative;
}

header .title {
    font-size: 32pt;
    margin: 0;
}

.title {
    font-weight: 300;
    font-size: 42px
}

header .subtitle {
    font-weight: 300;
    font-size: 12pt;
    margin-bottom: 1em;
}

.subtitle {
    margin: 0;
    max-width: calc(100% - 120px);
}

header p {
    padding: 0;
}

header>.aside-container {
    text-align: center;
    position: absolute;
    right: 0;
    bottom: 0;
}

aside {
    text-align: right;
}

aside a {
    font-weight: 700;
    color: var(--color-text-light);
}

aside>p {
    font-size: 10pt;
    line-height: 1.4em;
    margin: 0 auto;
    display: block;
}

aside>p>a {
    display: inline-block;
}

.tap-text {
    display: none;
}

@media (hover: none) and (pointer: coarse) {
    .hover-text {
        display: none;
    }
    .tap-text {
        display: inline;
    }
}


/* ================================
   RESUME SECTIONS
   ================================ */

#education,
#skills {
    width: 48%;
    display: inline-block;
    height: 17ex;
    clear: none;
}

#education,
#skills,
#experience {
    margin-bottom: 3ex;
}

#education {
    float: left;
    margin-right: 1em;
}

#education h3 {
    width: 100%;
}

#education .list p {
    display: inline-block;
}

#education .list time {
    margin-top: 0ex;
}

#skills {
    float: right;
}

#skills .list {
    padding-bottom: 0.5ex;
}

#skills .list section {
    padding-bottom: 0.25ex;
}

#languages {
    float: left;
}

#tools {
    float: left;
    margin-left: calc(2em + 4vw);
}


/* ================================
   LISTS & BULLETS
   ================================ */

ul {
    list-style: none;
}

ul li {
    position: relative;
}

ul li::before {
    content: url("data:image/svg+xml,%3Csvg width='3mm' height='3mm' viewBox='0 -.75 4 4' version='1.1' id='svg5' inkscape:version='1.1 (c68e22c387, 2021-05-23)' sodipodi:docname='bullet-rounded.svg' xmlns:inkscape='http://www.inkscape.org/namespaces/inkscape' xmlns:sodipodi='http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd' xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg'%3E%3Csodipodi:namedview id='namedview7' pagecolor='%23ffffff' bordercolor='%23666666' borderopacity='1.0' inkscape:pageshadow='2' inkscape:pageopacity='0.0' inkscape:pagecheckerboard='0' inkscape:document-units='mm' showgrid='false' inkscape:zoom='32' inkscape:cx='5.40625' inkscape:cy='10.625' inkscape:window-width='1284' inkscape:window-height='1036' inkscape:window-x='637' inkscape:window-y='269' inkscape:window-maximized='0' inkscape:current-layer='layer1' width='3mm' /%3E%3Cdefs id='defs2' /%3E%3Cg inkscape:label='Layer 1' inkscape:groupmode='layer' id='layer1'%3E%3Cpath style='fill:none;fill-rule:evenodd;stroke:%23000000;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1' d='m 64.255263,56.815109 -5e-6,-3e-6' id='path1211' inkscape:connector-type='polyline' inkscape:connector-curvature='0' /%3E%3Cpath style='display:inline;fill:none;fill-rule:evenodd;stroke:%23000000;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1' d='m 67.468749,179.12291 10e-7,1e-5' id='path1959' inkscape:connector-type='polyline' inkscape:connector-curvature='0' /%3E%3Cpath style='fill:none;fill-rule:evenodd;stroke:%23000000;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1' d='m 67.468749,179.12291 v 0' id='path1961' inkscape:connector-type='polyline' inkscape:connector-curvature='0' /%3E%3Cpath style='fill:%2300a4d2;fill-opacity:1;stroke:%2300a4d2;stroke-width:0.5;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1' d='M 0.58698324,2.0154085 2.0697206,1.3419289 0.58698324,0.67381394 Z' id='path2515' sodipodi:nodetypes='cccc' /%3E%3Ccircle id='path3642' style='fill:%2300a4d2;stroke:%2300a4d2;stroke-width:0.264583' cx='101.21497' cy='129.65245' r='0.02495927' /%3E%3C/g%3E%3C/svg%3E%0A");
    font-size: 8px;
    display: inline-block;
    min-width: 2em;
    margin-left: -1.5em;
    position: absolute;
    margin-top: 3px;
}

.list section {
    font-size: small;
    margin-left: 1em
}

.list section h3 {
    font-size: 13pt;
    font-weight: 400;
}

.list time {
    float: right;
    margin-top: 1ex;
}

.list p {
    margin-top: 0;
    margin-bottom: .3em;
    clear: left
}

.list h3 {
    float: left;
    margin-bottom: 0;
    margin-top: 0.75ex;
}

.indent {
    padding: 0;
    margin: 0 0 0 1em;
    display: inline-block;
}

.hanging-indent {
    text-indent: -1.5em;
    padding-left: 1.5em;
}

.hanging-indent::before {
    margin-left: 1em;
}


/* ================================
   COMPONENTS
   ================================ */

.updated-date {
    clear: both;
    font-style: italic;
    color: var(--color-text-muted);
    font-size: 12px;
    padding-top: 4ex;
}


/* ================================
   UTILITY CLASSES
   ================================ */

.no-print {
    display: none;
}


/* ================================
   MEDIA QUERIES - MOBILE
   ================================ */

@media only screen and (max-width: 520px) {
    #education,
    #skills {
        width: 100%;
        float: none;
        height: auto;
        margin-right: 0;
        display: block;
    }
}

@media only screen and (max-width: 720px) {
    aside {
        max-width: 100%;
    }
    aside>p {
        line-height: 1.5em;
        margin: 0;
    }
    #education,
    #skills {
        height: auto;
    }
    #skills .section,
    #tools {
        float: none !important;
        margin-left: 0 !important;
        margin-bottom: 0;
        width: 100%;
        display: block !important;
    }
    #skills .section h3 {
        display: inline-block;
        margin-left: 0;
    }
    #skills .section p {
        display: inline-block;
        margin: 10px 0 0 10px;
    }
}


/* ================================
   MEDIA QUERIES - PRINT
   ================================ */

@media print {
    html {
        background-color: var(--color-bg);
        background-image: none;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
        color-adjust: exact;
    }
    body {
        height: 11in;
        overflow: hidden;
    }
    * {
        box-shadow: none;
        text-shadow: none;
    }
    .no-print,
    .no-print * {
        display: none;
    }
    .right-container h2 {
        color: white;
        background-color: var(--color-primary-dark);
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
        color-adjust: exact;
    }
    aside>p {
        line-height: 1.2em;
    }
    header>.aside-container {
        margin-top: 3ex;
    }
    .subtitle {
        margin: 0;
    }
    .main.clearfix {
        margin-bottom: 0em;
        margin-top: 2mm;
    }
    .list section {
        padding-bottom: 0.25em;
        margin-left: 0em;
        font-size: 11px;
    }
    #publications .list section {
        margin-top: 2ex;
    }
    .list section h3 {
        font-size: 12pt;
    }
    ul li::before {
        font-size: 8px;
        margin-top: 2px;
    }
    .indent {
        margin: 0 0 0 1.1em;
    }
    .right-container h2 {
        margin-bottom: .25em;
        padding-left: .75em;
        font-size: 12pt;
    }
    .updated-date {
        padding: 0;
        float: right;
        clear: none;
        position: relative;
        font-size: 9px;
    }
    #education,
    #skills {
        height: 15ex;
    }
}