/*
When setting the primary font stack, apply it to the Pure grid units along
with `html`, `button`, `input`, `select`, and `textarea`. Pure Grids use
specific font stacks to ensure the greatest OS/browser compatibility.
*/
html, button, input, select, textarea, .pure-g [class *= "pure-u"] {
    /* Set your content font stack here: */
    font-family: 'Ubuntu', sans-serif;
    color: #DEDEDE;
    letter-spacing: 0.05em;
    font-weight: lighter;
}

body {
    background-color: rgb(34, 34, 34)
}

/* BEGIN - Magnetic footer */
html, body {
    height: 100%;
    margin: 0;
}
.ll-footer-push {
    height: 3em;
}
/* END - Magnetic footer */

img {
    max-width: 100%;
    height: auto;
}

a {
    color: #D7F1B6;
    text-decoration: underline;
}

h1 {
    font-size: 3em;
}

.ll-site-container {
    min-height: 100%;
    /* Equal to height of footer */
    /* But also accounting for potential margin-bottom of last child */
    margin-bottom: -3em;

    background-image:url('/img/deepsea_bg_smaller_footer.png');
    background-color: #2a323f;
    background-size: contain;
    background-position: bottom;
    background-repeat: no-repeat;
}

.ll-site-nav,
.ll-content-container {
    margin: 0 auto;
    padding: 0.5em;
    max-width: 960px;
}

.ll-menu-item {
    font-size: 1.2em;
    color: #D7F1B6;
}

.ll-menu-item:hover, .ll-menu-item:active {
    font-size: 1.2em;
    background-color: #D7F1B6;
    color: black
}

.ll-social-icon {
    margin-right: 0.0em;
    height: 0.8em;
}

.ll-site-header,
.ll-site-footer {
    background-color: rgb(20, 20, 20);
    min-height: 3em;
    width: 100%;
}

.ll-site-footer{
    display: flex;
    flex-direction: column;
    justify-content: center;
}


/* Post */

.ll-post-title {
    margin-bottom: 0;
}
.ll-post-meta {
    margin-top: 0.5em;
    font-size: 0.8em;
    color: #DEDEDE;
    /*margin-bottom: : 0;*/
}

/* Summary */

.ll-summary-read-more {
    text-decoration: none;
    font-style: italic;
}

.ll-summary-footer {
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}

/* Pageination */

ul.pagination {
    list-style-type: none;
    margin: 0;
    padding: 0;
    /*overflow: hidden;*/
    /*background-color: #333333;*/
}

li.page-item {
    float: left;
    margin-left: 1em;
}

li.page-item.active {
    font-weight: bold;
}

/************************************************** 
 *  Hidden/Visible responsive helper classes for PureCSS Framework - using pixels or EMs 
 **************************************************/

/* pure-hidden-xs */
@media screen and (max-width:35.438em) {
    .pure-visible-sm{display:none}
    .pure-visible-md{display:none}
    .pure-visible-lg{display:none}
    .pure-visible-xl{display:none}
    .pure-hidden-xs{display:none}
}
/* pure-hidden-sm */
@media screen and (min-width:35.5em) and (max-width:47.938em) {
    .pure-visible-xs{display:none}
    .pure-visible-md{display:none}
    .pure-visible-lg{display:none}
    .pure-visible-xl{display:none}
    .pure-hidden-sm{display:none}
}
/* pure-hidden-md */
@media screen and (min-width:48em) and (max-width:63.938em) {
    .pure-visible-xs{display:none}
    .pure-visible-sm{display:none}
    .pure-visible-lg{display:none}
    .pure-visible-xl{display:none}
    .pure-hidden-md{display:none}
}
/* pure-hidden-lg */
@media screen and (min-width:64em) and (max-width:79.938em) {
    .pure-visible-xs{display:none}
    .pure-visible-sm{display:none}
    .pure-visible-md{display:none}
    .pure-visible-xl{display:none}
    .pure-hidden-lg{display:none}
}
/* pure-hidden-xl */
@media screen and (min-width:80em) {
    .pure-visible-xs{display:none}
    .pure-visible-sm{display:none}
    .pure-visible-md{display:none}
    .pure-visible-lg{display:none}
    .pure-hidden-xl{display:none}
}