/*
GOOGLE FONTS: OPEN SANS, LEXEND DECA, LEXEND MEGA
Lexend Mega for stylistic titles
Lexend Deca for plain titles
Open Sans for body text
*/

@import url('https://fonts.googleapis.com/css2?family=Lexend+Deca&family=Lexend+Mega&family=Open+Sans&display=swap');

/*
font-family: 'Lexend Deca', sans-serif;
font-family: 'Lexend Mega', sans-serif;
font-family: 'Open Sans', sans-serif;
*/

/*
COLORS:
#cfdbd5 cool grey
#e8eddf warm grey
#d87e2f rust
#77c0fc sky blue
#242423 black
#333533 off-black
*/

@media only screen and (max-width: 615px) {
    #blog { flex-direction: column; }
    #header { height: 1em; }
    #header-bound {
        min-height: 1em;
    }
    .text-button {
        padding: 0;
        font-size: 0.75em;
    }
    .text-button img {
        max-width: 1.25em;
        margin: 0.15em 0.3em;
    }
    .text-title { font-size: 1em; }
}
@media only screen and (min-width: 615px) {
    #all {
        max-width: 1000px;
        margin: 0 auto;
    }
    #blog { flex-direction: row; }
    #header { height: 3em; }
    #header-bound {
        min-height: 7em;
    }
    #left-blog, #right-blog { flex: 1 0 0; }
    #left-blog { margin-right: 1em; }
    #right-blog { margin-left: 1em; }
    .text-button {
        padding: 0.5em;
        font-size: 1em;
    }
    .text-button img {
        max-width: 1.75em;
        margin: 0.25em 0.5em;
    }
    .text-title { font-size: 2em; }
}

/* OVERARCHING BIG OL TAGS */

body {
    margin: 1.5em 2em !important;
    background-image: url(/images/so-white.png);
    background-attachment: fixed;
}

body img { max-width: 100%; }

/* HEADER */

#header-bound {
    position: relative;
    z-index: 3;
}

#header-wrap {
    width: 100%;
    position: sticky;
    top: 0;
    padding-top: 1em;
    z-index: 1;
}

#header {
    display: flex;
    justify-content: space-between;
    position: relative;
    margin: 0 auto;
    width: 100%;
}

#left-wrap {
    display: flex;
    justify-content: flex-start;
    margin-left: 0;
}

#right-wrap {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    margin-right: 0;
}

.nav-button { display: flex; }
.nav-button a { display: block; }

.nav-title {
    display: flex;
    justify-content: flex-start;
    margin-right: 2em;
}

#text-row {
    display: flex;
    flex-direction: row;
}

.text-title {
    font-family: 'Lexend Mega', sans-serif;
    flex-shrink: 0;
    display: block;
    margin: 0;
    color: #eaeaeb;
    font-weight: 700;
    line-height: 1em;
    letter-spacing: -0.5px;
    text-decoration: none;
    filter: drop-shadow(0px 0px 3px #333533) drop-shadow(0px 0px 3px #333533);
}

.text-button {
    font-family: 'Lexend Mega', sans-serif;
    color: #333533;
    font-weight: 700;
    line-height: 1em;
    letter-spacing: -.5px;
    text-decoration: none;
    transition: filter ease-in-out 250ms;
    margin: -1.5em 0;
    padding: 0 0.15em;
    list-style-type: none;
}

.text-button a {
    font-family: 'Lexend Deca', sans-serif;
    display: block;
    color: #e8eddf;
    font-size: 1em;
    font-weight: 600;
    line-height: 2em;
    letter-spacing: -0.5px;
    text-decoration: none;
}

.text-button a:hover, .text-button:hover { filter: drop-shadow(0px 1px 0px #77c0fc); }

.too-left { margin-right: -0.2em; }
.too-low { margin-top: -1.6em; }

.text-icon {
    display: block;
    color: #242423;
    font-size: 2em;
}

#middle {
    background-image: url(/images/so-white.png);
    background-attachment: fixed;
    margin: 1em auto 0;
    line-height: 1.5em;
    width: 100%;
    font-family: 'Open Sans', sans-serif;
    font-size: 1em;
    z-index: 5;
}

#image {
    position: absolute;
    top: 1em;
    right: 50%;
    margin-right: 3em;
    z-index: 0;
}
#image img { max-height: 350px; }

#introduction {
    position: relative;
    padding: 1em;
    margin-bottom: 3em;
    background-image: url(/images/broken_noise.png);
    background-attachment: fixed;
    color: #dbdbdc;
    z-index: 4;
}
#introduction h1, #introduction h2 {
    line-height: 1.1em;
    font-family: 'Lexend Deca', sans-serif;
}
#introduction h1 { color: #eaeaeb; }
#introduction h1:first-child { margin-block: 0; }
#introduction h2 { color: #cacacb; }
#introduction p:last-child { margin-block: 0; }

/* POSTS */

#blog {
    display: flex;
    flex: auto;
    justify-content: space-between;
}

.post {
    margin: 1em 0;
    padding: 1em 0;
}

.post p:last-child { margin: 1em 0 0; }

#blog h1 {
    font-family: 'Lexend Mega', sans-serif;
    color: #333533;
}

#left-blog h1, #right-blog h1 {
    font-size: 1em;
    text-transform: uppercase;
}

.post h1 {
    font-size: 1.5em !important;
    text-transform: none !important;
    transition: ease-in-out 250ms;
}
.post:hover h1 {
    color: #242423;
    transition: ease-in-out 250ms;
}
h1 a {
    text-decoration: none;
    color: #333533;
}
.post h1 a:hover { color: #242423; }

.post h2 {
    font-family: 'Lexend Deca', sans-serif;
    font-size: 1.25em !important;
    color: #333533;
    transition: ease-in-out 250ms;
}

.post .rmore-container {
  text-align: right;
}

.post .rmore {
    color: #333533;
    font-weight: 700;
    text-decoration: none;
    border-bottom: 2px solid rgba(24, 24, 23, 0);
    transition: ease-in-out 250ms;
}

.post:hover .rmore {
    border-bottom: 2px solid rgba(24, 24, 23, 1);
    transition: ease-in-out 250ms;
}

.post:hover .rmore:hover {
    color: #77c0fc;
    border-bottom: 2px solid rgb(119, 192, 252, 1);
    transition: ease-in-out 250ms;
}

.post p a, .post ol a, .post ul a, #right-blog .links a {
    color: #333533;
    font-weight: 700;
}
.post p img { max-width: 100%; }
#right-blog .links p {
    margin: 0.5em 0;
}

.post .date {
    text-align: right;
    color: #333533;
    font-family: 'Lexend Deca', sans-serif;
    font-weight: 700;
}

.tags {
  margin: 1em 0 1.5em;
}

.tag a {
    padding: 0.25em;
    border-radius: 10px;
    color: #eaeaeb;
    background-color: #333533;
    font-weight: 800;
    line-height: 200%;
    text-decoration: none;
    transition: ease-in-out 500ms;
}

.tag a:hover {
    color: #fff;
    background-color: #77c0fc;
    transition: ease-in-out 250ms;
}

.inverse a {
    color: #fff;
    background-color: #d87e2f;
    transition: ease-in-out 500ms;
}

.inverse a:hover {
    color: #eaeaeb;
    background-color: #333533;
    transition: ease-in-out 250ms;
}

/* RIGHT LINKS */

#right-blog {
  max-width: 10em;
}

/* FOOTER */

#footer {
    margin: 0 auto;
    width: 100%;
    margin-top: 3em;
    font-family: 'Lexend Mega', sans-serif;
    font-size: 0.75em;
}

/* THEME */

.post .title, h1.term-list-title {
  text-align: left;
}

.post p img {
  margin: 0;
}

.post-preview .meta {
  padding: 0;
  align-items: center;
}

.post code {
  font-size: 125%;
}

.terms {
  width: auto;
}
.terms .term {
  padding: 0.5em 0;
  font-family: 'Lexend Deca', sans-serif;
}
.terms .term a {
  color: #333533;
}
.terms .term a .page-count, .page-arrows a {
  color: #d87e2f;
  filter: drop-shadow(0px 0px 2px #cfdbd5);
  transition: color ease-in-out 250ms, filter ease-in-out 250ms;
}
.terms .term a .page-count:hover, .page-arrows a:hover {
  color: #333533;
  filter: drop-shadow(0px 0px 3px #d87e2f);
  transition: color ease-in-out 250ms, filter ease-in-out 250ms;
}

.reading-time {
  color: #333533;
  font-style: italic;
}

/* article.post-preview .meta{
  margin-top: 0.5em;
  padding-top: 0.5em;
  display: -webkit-flex;
  display:flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

article.post-preview .tags {
  margin-bottom: 0.2em;
  font-size: 0.7em;
}

article.post-preview .date {
  font-size: 0.7em;
  font-weight: bold;
  white-space: nowrap;
  text-align: right;
}
 */