/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

    
:root {
    --width: 720px;
    --font-main: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
    --font-secondary: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
    --font-scale: 1em;
    --background-color: #141814;
    --heading-color: #1BBC68;
    --text-color: #1BBC68;
    --link-color: #1BBC68;
    --visited-color: #10540e;
    --main-color: #1BBC68;
    --code-background-color: #1BBC68;
    --code-color: #141814;
    --blockquote-color: #1BBC68;
}

body {
    font-family: var(--font-secondary);
    font-size: var(--font-scale);
    margin: auto;
    padding: 20px;
    max-width: var(--width);
    text-align: left;
    background-color: var(--background-color);
    word-wrap: break-word;
    overflow-wrap: break-word;
    line-height: 1.5;
    color: var(--text-color);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-main);
    color: var(--heading-color);
}

a {
    color: var(--link-color);
    cursor: pointer;
    text-decoration: underline;
}

a:hover {
    text-decoration: underline;
}

main {
    margin-top: 40px;
    margin-bottom: 20px;
    padding: 30px;
    border: 1px solid var(--link-color);
}

nav a {
    margin-right: 8px;
}

strong,
b {
    color: var(--heading-color);
}

button {
    margin: 0;
    cursor: pointer;
}

main {
    line-height: 1.6;
}

table {
    width: 100%;
}

hr {
    border: 0;
    border-top: 1px dashed;
}

img {
    max-width: 100%;
}

code {
    font-family: monospace;
    padding: 2px;
    background-color: var(--code-background-color);
    color: var(--code-color);
    border-radius: 3px;
}

blockquote {
    border-top: 1px solid var(--heading-color);
    border-bottom: 1px solid var(--heading-color);
    color: var(--text-color);
    padding: 20px;
    font-style: italic;
    margin-left: 0px;
    margin-right: 0px;
}

footer {
    padding: 25px 0;
    text-align: center;
    opacity: 0.6;
}

.title:hover {
    text-decoration: none;
}

.title h1 {
    font-size: 1em;
    padding: 5px 10px;
    background: var(--heading-color);
    color: var(--background-color);
    display: inline-block;
    font-weight: 400;
}

.inline {
    width: auto !important;
}

.highlight,
.code {
    padding: 1px 15px;
    background-color: var(--code-background-color);
    color: var(--code-color);
    border-radius: 3px;
    margin-block-start: 1em;
    margin-block-end: 1em;
    overflow-x: auto;
}


.highlight {
    border-left: 5px solid var(--heading-color);
}

/* blog post list */
ul.blog-posts {
    list-style-type: none;
    padding: unset;
}

ul.blog-posts li {
    display: flex;
    margin-bottom: 20px;
}



ul.blog-posts li time {
    font-style: normal;
}

ul.blog-posts li span {
    flex: 0 0 130px;
}

ul.blog-posts li a:visited {
    color: var(--visited-color);
}

table {
    border-collapse: collapse;
}

table,
th,
td {
    border: 1px dashed var(--heading-color);
    padding: 10px;
}

@media only screen and (max-width:767px) {
    main {
        padding: 20px;
        margin-top: 30px;
        margin-bottom: 10px;
    }

    ul.blog-posts li {
        flex-direction: column;
    }

    ul.blog-posts li span {
        flex: unset;
    }
}