/* ----------------------------- common structure ----------------------------- */

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}

html {
    box-sizing: border-box;
}

*, *:before, *:after {
    box-sizing: inherit;
}

ul {
    padding: 0;
    margin: 0;
}

/* ----------------------------- fonts ----------------------------- */

p, blockquote, a, ul, ol {
    font-family: 'Crimson Text', Garamond, serif;
    color: black;
    font-size: 22px;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6, h7, .fluidHeader, .fluidParagraph, .fluidParagraph i, .fluidParagraph b, .fluidParagraph a {
    font-family: 'Futura Md BT', 'Futura', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

h1 {
    font-size: 3.5em;
    margin-top: 0;
    padding-top: 0;
}

h2 {
    font-size: 2em;
}

h3 {
    font-size: 1.6em;
}

.fluidHeader, .fluidParagraph {
    display: block;
    margin: 0;
    padding: 0;
}

.fluidHeader {
    text-transform: uppercase;
}

/* font-size: calc([minimum size] + ([maximum size] - [minimum size]) * ((100vw - [minimum viewport width]) / ([maximum viewport width] - [minimum viewport width]))); */

/* one-shot way
 @media screen and (min-width: 360px) {
    .fluidHeader {
        font-size: calc(30px + (120 - 30) * ((100vw - 360px) / (1728 - 360)));
    }
} */

@media screen and (min-width: 360px) {
    .fluidHeader {
        font-size: calc(28px + (70 - 28) * ((100vw - 360px) / (960 - 360)));
    }
}

@media screen and (min-width: 960px) {
    .fluidHeader {
        font-size: calc(50px + (90 - 50) * ((100vw - 960px) / (1344 - 960)));
    }
}

@media screen and (min-width: 1344px) {
    .fluidHeader {
        font-size: calc(90px + (106 - 90) * ((100vw - 1344px) / (1536 - 1344)));
    }
}

@media screen and (min-width: 1536px) {
    .fluidHeader {
        font-size: calc(106px + (120 - 106) * ((100vw - 1536px) / (1728 - 1536)));
    }
}

@media screen and (min-width: 360px) {
    .fluidParagraph {
        font-size: calc(16px + (48 - 16) * ((100vw - 360px) / (1728 - 360)));
    }
}

@media screen and (min-width: 1728px) {
    .fluidHeader {
        font-size: 120px;
    }

    .fluidParagraph {
        font-size: 48px;
    }
}

.multitone {
    display: inline-block;
    border: 1vw solid rgb(40,93,165);
    border-right-width: 0;
    border-left-width: 0;
    border-image: linear-gradient(to right,rgb(40,93,165), rgb(192,60,64)) 100% 1;
}

.halftone {
    color: #575457;
}

a {
    color: rgb(0, 120, 212);
    text-decoration: none;
}

a:hover {
    color: rgb(24, 144, 236);
    text-decoration: underline;
}

/* ----------------------------- modifiers ----------------------------- */

.pad-b-h {
    padding-bottom: 0.5em;
}

.pad-b-ah {
    padding-bottom: 1.5em;
}

.pad-t-ah {
    padding-top: 1.5em;
}

.upper {
    text-transform: uppercase;
}

.noma {
    margin: 0;
}

.nopa {
    padding: 0;
}

.rot-45 {
    transform: rotate(45deg);
    display: inline-block;
    transform-origin: 50% 50%;
    margin-right: -0.33em;
}

/* ----------------------------- layout and menu ----------------------------- */

aside {
    position: fixed;
    width: 250px;
    left: 0;
    top: 0;
    background: white;
    z-index: 555;
    height: 100%;
    max-height: 100vh;
    padding-top: 72px;
}

article {
    position: fixed;
    width: calc(100% - 250px);
    left: 250px;
    top: 0;
    height: 100%;
    overflow-y: scroll;
    padding-top: 72px;
}

.menu_opener {
    display: none;
}

.menu_opener_label {
    position: fixed;
    top: 12px;
    left: 12px;
    height: 48px;
    width: 48px;
    cursor: pointer;
    background: #e9e9e9;
    display: none;
    font-size: 20px;
    line-height: 48px;
    text-align: center;
    text-transform: uppercase;
    font-family: 'Futura BdCn BT', 'Futura', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: bold;
    padding: 0;
    margin: 0;
    transform: translate3d(0,0,0);
    transition-property: box-shadow, transform;
    transition-duration: .4s;
    transition-timing-function: cubic-bezier(.16,1,.29,.99);
    box-shadow: 0 2px 8px rgba(0,0,0,.05);
    z-index: 999;
}

.menu_opener_label:hover {
    transform: translate3d(0,-4px,0);
    box-shadow: 0 12px 30px 0 rgba(0,0,0,.2);
    transition-duration: .6s;
    transition-timing-function: cubic-bezier(.16,1,.29,.99)
}

@media screen and (max-width: 960px) {
    aside {
        left: -250px;
        overflow-x: visible;
        transition-duration: .4s;
        transition-property: left, box-shadow;
        transition-timing-function: cubic-bezier(.16,1,.29,.99);
        padding-top: calc(12px + 48px);
    }

    article {
        left: 0;
        width: calc(100% - 12px);
        margin: 0px 12px;
        padding-top: calc(72px + 12px);
    }

    .menu_opener_label {
        display: block;
    }

    .menu_opener:checked ~ aside {
        left: 0px;
        box-shadow: 0 12px 30px 0 rgba(0,0,0,.2);
        transition-duration: .6s;
        transition-timing-function: cubic-bezier(.16,1,.29,.99)
    }
}

aside .asidewrapper {
    height: 100%;
    display: grid;
    grid-template-rows: auto auto auto;
}

aside .titlewrapper {
    margin: 0 12px;
    justify-self: start;
    align-self: start;
}

aside .menuwrapper {
    margin: 0 12px;
    justify-self: start;
    align-self: center;
}

aside .socialwrapper {
    margin: 0 12px;
    justify-self: start;
    align-self: end;
}

@media screen and (orientation:portrait) and (max-height: 844px) {
    aside {
        overflow-y: scroll;
    }
}

@media screen and (orientation:landscape) and (max-height: 672px) { 
    aside {
        left: -100%;
        width: 100%;
    }

    .menu_opener:checked ~ aside {
        left: 0px;
    }

    aside .asidewrapper {
        grid-template-columns: auto auto auto;
        grid-template-rows: none;
    }

    aside .titlewrapper {
        justify-self: start;
        align-self: start;
    }

    aside .menuwrapper {
        justify-self: center;
        align-self: start;
    }

    aside .socialwrapper {
        justify-self: end;
        align-self: start;
    }
}

aside ul, aside ul li {
    list-style: none;
    margin: 0;
    padding: 0;
}

aside .menuheader {
    margin-bottom: 24px;
    text-transform: uppercase;
    font-size: 1.2em;
}

aside ul li {
    margin-bottom: 12px;
    font-size: 20px;
    line-height: 20px;
    display: block;
    text-transform: uppercase;
}

aside ul li a {
    font-family: 'Futura MdCn BT', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 22px;
}

aside ul li i {
    min-width: 36px;
    font-size: 20px;
}

aside ul li a {
    color: black;
}

aside ul li:hover i {
    color: rgb(24, 144, 236);
}

ol li {
    font-size: 22px;
    padding-bottom: 6px;
}

/* ----------------------------- modules ----------------------------- */

.work-experience-item span.duration {
    display: inline-block;
    font-size: 0.7em;
    padding: 0.3em;
    background: #243b5e;
    color: white;
}

.work-experience-item h3, .education-item h3 {
    margin-bottom: 0;
}

.work-experience-item p, .education-item p {
    margin: 8px 0;
}

.work-experience-item blockquote {
    border-left: 3px dotted #243b5e;
    margin-left: 0;
    padding-left: 24px;
}

.skill-item .skill-item-tag {
    display: inline-block;
    border: 3px solid #243b5e;
    padding: 4px 6px;
    margin: 0px 8px 8px 0px;
    font-size: 16px;
    font-weight: bold;
}

.project-item {
    display: inline-block;
    border: 3px solid #243b5e;
    padding: 8px 12px;
    margin: 0px 8px 8px 0px;
}

.project-item h3 {
    margin-top: 0;
    margin-bottom: 6px;
}

.project-item p {
    margin: 0;
}

p.code-block {
    font-family: "Consolas", monospace;
}

.achievement-item span.xp {
    display: inline-block;
    font-size: 0.7em;
    padding: 0.3em;
    background: #243b5e;
    color: white;
}

/* ----------------------------- page specific things ----------------------------- */

/* home */

body.page-home aside .titlewrapper {
    opacity: .12;
}

/* cv */

body.page-cv section img {
    max-height: 164px;
    padding-right: 50px;
}

body.page-cv section img:last-of-type {
    padding-right: 0;
}

/* everything else */

body.page-everythingelse article ul, body.page-everythingelse article ol {
    margin: 0;
    margin-left: 1.7em;
    padding: 0;
}

body.page-everythingelse article ul li, body.page-everythingelse article ol li {
}

/* carbon */

body.page-carbon #emissionchart {
    display: block;
    width: 96%;
    height: 48px;
    box-shadow: 0 12px 30px 0 rgba(0,0,0,.2);
    position: relative;
    margin-bottom: 16px;
}

body.page-carbon .emissionchart-item {
    display: inline-block;
    height: 100%;
    margin: 0;
    position: absolute;
    line-height: 24px;
    padding-left: 6px;
    text-transform: uppercase;
    font-family: 'Futura BdCn BT', 'Futura', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: bold;
    color: white;
}

body.page-carbon .emissionchart-stuff {
    background: crimson;
}

body.page-carbon .emissionchart-food {
    background: forestgreen;
}

body.page-carbon .emissionchart-travel {
    background: orange;
}

body.page-carbon .emissionchart-home {
    background: steelblue;
}

body.page-carbon #emissionchart .emissionchart-stuff {
    width: 25%;
}

body.page-carbon #emissionchart .emissionchart-food {
    width: 22%;
    left: 25%;
}

body.page-carbon #emissionchart .emissionchart-travel {
    width: 17%;
    left: calc(25% + 22%);
}

body.page-carbon #emissionchart .emissionchart-home {
    width: 36%;
    left: calc(25% + 22% + 17%);
}