/*! Fonts sourced from Font Squirrel (https://www.fontsquirrel.com) on August 28, 2020 */

/* Display Font */
/* headlines */
@font-face {
    font-family: 'immortal';
    src: url('../font/immortal-webfont.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* Sans Serif Font */
/* body text */
@font-face {
    font-family: 'raleway';
    src: url('../font/raleway-bold-webfont.woff2') format('woff2');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'raleway';
    src: url('../font/raleway-bolditalic-webfont.woff2') format('woff2');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'raleway';
    src: url('../font/raleway-italic-webfont.woff2') format('woff2');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'raleway';
    src: url('../font/raleway-regular-webfont.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* Serif Font */
/* blockquotes (& more?) */
@font-face {
    font-family: 'spectral';
    src: url('../font/spectral-bold-webfont.woff2') format('woff2');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'spectral';
    src: url('../font/spectral-bolditalic-webfont.woff2') format('woff2');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'spectral';
    src: url('../font/spectral-italic-webfont.woff2') format('woff2');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'spectral';
    src: url('../font/spectral-regular-webfont.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* Monospace Font */
/* links & undetermined uses */
@font-face {
    font-family: 'anonymous_pro';
    src: url('../font/anonymous_pro-webfont.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
/* @font-face {
    font-family: 'anonymous_pro';
    src: url('anonymous_pro_b-webfont.woff2') format('woff2');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'anonymous_pro';
    src: url('anonymous_pro_bi-webfont.woff2') format('woff2');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
} */
@font-face {
    font-family: 'anonymous_pro';
    src: url('../font/anonymous_pro_i-webfont.woff2') format('woff2');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}


/* Pure CSS Framework Modifier - supposedly necessary to add padding and borders directly to grid units;
I don't think I could reproduce a difference when disabling the rule last time I checked */
.pure-g > div {
        box-sizing: border-box;
    }

/* page design formatting */
/* used in every page */
body {
    background-color: #396C99;
    background-image: 
    url("../img/backgrounds/bg-crows.gif"),
    url("../img/backgrounds/transparent.png"),
    url("../img/backgrounds/bg-moss-4.gif"), 
    url("../img/backgrounds/bg-coccolithophores-2.gif");
}
.headbar {
    display: block;
    border: solid 0.35em #74151F;
    border-top: none;
    z-index: -5;
    position: relative;
    margin: auto;
    box-sizing: border-box;
}
@media (max-width: 35.499em) {
    .headbar {
        border: solid 0.15em #74151F;
        border-top:none;
    }
} 
#toplogo {
    margin: 0em 0em -55% 0em;
    border-right: solid 0.5em #74151F;
    border-bottom: solid 0.5em #74151F; 
    border-bottom-right-radius: 1em;
}
@media (max-width: 47.999em) {
    body {
        background-color: #396C99;
        background-image:
        url("../img/backgrounds/bg-bubble.gif"),
        url("../img/backgrounds/bg-gephyrocapsa-oceanica.gif");
    }
    .vanish {
        display:none;
    }
}	
.forty-em-one-column {
    max-width: 40em;
    margin: auto;
}
#call-to-action {
    margin-top: 0.5em;
    margin-right: 3em;
}

/* content formatting */ 
/* potentially used in any page */
.main-column {  /* class no longer applies to paragraphs - changed to .main-column from .main-par */
    padding: 0em 1.2em;
    text-align: justify;
    border: solid 0.23em #1E135F;
    border-top: solid 1px #1E135F;
    background: #EAFFB9;
    }
h1, h2 {
    text-align: center;
}
.left-head {
    text-align: left;
}
.work-title, .post-script {
    font-style: italic;
}
.attribution {
    font-size: 13px;
}
blockquote p, blockquote div {
    font-family: spectral, Cambria, Georgia, serif;
    font-size: 105%;
    margin-left: 2em;
}
.bigger-font {
    font-size: 18px;
}
.label-emphasis {
    font-weight: bold;
}
.emphasis {
    padding: 0 .2em;
    font-weight: bold;
    background-color: rgba(255, 241, 212, 50%);
    /* background-color: rgba(200, 250, 225, 50%); */
}
.plain-list {
    list-style-type: none;
}
.plain-list li {
    margin: 0.7em auto 0.5em -2em;
}
.footnote, .reduced {
    font-size: smaller;
}
.footnote-mark {
    padding: 0.2em 0.5em;
}
.body-img {
    border: 2px solid #555555;
    border-radius: 0.3em;
}
.zazzle-embed {
    max-width: 100%;
}
.vert-image-roll {
    margin-top:0.5em;
    margin-bottom:0.5em;
}
.reduce-img {
margin: auto;
max-height: 20em;
}
/* 
can't get this fucker to work no matter how I word it. May be built in browser stylesheets on mac os. No more time to fool with it. unimportant
a.img-link {
    text-decoration: none;
} */
/* a:hover {
    text-decoration: transparent;
    text-decoration-style:none;
} */

/* featured article section on index.html and articles-1.html */
.stand-out {
    border: .25em solid #D68855;
    padding: 0.7em;
    border-radius: 0.7em;
}

/* featured articles section on index.html */
aside.main-column {
    padding: 0.6em;
}

/* footer formatting */
.shrink {
    padding: 0em;
    margin: 0.5em 0.75em;
}
.foot-1 {
    padding: 0em 1.2em;
    text-align: justify;
    border: solid 0.2em #1E135F;
    background: #cfe9a9;
    border-top: none;
}
.top-footer {
    border-top: solid 0.2em #1E135F;
}

/* Bottom footer block on every page */
#copyright {
    text-align: center;
}

/* ::::::::::: */
/* to-do: SMACSS-ify selectors */
/* new additions to be sorted */

/* basic */
h1, h2, h3, h4 {
    font-weight: normal;
    font-family: 'immortal';
    letter-spacing: 1px;
}
.small-h2 {
    font-size: 1em;
    margin-bottom:0.2em;
}
/* h4 declaration was not in styles-lb-combined.css until just now; let's not have any more new rules
that differ, unless they're in the standard-bandwidth block at the bottom */
h4 {
    margin: 0.7em auto 0.5em;
}
p, li {
    font-family: 'raleway';
}

main a, aside a {
    font-family: 'anonymous_pro';
    color: #461bac;
    padding: 0.2em;
}
#h1-link {
    font-family: 'immortal';
}
main a:visited, aside a:visited {
    color: #794e78;
}
main a:hover, aside a:hover {
    color: #c3d8f9;
    background-color: #011E3C;
    padding: 0.2em;
    border-radius: 3px;
}
main a:active, aside a:active {
    color: #011E5C; 
    background-color: transparent;
}

/* quotes */
blockquote {
    margin: 1em 0.5em;
    padding-right: 1em;
    border: 2px solid #d9eec7;
    background-color: rgba(200, 250, 225, 50%);
    padding-bottom: 0.5em;
}
blockquote p {
    margin-left: 1.5em;
}
blockquote cite {
    display: inline-block;
    margin-left: 3em;
}
.inline-quote {
    font-style: italic;
    font-family: spectral, Cambria, Georgia, serif;
}

/* buttons and nav - so far this group only applies to the in-page navigation on the articles page,
none of it affects the main navigation at top of every page */
.to-top {
    font-size: 1.3em;
}
.page-nav-block, .blog-nav-block {
    margin: 0.4em auto;
    text-align: center;
}
.page-nav-link, .blog-nav-link {
    border: 2px solid #1E135F;
    border-radius: 4px;
    background-color: rgb(247, 236, 245);
    padding: 0.2em;
    margin: 0.1em auto;
    display: inline-block;
    color: #664444;
    text-decoration: none;
    font-family: "raleway";
    text-align: center;
}
 .page-nav-link:hover, .blog-nav-link:hover {
    color: #442222;
    background-color: rgb(249, 249, 249);
    text-decoration: underline;
    border: 2px solid #1E135F;
    border-radius: 4px;
    padding: 0.2em;
}
.blog-nav-block {
    border: 2px solid #1E135F;
    padding: 0.3em;
}

/* ** !!! ** */
/* collapsing menu */
/* starter code (next 9 declarations) modified from https://purecss.io/layouts/tucked-menu-vertical/ 
although javascript has been rewritten from scratch to do submenus since then.
later declarations are my creation */
.nav-wrapper {
    height: 2.1em;
    overflow: hidden;
    /* I guess the transition is triggered every time the height value changes. good to know. */
    transition: height 0.5s;
    padding-bottom: 0.5em;
}
.transforming-wrapper {
    text-align: right;
    font-weight: normal;
    font-family: 'immortal';
}
.main-menu-hamburger {
    width: 34px;
    height: 34px;
    position: absolute;
    top: 0;
    right: 0;
    display: none;
}
.main-menu-hamburger .x-switch-animation {
    background-color: #777;
    display: block;
    width: 20px;
    height: 2px;
    border-radius: 100px;
    position: absolute;
    top: 30px;
    right: 13px;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s;
    transition: all 0.5s;
}
/* :first-child specifies not the child of elements having .x-switch-animation, but an element having .x-switch-animation itself
and only if the element having .x-switch-animation element is the first subelement (child) of an element having .main-menu-hamburger */
/* i guess this makes sense, because if .main-menu-hamburger:first-child referred to its own child,
then the pseudo-class on Element.main-menu-hamburger would refer to an element other than the one having the pseudo-class */
/* and pseudo-classes should point to their owners; there's no white space between after all */
.main-menu-hamburger .x-switch-animation:first-child {
    transform: translateY(-6px);
}
.main-menu-hamburger .x-switch-animation:last-child {
    transform: translateY(-12px);
}
.main-menu-hamburger.x-shape .x-switch-animation {
    transform: rotate(45deg);
}
.main-menu-hamburger.x-shape .x-switch-animation:first-child {
    transform: rotate(-45deg);
}
@media (max-width: 47.999em) {
    .transforming-wrapper {
        text-align: left;
    }
    .main-menu-hamburger {
        display: block;
    }
    #main-menu {
        padding-left: 0.25em;
    }
}
.pure-menu-heading {
    text-transform: none;
}

/* additions to collapsingmenu */
#main-menu {
    background: #E8F4E0;
    border-bottom: solid 0.2em #10144D;
    border-top: solid 0.2em #10144D;
    padding-bottom: 0.65em;
    padding-right: 0.25em;
}
.site-title {
    font-size: 120%;
    display: inline-block;
    font-family: 'immortal', 'Courier New', Courier, monospace;
    font-weight: 900;
}
.site-title:hover {
    text-decoration: solid underline #426b96;
    color: #426b96;
}
.pure-menu-item {
    padding-top: 0.25em;
}
.pure-menu-link {
    white-space: normal;
    padding: 0.5em 0.4em;
    display: inline-block;
    border: solid 0.1em #E8F4E0;
}
a.pure-menu-link:hover {
    border-radius: 4px;
    border: solid 0.1em #426b96;
}
.bandwidth-switch {
    color: #222222;
    background-color: #dddddd;
    border: 1px solid #000000;
    font-size: 80%;
}
a.bandwidth-switch:hover {
    border-color: #ff7777;
}

/* additions when changing to menu/submenu layout */
#submenu {
    display: none;
    padding-left: 0;
}
.pure-menu-horizontal .pure-menu-heading,
.pure-menu-horizontal .pure-menu-item,
.pure-menu-horizontal .pure-menu-separator {
	vertical-align: top;
}
.submenu-heading, .submenu-item {
    text-align: left;
}
.pure-menu-link:focus, .pure-menu-link:hover{
    border: 0.1em solid #ee3333;
    border-radius: 6px;
}
#submenu.narrow-menu {
    padding-left: 1em;
}
.submenu-link {
    display: list-item;
    list-style: circle inside;
}

/* standard-bandwidth only rules: */
/* empty so far. try to put them all here if we add some. */

/* up above, the body, @media, and @font-face rules differ from styles-lb-combined.css,
and the .headbar rule here is not in the other file. Other than that, the differences are just 
different font stack declarations, and two one-line color rules at the bottom of the other file */

/* I combine the low-bandwidth file instead of cascading it because extra file requests can be
more trouble on bad networks than a smidge more data */