/**
 * 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: 15.5pt;
    font-weight: 300;
    line-height: 1.5em;
    padding: 1em;
    max-width: 44em;
    margin: auto;
    /* background: #eff4e2; */
    background: #fdf6e3;
    text-rendering: optimizeLegibility;
}

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

b, strong {
    /* font-weight: 500; */
    color: #2aa198;
}

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

::-moz-selection {
    background:#FF5E99;
    color:#fff;
    text-shadow:none
}
::selection {
    background:#FF5E99;
    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: #eee8d5;
    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: #fdf6e3;
    /* 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: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    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;
}

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: "";
}

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

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

h2 { font-weight: 400;
     font-size: 1.4em;
     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.5em;
    font-weight: 300;
    vertical-align: middle;
    color: #cb4b16;
}
/* ------ 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;
    /* border: 1px solid; */
}

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


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

.title {
    font-size: 2.5em;
    line-height: 1em;
    font-weight: 300;
    text-align: right;
    margin-top: -1em;
}
.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;
    /* 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;
    padding: 0 1em;
    margin: 0 1em;
}
/*
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 */

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

.org-ref-bib li {
    margin-bottom: 0.2em;
}

/*--- 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 {
	position: unset;
	width: 100vw;
	margin-top: 1em;
    }

    .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;
    }
}

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

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

}