html {
    box-sizing: border-box;
}
*, *:before, *:after {
    box-sizing: inherit;
}

html {
    font-size: 24px;
}

body {
    font-family: 'freight-sans-pro', sans-serif;
    background: linear-gradient(to right, #f8f8f8 0%, white 50%, #f8f8f8 100%)
}

p {
    line-height: 1.6;
    text-align: justify;
    margin: 2rem 0;
}

hr {
    border: 0;
    margin: 0;
    border-bottom: 1em solid #f8f8f8;
}

ul {
    line-height: 1.6;
    text-align: justify;
    margin: 2rem 0;
}

a {
    color: #5500FF;
    color: #0055FF;
    color: #FF0055;
    /* text-decoration: none; */
}

blockquote {
    color: #999;
}

blockquote p {
    text-align: justify;
}

h1 {
    font-size: 1.6em;
    font-weight: 800;
    margin: 1em 0;
}

h2 {
    font-size: 2em;
    font-weight: 400;
    margin: 2em 0 1em;
}

h3 {
    font-size: 1.5em;
    font-weight: 400;
    margin: 2em 0 1em;
}

.nav-block {
    margin: 0;
    padding: 1em 0;
    background-color: #f8f8f8;
    background-image: url('/img/redrocks.png');
    background-size: contain;
    background-position: 100% 100%;
    background-repeat: no-repeat;
    background-blend-mode: multiply;
}

.nav-block svg {
    stroke: #ccc;
}

.nav-block p {
    margin: 2em 0;
}

.nav-block .margin {
}

pre {
    margin: 0 -2em;
    padding: 0.4rem 2em 2em;
}

pre.highlight {
    padding: 1rem 2rem;
}

code, pre, pre > code {
    font-family: 'fira-mono', monospace;
    line-height: 1.6;
    text-shadow: none;
    font-size: 0.85rem;
}

:not(pre) > code {
    border-radius: 0;
    background: transparent !important;
}
:not(pre) > code,
:not(pre) > code .token {
    /*font-weight: bold;*/
}

a > code,
a > code .token {
    color: #FF0055 !important;
}

:not(pre) > code, pre {
    background: #f8f8f8;
    overflow: auto;
    color: #FF0055;
}

.margin {
    margin: 0 auto;
    max-width: 60ch;
    width: 60ch;
}

.signup-form {
    border-left: 1em solid #eee;
    margin: 4em 0;
    padding: 0 0 0 2em;
    background-color: transparent;
}

.signup-form input,
.signup-form button {
    display: block;
    width: 100%;
    margin: 1em 0;
}

.signup-form input[type="text"] {
    background: #ffffff88;
}

.signup-form p {
    margin-bottom: 1em;
}

.signup-form input[type="submit"] {
    margin-bottom: 2em;
    border: none;
}

.footer-content .signup-form {
    border: none;
    background-color: none;
    padding: 0;
    margin: 2em 0;
}

.footer-content .signup-form p:first-of-type {
    margin: 2em 0;
}

input {
    font-family: 'freight-sans-pro', sans-serif;
    font-size: 1rem;
    line-height: 1.6;
    padding: 0.5em;
    border: 1px solid #eee;
    outline: none;
    border-radius: 0.5em;
}

input:focus {
    border-color: #0055FF;
}

input[type="submit"] {
    background-color: #FF0055;
    font-weight: bold;
    color: white;
}


.post-footer {
    background-color: #f8f8f8;
    padding: 2em 0;
    margin: 6em 0;
}

.footer-content {
    margin-bottom: 6em;
}

.post-footer p:first-of-type {
    margin-top: 0;
}

.post-footer p:last-of-type {
    margin-bottom: 0;
}

.tags > .tag:before {content:', ';}
.tags > .tag:only-child:before {content:'';}
.tags > .tag:first-child:before {content:'';}
.tags > .tag:last-child:before {content:' and ';}


p .feather {
    vertical-align: sub;
}

.blog-all .post-content > p > a:first-of-type {
    font-weight: bold;
}

.header {
    display: flex;
    margin: 2em 0;
}

.header a,
.header strong {
    margin: 0 1em 0 0;
}

.hero {
    min-height: fit-content;
    display: flex;
    flex-direction: column;
}

.hero > .margin {
    flex: 1;
    display: flex;
    align-items: flex-end;
    min-height: fit-content;
}

@media (max-width: 1150px) {
    h1 {
        font-size: 1.6em;
    }
    h2 {
        font-size: 1.33em;
    }
    h3 {
        font-size: 1.25em;
    }
    html {
        font-size: 18px;
    }
    .nav-block {
        background-size: cover;
        background-position: 50% 50%;
    }
    .margin {
        margin: 0 1em;
        width: auto;
    }
    pre {
        margin: 0;
        padding: 1em 0;
    }
    .diff-filename {
        margin-bottom: 0 !important;
    }
}


.post-content {
    margin: 2rem 0 0 0;
}

pre .information {
    float: right;
    opacity: .75;
    margin: 0;
    color: #aaa;
    line-height: 1.6;
}

.language-elixirDiff .inserted, .language-javascriptDiff .inserted, .language-markupDiff .inserted {
    background-color: #F0F9F0!important;
    display: inline-block;
    width: calc(100% + 2em);
    margin-left: -1em;
    padding-left: 1em;
}

.language-elixirDiff .token.deleted, .language-elixirDiff .token.inserted, .language-javascriptDiff .token.deleted, .language-javascriptDiff .token.inserted, .language-markupDiff .token.deleted, .language-markupDiff .token.inserted {
    color: inherit!important;
}

.token.inserted .token.operator:first-child {
    color: #F0F9F0!important;
}

.language-elixirDiff .deleted, .language-javascriptDiff .deleted, .language-markupDiff .deleted {
    background-color: #F9F0F0!important;
    display: inline-block;
    width: calc(100% + 2em);
    margin-left: -1em;
    padding-left: 1em;
}

.language-elixirDiff .token.deleted, .language-elixirDiff .token.deleted, .language-javascriptDiff .token.deleted, .language-javascriptDiff .token.deleted, .language-markupDiff .token.deleted, .language-markupDiff .token.deleted {
    color: inherit!important;
}

.token.deleted .token.operator:first-child {
    color: #F9F0F0!important;
}

.literate h1 a {
    font-size: 2rem;
    font-weight: 400;
}






.correction {
    background-color: #f8f8f8;
    padding: 2em;
}

.correction *:nth-child(1) {
    margin-top: 0;
}

.correction *:last-child {
    margin-bottom: 0;
}