:root {
    --gray-000: #f8f9fa;
    --gray-100: #f1f3f5;
    --gray-200: #e9ecef;
    --gray-300: #dee2e6;
    --gray-400: #ced4da;
    --gray-500: #adb5bd;
    --gray-600: #868e96;
    --gray-700: #495057;
    --gray-800: #343a40;
    --gray-900: #212529;
    --red: #fa5252;
    --pink: #e64980;
    --grape: #be4bdb;
    --purple: #7950f2;
    --indigo: #4c6ef5;
    --blue: #228be6;
    --cyan: #15aabf;
    --teal: #12b886;
    --green: #40c057;
    --dark-green: rgb(0, 73, 0);
    --dark-plum: rgb(83, 0, 67);
    --yellow: #fab005;
    --orange: #fd7e14;
    --blue-300: #74c0fc;
    --blue-400: #4dabf7;
    --yellow-100: #fff3bf;
    --ghost-blue2: #80c3ea;
    --ghost-blue: #0845a9;
    --ghost-grey: #968f7f;
    --ghost-purple: #5b054f;

    --body-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --body-font-size: 16px;
    --body-line-height: 1.5;
    --body-color: var(--gray-700);
    --body-bg: #fff;
    --link-color: var(--ghost-purple);
    --link-hover-color: var(--ghost-grey);
    --heading-color: var(--gray-900);
    --border-color: var(--gray-300);
    --border-radius: .25rem;
    --sectioner-color: var(--ghost-blue);
    --code-font: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --code-color: var(--grape);
    --code-bg: var(--gray-000);
    --spacer: 1rem;
    --spacer-2: calc(var(--spacer) * 1.5);
    --spacer-3: calc(var(--spacer) * 3)
}

* {
    box-sizing: border-box
}

body {
    margin: 0;
    font-family: var(--body-font);
    font-size: var(--body-font-size);
    line-height: var(--body-line-height);
    color: var(--body-color);
    background-color: var(--body-bg);
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%
}

div.sectioner hr {
    border: 3px solid var(--sectioner-color);
    border-radius: 5px;
}

div.sectioner h1 {
    text-decoration: none;
    text-align: center;
}

a.header {
    text-decoration: none;
    text-align: center;
}

a {
    color: var(--link-color)
}

a:hover,
a:focus {
    color: var(--link-hover-color)
}

a strong {
    color: inherit
}

img {
    display: block;
    max-width: 100%;
    margin-bottom: var(--spacer);
    border-radius: var(--border-radius)
}

.social-container {
    display: flex;
}

.social-container img {
    margin-right: 10px;
}


.image-container {
    text-align: center;
    line-height: 100vh;
    white-space: nowrap;
}

.image-container img {
    vertical-align: middle;
    margin: 1.5rem auto 1.5rem auto;
}


hr.new5 {
    border: 3px solid var(--dark-green);
    border-radius: 5px;
}

table {
    margin-bottom: 1rem;
    width: 100%;
    border: 0 solid var(--border-color);
    border-collapse: collapse
}

td,
th {
    padding: .25rem .5rem;
    border-color: inherit;
    border-style: solid;
    border-width: 0;
    border-bottom-width: 1px
}

th {
    text-align: left
}

thead th {
    border-bottom-color: currentColor
}

mark {
    padding: .15rem;
    background-color: var(--yellow-100);
    border-radius: .125rem
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin-bottom: .5rem;
    font-weight: 600;
    line-height: 1.25;
    color: var(--heading-color)
}

h1 {
    font-size: 2rem
}

h2 {
    margin-top: 1rem;
    font-size: 1.5rem
}

h3 {
    margin-top: 1.5rem;
    font-size: 1.25rem
}

h4,
h5,
h6 {
    margin-top: 1rem;
    font-size: 1rem
}

p {
    margin-top: 0;
    margin-bottom: 1rem
}

ul,
ol,
dl {
    margin-top: 0;
    margin-bottom: 1rem
}

dt {
    font-weight: bold
}

dd {
    margin-bottom: .5rem
}

hr {
    position: relative;
    margin: var(--spacer-2) 0;
    border: 0;
    border-top: 1px solid var(--border-color)
}

abbr {
    font-size: 85%;
    font-weight: bold;
    color: var(--gray-600);
    text-transform: uppercase
}

abbr[title] {
    cursor: help;
    border-bottom: 1px dotted var(--border-color)
}

blockquote {
    padding: .5rem 1rem;
    margin: .8rem 0;
    color: var(--gray-500);
    border-left: .25rem solid var(--border-color)
}

blockquote p:last-child {
    margin-bottom: 0
}

@media(min-width: 30em) {
    blockquote {
        padding-right: 5rem;
        padding-left: 1.25rem
    }
}

figure {
    margin: 0
}

a[href^="#fn:"],
a[href^="#fnref:"] {
    display: inline-block;
    margin-left: .1rem;
    font-weight: bold
}

.footnotes {
    margin-top: 2rem;
    font-size: 85%
}

.lead {
    font-size: 1.25rem;
    font-weight: 300
}

.highlight .hll {
    background-color: #ffc
}

.highlight .c {
    color: #999
}

.highlight .err {
    color: #a00;
    background-color: #faa
}

.highlight .k {
    color: #069
}

.highlight .o {
    color: #555
}

.highlight .cm {
    color: #09f;
    font-style: italic
}

.highlight .cp {
    color: #099
}

.highlight .c1 {
    color: #999
}

.highlight .cs {
    color: #999
}

.highlight .gd {
    background-color: #fcc;
    border: 1px solid #c00
}

.highlight .ge {
    font-style: italic
}

.highlight .gr {
    color: red
}

.highlight .gh {
    color: #030
}

.highlight .gi {
    background-color: #cfc;
    border: 1px solid #0c0
}

.highlight .go {
    color: #aaa
}

.highlight .gp {
    color: #009
}

.highlight .gu {
    color: #030
}

.highlight .gt {
    color: #9c6
}

.highlight .kc {
    color: #069
}

.highlight .kd {
    color: #069
}

.highlight .kn {
    color: #069
}

.highlight .kp {
    color: #069
}

.highlight .kr {
    color: #069
}

.highlight .kt {
    color: #078
}

.highlight .m {
    color: #f60
}

.highlight .s {
    color: #d44950
}

.highlight .na {
    color: #4f9fcf
}

.highlight .nb {
    color: #366
}

.highlight .nc {
    color: #0a8
}

.highlight .no {
    color: #360
}

.highlight .nd {
    color: #99f
}

.highlight .ni {
    color: #999
}

.highlight .ne {
    color: #c00
}

.highlight .nf {
    color: #c0f
}

.highlight .nl {
    color: #99f
}

.highlight .nn {
    color: #0cf
}

.highlight .nt {
    color: #2f6f9f
}

.highlight .nv {
    color: #033
}

.highlight .ow {
    color: #000
}

.highlight .w {
    color: #bbb
}

.highlight .mf {
    color: #f60
}

.highlight .mh {
    color: #f60
}

.highlight .mi {
    color: #f60
}

.highlight .mo {
    color: #f60
}

.highlight .sb {
    color: #c30
}

.highlight .sc {
    color: #c30
}

.highlight .sd {
    color: #c30;
    font-style: italic
}

.highlight .s2 {
    color: #c30
}

.highlight .se {
    color: #c30
}

.highlight .sh {
    color: #c30
}

.highlight .si {
    color: #a00
}

.highlight .sx {
    color: #c30
}

.highlight .sr {
    color: #3aa
}

.highlight .s1 {
    color: #c30
}

.highlight .ss {
    color: #fc3
}

.highlight .bp {
    color: #366
}

.highlight .vc {
    color: #033
}

.highlight .vg {
    color: #033
}

.highlight .vi {
    color: #033
}

.highlight .il {
    color: #f60
}

.css .o,
.css .o+.nt,
.css .nt+.nt {
    color: #999
}

code,
pre {
    font-family: var(--code-font)
}

code {
    font-size: 85%
}

pre {
    display: block;
    margin-top: 0;
    margin-bottom: var(--spacer-3);
    overflow: auto
}

.highlight {
    padding: var(--spacer);
    margin-bottom: var(--spacer);
    background-color: var(--code-bg);
    border-radius: var(--border-radius)
}

.highlight pre {
    margin-bottom: 0
}

.highlight .highlight {
    padding: 0
}

.rouge-table {
    margin-bottom: 0;
    font-size: 100%
}

.rouge-table,
.rouge-table td,
.rouge-table th {
    border: 0
}

.rouge-table .gutter {
    vertical-align: top;
    user-select: none;
    opacity: .25
}

.gist .markdown-body {
    padding: 15px !important
}

.container {
    max-width: 45rem;
    padding-left: var(--spacer-2);
    padding-right: var(--spacer-2);
    margin-left: auto;
    margin-right: auto
}

footer {
    margin-top: var(--spacer-3);
    margin-bottom: var(--spacer-3)
}

.masthead {
    padding-top: var(--spacer);
    padding-bottom: var(--spacer);
    margin-bottom: var(--spacer-3)
}

.masthead-title {
    margin-bottom: 0
}

.masthead-title a {
    color: inherit;
    text-decoration: none
}

.masthead-title small {
    font-weight: 400;
    opacity: .5
}

.page,
.post {
    margin-bottom: 4em
}

.page li+li,
.post li+li {
    margin-top: .25rem
}

.page-title,
.post-title {
    color: var(--heading-color)
}

.page-title,
.post-title {
    margin-top: 0
}

.post-title a {
    color: inherit;
    text-decoration: none
}

.post-title a:hover,
.post-title a:focus {
    text-decoration: underline
}

.post-date {
    display: block;
    margin-top: -0.5rem;
    margin-bottom: var(--spacer);
    color: var(--gray-600)
}

.related {
    padding-top: var(--spacer-2);
    padding-bottom: var(--spacer-2);
    margin-bottom: var(--spacer-2);
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color)
}

.related-posts {
    padding-left: 0;
    list-style: none
}

.related-posts h3 {
    margin-top: 0
}

.related-posts a {
    text-decoration: none
}

.related-posts a small {
    color: var(--gray-600)
}

.pagination {
    display: flex;
    margin: 0 -1.5rem var(--spacer);
    color: var(--gray-500);
    text-align: center
}

.pagination-item {
    display: block;
    padding: var(--spacer);
    text-decoration: none;
    border: solid var(--border-color);
    border-width: 1px 0
}

.pagination-item:first-child {
    margin-bottom: -1px
}

a.pagination-item:hover {
    background-color: var(--border-color)
}

@media(min-width: 30em) {
    .pagination {
        margin: var(--spacer-3) 0
    }

    .pagination-item {
        float: left;
        width: 50%;
        border-width: 1px
    }

    .pagination-item:first-child {
        margin-bottom: 0;
        border-top-left-radius: var(--border-radius);
        border-bottom-left-radius: var(--border-radius)
    }

    .pagination-item:last-child {
        margin-left: -1px;
        border-top-right-radius: var(--border-radius);
        border-bottom-right-radius: var(--border-radius)
    }
}

.message {
    padding: var(--spacer);
    margin-bottom: var(--spacer);
    color: var(--gray-900);
    background-color: var(--yellow-100);
    border-radius: var(--border-radius)
}

#markdown-toc {
    padding: var(--spacer-2) var(--spacer-3);
    margin-bottom: var(--spacer-2);
    border: solid var(--border-color);
    border-width: 1px 0
}

#markdown-toc::before {
    display: block;
    margin-left: calc(var(--spacer-3)*-1);
    content: "Contents";
    font-size: 85%;
    font-weight: 500
}

.colors {
    display: grid;
    grid-template-columns: max-content 1fr
}

.colors dt {
    width: 3rem;
    height: 3rem;
    border-radius: var(--border-radius);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .15)
}

.colors dd {
    margin-left: var(--spacer)
}

/*# sourceMappingURL=styles.css.map */