/**
 * Primary styles (custom section, non htmlboilerplate)
 * Author: Ethan Schoonover
 */

/* $base03:    #002b36; */
/* $base02:    #073642; */
/* $base01:    #586e75; */
/* $base00:    #657b83; */
/* $base0:     #839496; */
/* $base1:     #93a1a1; */
/* $base2:     #eee8d5; */
/* $base3:     #fdf6e3; */
/* $yellow:    #b58900; */
/* $orange:    #cb4b16; */
/* $red:       #dc322f; */
/* $magenta:   #d33682; */
/* $violet:    #6c71c4; */
/* $blue:      #268bd2; */
/* $cyan:      #2aa198; */
/* $green:     #859900; */
/* $hmargin:   70px; */
/* $vmargin:   20px; */

/* * { */
/*   margin: 0; */
/*   padding: 0; */
/*   box-sizing: border-box; */
/* } */

body {
    color: #000; /* #073642; #094b5c; #657b83; */
    font-family: 'Fira Sans', sans-serif;
    font-size: 14pt;
    font-weight: 300;
    line-height: 1.5em;
    padding: 1em;
    max-width: 44em;
    margin: auto;
    /* background: #eff4e2; */
    background: #ffffff;
    text-rendering: optimizeLegibility;
}

header, section {
    max-width: 44em;
    margin: auto;
}

b, strong {
    font-weight: 400;
    color: #2aa198;
}

p {
    margin: 1em 0;
    text-align: left;
}

::-moz-selection {
    background:#2aa198;
    color:#fff;
    text-shadow:none
}

/* --- Links --------------------------------------------------------------- */
a {
    color:inherit;
    text-decoration:none;
    padding: 2px;
}
a::after {
    position: relative;
    content: "\FEFF°";
    margin-left: 0.10em;
    font-size: 90%;
    top: -0.10em;
    color: #dc322f;
}
a:hover {
    background: #eeefff;
    transition-property: background;
    transition-duration: 0.1s;
    border-radius: 0.3em;
}


#postamble {
    padding-top: 1em;
    border-top: 1.5px solid #bbb;
}

#content {
    padding-bottom: 1em;
}

/* --- Navigation Menu --- */
.menu {
    background-color: #ffffff;
    /* color: #000; #cb4b16; */
    position: sticky;		/*fixed */
    top: 0em;
    left: 0;
    width: 100%;
    line-height: 0.5;
    z-index: 999;
    font-size: 1.1em;
    margin: auto;
    border-top: 1.0px solid #bbb;
    border-bottom: 1.0px solid #bbb;
}

.menu ul {
    padding: 0 0;
    display: block;
    /* max-width: 42em; */
    /* margin: 1em auto; */
}

/* .menu ul:after{ */
/*     margin-bottom: 40px; */
/* } */

.menu li {
    display: inline;
    padding: 0 0.5%;
    flex-grow: 1;
    text-align: center;
}

/* Fixed sidenav, full height */
/* .sidenav { */
/*   width: 10%; */
/*   position: fixed; */
/*   z-index: 1; */
/*   top: 4px; */
/*   left: 10px; */
/*   background: #eeee; */
/*   overflow-x: hidden; */
/*   padding: 3px 0; */
/*   margin-top: 2rem; */
/*   color: #dc322f; */
/*   font-weight: 400; */
/*   font-size: 1.2rem; */
/* } */

a.animate-link, .menu a {
    position: relative;
}

a.animate-link:before, .menu a:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 1px;
    bottom: 0;
    left: 0;
    background-color: #000;
    visibility: hidden;
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transition: all 0.25s ease-in-out 0s;
    transition: all 0.25s ease-in-out 0s;
}

a.animate-link:hover, .menu a:hover {
    /* color: #000; #268bd2; */
    background: inherit;
    position: relative;
}
a.animate-link:hover:before, .menu a:hover:before {
    visibility: visible;
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
}

a.animate-link:after, .menu a:after {
    content: "";
    margin: unset;
}

/* --- Headers ------------------------------------------------------------- */

h1, h3 {
    padding: 15px 0 3px;
    /* clear: both; */
    font-weight: 400;
}
h1 { font-size: 1.6rem; padding-top: 2.5em;}
h3, h4 { font-weight: 400; font-size: 1.3em;}
h5, h6 {
    font-size: 1.15rem;
    font-weight:normal;
    margin-top:-0.15em;
    margin-bottom:-0.4em;
}

h2 { font-weight: 400;
     /* font-size: 1.5rem; */
     color: #cb4b16;
   }

/* make h2 links scroll right with fixed navigation bar */
/* h2::before {
    display:block;
    content: " ";
    padding: 0.5em;
    margin-top: -10em;
    height: 10em;
    visibility: hidden;
} */

.links h5::before, h4::before {
    content: "§";
    padding-right: 1.2%;
    font-size: 1.5rem;
    font-weight: 300;
    vertical-align: middle;
    color: #cb4b16;
    position: absolute;
    margin: 0 -0.65em;
}
/* ------ sections ------ */

.research {
    overflow: auto;
    padding-bottom: 2%;
}

.paper-quotes li {
    margin-bottom: 1em;
}

article, .outline-text-2 {
    margin-left: 1em;
}

/* --- content lists --- */
li {
    padding: 0px 0px 0.2em 0px;
    margin-left: 0.5em;
}

/* --- Media ------------ */
img {
    padding: 5px 20px;
    width: 100%;
    margin: auto;
    display: block;

    /* border: 1px solid; */
}

img.full-width {
    padding: 2em 0px;
    max-width: 90vw;
    width: 90vw;
    overflow: hidden;
    position: relative;
    left: calc((-90vw + 44em) / 2 - 40px);
}

figcaption {
    display: table;
    text-align: center;
    margin-top: 2em;
    margin-bottom: 1em;
    width: 100%;
}

video {
    width: 100%;
    height: auto;
}


/* --- Title/Subtitle ------------------------------------------------------ */

.title {
    font-size: 2.5em;
    line-height: 1em;
    font-weight: 300;
    text-align: right;
    margin-top: -2em;
}
.title::before {
    content: url('static/me.png');
    float: left;
}
.subtitle {
    font-size: 1.2em;
    line-height: 1.5em;
    font-weight: 300;
    text-align: right;
    margin-bottom: 1em;
}


/* --- Code ---------------------------------------------------------------- */
code, pre {
    font-size:      90%;
    font-family:    monospace;
    line-height:    125%;
    color: #555;
    overflow: auto;
    /* background:     #fcfcfc; */
}
pre {
    border-top:     .5px solid #ccc;
    border-bottom:  .5px solid #ccc;
    padding-left:   2.0em;
    padding-top:    0.5em;
    padding-bottom: 0.5em;
}
pre.output {
    font-size:      85%;
    font-family:    monospace;
    line-height:    125%;
    /* background:     #fff; */
    border:         none;
    padding-left:   2.0em;
    padding-top:    0.5em;
    padding-bottom: 0.5em;
}

.function, .class {
    font-weight: 400;
}
.comment {
    color: #459;
}

/*--- Tables ---*/
table {
    margin-left: auto;
    margin-right: auto;
    min-width: 33%;
    border-top:     .5px solid #ccc;
    border-bottom:  .5px solid #ccc;
    padding-top:    0.5em;
    padding-bottom: 0.5em;
}

td {
    padding: 0.2em 0.5em;
    text-align: center;
}

/*--- Icons ---*/

.logo {
    width: 36px;
    height: 36px;
    padding: 4px;
    vertical-align: middle;
}
.feed-logo {
    width: 32px;
    height: 32px;
    /* padding: 0; */
    margin-bottom: -4px;
}

.cc-logo {
    height: 2em;
    padding-bottom: 0.8em;
    vertical-align: middle;
}
a.logo {width: 36px; height: 36px;}
a.logo:after, a.cc-logo:after{all:unset;}
a.logo:hover, a.cc-logo:hover{background:none; border-radius:0px; transition-property:none;}

/* Quote */

blockquote {
    /* border-left: 0.3em solid #eee8d9; */
    color: #cb4b16;
    font-size: 1.04em;
    padding: 0 1em;
    margin: 1.2em 3em;
}

blockquote:before {
    position:absolute;
    content: "“";
    font-size: 3em;
    opacity: 0.4;
    margin: 0.15em -0.44em;
    vertical-align: top;
}

/*
h1::before {
    counter-increment: h1;
    margin-right:10px;
    color: white;
    background-color: black;
    padding-left: 10px; padding-right:10px;
}
h2::before {
    counter-increment: h2;
    margin-right: 10px;
}
h3::before {
    content: counter(h1) "."counter(h2) "."counter(h3) " ";
    counter-increment: h3;
    margin-right:10px;
}
*/

/* Bibliography */

/* Bibliography */
h1.org-ref-bib-h1 {
    padding-top: 1em;
}

.org-ref-bib b {
    color: inherit;
    font-weight: inherit;
}

.org-ref-bib li{
    list-style-type: none;
    margin: 0 0 0.8em 0;
}

aside {
    width: 30%;
    padding-left: .5rem;
    margin-top: 1rem;
    margin-left: 1rem;
    float: right;
    box-shadow: inset 4px 0 5px -5px #268bd2;
}

aside > p {
    margin: .5rem;
}


/*--- Responsive --------------------------------------*/

@media screen and (max-width : 800px){

    .menu ul { position: sticky; }
    .menu li { padding: 0; }

    pre {
	display: block;
	width: 100%;
	line-height: 100%;
	font-size: 80%;
	padding-left: unset;
	margin-left: -2em;
    }

    figure, img {
	position: relative;
	width: 50% !important;
        float: unset !important;
    	display:block;
	padding: 0 0 0 0;
	margin-bottom: 1.5em;
    }
    figure {
	margin: 1.5em auto;
    }
}

@media screen and (max-width : 780px){

    .menu,.sidenav {
	position: unset;
	width: 100vw;
	/* margin-top: 1em; */
    }

    .menu li {
	display: block;
	padding: 0 0.5%;
	flex-grow: 1;
	text-align: center;
    }

    .menu ul {
	/* flex-direction: column; */
	line-height: 1.5;
    }

    .research { overflow:unset;}

    h4,h5,h6 {
        text-align:center;
        width: 90vw;
	margin: auto;
    }
}

@media screen and (max-width : 550px){

    .subtitle .email {font-size: 0.8em; margin: auto;}

    .email {font-size: 1em;}

    h4::before, .links h5::before{
        content:' ';
        display: block;
    }

    figure, img { width: 100% !important; }

    .menu ul { line-height: 1.8; }

    a.logo {
        width: 15%;
	padding: 1px;
    }

    .title{
	margin: auto !important;
	padding: 5%;
	line-height: 1.2;
	text-align: center;
    }

    .title::before{
        float: unset;
        display:block;
    }

    .subtitle {
        text-align: center;
        line-height: 1.8;
        width: 70%;
        margin: auto;
    }
    li {
        margin-left: -7%;
        padding-left:unset;
        padding-bottom: 1em;
    }
    h1,h2,h3,h4,h5,h6 {
        text-align:center;
        width: 90vw;
    }
    body {
        width: 95%;
        padding: unset;
        margin: unset;
    }

    .menu,.sidenav {
	position: unset;
    }
}

@media screen and (max-width : 360px){

    .subtitle .email {font-size: 0.8em; margin-left: -2em;}
    .email {font-size: 0.9em;}

}

/* fira-sans-300 - latin */
@font-face {
    font-family: 'Fira Sans';
    font-style: normal;
    font-weight: 300;
    src: local('Fira Sans Light'), local('FiraSans-Light'),
	 url('static/fonts/fira-sans-v8-latin-300.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
	 url('static/fonts/fira-sans-v8-latin-300.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* fira-sans-regular - latin */
@font-face {
    font-family: 'Fira Sans';
    font-style: normal;
    font-weight: 400;
    src: local('Fira Sans Regular'), local('FiraSans-Regular'),
	 url('static/fonts/fira-sans-v8-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
	 url('static/fonts/fira-sans-v8-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* fira-sans-500 - latin */
@font-face {
    font-family: 'Fira Sans';
    font-style: normal;
    font-weight: 500;
    src: local('Fira Sans Medium'), local('FiraSans-Medium'),
	 url('static/fonts/fira-sans-v8-latin-500.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
	 url('static/fonts/fira-sans-v8-latin-500.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}