:root {
    --grey: #D4D4D4;
    --black-lighter: #4C4C4C;
    --black: #000000;
}

::-webkit-scrollbar {
    width: 0;
    background: transparent;
}

.wrapper { 
    max-width: 720px;
    width: auto;
}

header {
    display:flex;
    justify-content: end;
    margin: 24px 0;
}

header a { 
    text-decoration: none;
    color: var(--black-lighter);
}


.site-title { 
    text-transform: uppercase;
    font-family: "Impact";
    color: var(--black-lighter);
    font-size: 20px;
    margin-bottom:6px;
}

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

body {
    font-family: "IBM Plex Sans", sans-serif;
    color:var(--black-lighter);
    background-color: white;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    flex-direction: column;
    height: auto;
    text-align: justify;
}

a {
    color: var(--black);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

h1 {
    margin: 0px;
    font-family: "IBM Plex Sans Condensed", sans-serif;
    display: block;
    width: 100%;
    font-size: 32px;
    font-weight: bold;
    letter-spacing: 0px;
    color: var(--black-lighter);
    position: relative;
}


h1::before {
    content: ""; 
    width: 22px;
    height: 22px;
    background-color: var(--black-lighter);
    position: absolute;
    left: -42px;
    top: 11px;
}

h2 { 
    color:var(--black-lighter);
    margin-bottom:0px; 
    margin-top:0px;
}

.post-list {
    padding:0px
}

.post-list .time {
    margin-top:0px;
    margin-bottom:6px;
}

.post-list li {
    margin-bottom:36px;
    list-style-type: none;
    position: relative;
}

.post-list h2::before {
    content: ""; 
    width: 10px;
    height: 10px;
    background-color: var(--black-lighter);
    position: absolute;
    left: -24px;
    top: 11px;
}

.post-list a:hover {
    text-decoration: none;
}

article {
    width: 100%;
    margin-top: 32px;
}

article p { 
    font-size: 18px;
    color: var(--black);
    line-height:26px;
}

article a { 
    text-decoration: underline;
}

time {
    font-size: 12px;
    text-transform: uppercase;
    color: var(--black-lighter);
}

.time {
    position: relative;
        margin-top:12px;
 .lined-element {
    position: absolute;
    left: 88px; /* Creates space for the dot and the start of the line */
    top: 12px;
    color: var(--grey);
    width: 100vw;
  }

  .lined-element::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%; /* Centers the dot vertically */
    transform: translateY(-50%); /* Fine-tunes the vertical centering */
    width: 8px; /* Diameter of the dot */
    height: 8px; /* Diameter of the dot */
    background-color: var(--grey);
    border-radius: 50%; /* Makes the square a circle */
    z-index: 2; /* Ensures the dot is on top of the line */
  }

  .lined-element::after {
    content: "";
    position: absolute;
    left: 5px; /* Starts the line at the center of the dot */
    top: 50%; /* Aligns the line vertically with the center of the dot */
    transform: translateY(-50%); /* Ensures perfect vertical alignment */
    width: 100%; /* Makes the line span the full width of the parent */
    height: 1px; /* Thickness of the line */
    background-color: var(--grey);
    z-index: 1; /* Places the line behind the dot */
  }
}

@media (min-width: 1024px) {

}


/* Article content overflow fixes */
article {
    word-wrap: break-word;
    overflow-wrap: break-word;
    padding-bottom: 60px;
}

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

pre {
    overflow-x: auto;
    width: 100%;
}

/* Content from blog/assets/assets/theme.css */
pre.highlight,
.highlight pre {
    background-color: #272822;
}

.highlight .hll {
    background-color: #22282A
}

.highlight .c {
    color: #99AA8A
}

/* Comment */
.highlight .err {
    color: #960050;
    background-color: #1e0010
}

/* Error */
.highlight .k {
    color: #93C763
}

/* Keyword */
.highlight .l {
    color: #ae81ff
}

/* Literal */
.highlight .n {
    color: #F1F2F3
}

/* Name */
.highlight .o {
    color: #E8E2B7
}

/* Operator */
.highlight .p {
    color: #F1F2F3
}

/* Punctuation */
.highlight .ch {
    color: #99AA8A
}

/* Comment.Hashbang */
.highlight .cm {
    color: #99AA8A
}

/* Comment.Multiline */
.highlight .cp {
    color: #99AA8A
}

/* Comment.Preproc */
.highlight .cpf {
    color: #99AA8A
}

/* Comment.PreprocFile */
.highlight .c1 {
    color: #99AA8A
}

/* Comment.Single */
.highlight .cs {
    color: #99AA8A
}

/* Comment.Special */
.highlight .gd {
    color: #E8E2B7
}

/* Generic.Deleted */
.highlight .ge {
    font-style: italic
}

/* Generic.Emph */
.highlight .gi {
    color: #678CB1
}

/* Generic.Inserted */
.highlight .gs {
    font-weight: bold
}

/* Generic.Strong */
.highlight .gu {
    color: #99AA8A
}

/* Generic.Subheading */
.highlight .kc {
    color: #93C763
}

/* Keyword.Constant */
.highlight .kd {
    color: #93C763
}

/* Keyword.Declaration */
.highlight .kn {
    color: #E8E2B7
}

/* Keyword.Namespace */
.highlight .kp {
    color: #93C763
}

/* Keyword.Pseudo */
.highlight .kr {
    color: #93C763
}

/* Keyword.Reserved */
.highlight .kt {
    color: #83D8E1
}

/* Keyword.Type */
.highlight .ld {
    color: #EC7600
}

/* Literal.Date */
.highlight .m {
    color: #FFCD22
}

/* Literal.Number */
.highlight .s {
    color: #EC7600
}

/* Literal.String */
.highlight .na {
    color: #678CB1
}

/* Name.Attribute */
.highlight .nb {
    color: #F1F2F3
}

/* Name.Builtin */
.highlight .nc {
    color: #678CB1
}

/* Name.Class */
.highlight .no {
    color: #93C763
}

/* Name.Constant */
.highlight .nd {
    color: #678CB1
}

/* Name.Decorator */
.highlight .ni {
    color: #F1F2F3
}

/* Name.Entity */
.highlight .ne {
    color: #678CB1
}

/* Name.Exception */
.highlight .nf {
    color: #678CB1
}

/* Name.Function */
.highlight .nl {
    color: #F1F2F3
}

/* Name.Label */
.highlight .nn {
    color: #F1F2F3
}

/* Name.Namespace */
.highlight .nx {
    color: #678CB1
}

/* Name.Other */
.highlight .py {
    color: #F1F2F3
}

/* Name.Property */
.highlight .nt {
    color: #E8E2B7
}

/* Name.Tag */
.highlight .nv {
    color: #F1F2F3
}

/* Name.Variable */
.highlight .ow {
    color: #E8E2B7
}

/* Operator.Word */
.highlight .w {
    color: #F1F2F3
}

/* Text.Whitespace */
.highlight .mb {
    color: #FFCD22
}

/* Literal.Number.Bin */
.highlight .mf {
    color: #FFCD22
}

/* Literal.Number.Float */
.highlight .mh {
    color: #FFCD22
}

/* Literal.Number.Hex */
.highlight .mi {
    color: #FFCD22
}

/* Literal.Number.Integer */
.highlight .mo {
    color: #FFCD22
}

/* Literal.Number.Oct */
.highlight .sb {
    color: #EC7600
}

/* Literal.String.Backtick */
.highlight .sc {
    color: #EC7600
}

/* Literal.String.Char */
.highlight .sd {
    color: #EC7600
}

/* Literal.String.Doc */
.highlight .s2 {
    color: #EC7600
}

/* Literal.String.Double */
.highlight .se {
    color: #ae81ff
}

/* Literal.String.Escape */
.highlight .sh {
    color: #EC7600
}

/* Literal.String.Heredoc */
.highlight .si {
    color: #EC7600
}

/* Literal.String.Interpol */
.highlight .sx {
    color: #EC7600
}

/* Literal.String.Other */
.highlight .sr {
    color: #EC7600
}

/* Literal.String.Regex */
.highlight .s1 {
    color: #EC7600
}

/* Literal.String.Single */
.highlight .ss {
    color: #EC7600
}

/* Literal.String.Symbol */
.highlight .bp {
    color: #F1F2F3
}

/* Name.Builtin.Pseudo */
.highlight .vc {
    color: #F1F2F3
}

/* Name.Variable.Class */
.highlight .vg {
    color: #F1F2F3
}

/* Name.Variable.Global */
.highlight .vi {
    color: #F1F2F3
}

/* Name.Variable.Instance */
.highlight .il {
    color: #FFCD22
}

/* Literal.Number.Integer.Long */

/* Content from blog/assets/assets/monokai.css */
.highlight .hll {
    background-color: #49483e
}

.highlight {
    background: #272822;
    color: #f8f8f2
}

.highlight .c {
    color: #75715e
}

/* Comment */
.highlight .err {
    color: #960050;
    background-color: #1e0010
}

/* Error */
.highlight .k {
    color: #66d9ef
}

/* Keyword */
.highlight .l {
    color: #ae81ff
}

/* Literal */
.highlight .n {
    color: #f8f8f2
}

/* Name */
.highlight .o {
    color: #f92672
}

/* Operator */
.highlight .p {
    color: #f8f8f2
}

/* Punctuation */
.highlight .ch {
    color: #75715e
}

/* Comment.Hashbang */
.highlight .cm {
    color: #75715e
}

/* Comment.Multiline */
.highlight .cp {
    color: #75715e
}

/* Comment.Preproc */
.highlight .cpf {
    color: #75715e
}

/* Comment.PreprocFile */
.highlight .c1 {
    color: #75715e
}

/* Comment.Single */
.highlight .cs {
    color: #75715e
}

/* Comment.Special */
.highlight .gd {
    color: #f92672
}

/* Generic.Deleted */
.highlight .ge {
    font-style: italic
}

/* Generic.Emph */
.highlight .gi {
    color: #a6e22e
}

/* Generic.Inserted */
.highlight .gs {
    font-weight: bold
}

/* Generic.Strong */
.highlight .gu {
    color: #75715e
}

/* Generic.Subheading */
.highlight .kc {
    color: #66d9ef
}

/* Keyword.Constant */
.highlight .kd {
    color: #66d9ef
}

/* Keyword.Declaration */
.highlight .kn {
    color: #f92672
}

/* Keyword.Namespace */
.highlight .kp {
    color: #66d9ef
}

/* Keyword.Pseudo */
.highlight .kr {
    color: #66d9ef
}

/* Keyword.Reserved */
.highlight .kt {
    color: #66d9ef
}

/* Keyword.Type */
.highlight .ld {
    color: #e6db74
}

/* Literal.Date */
.highlight .m {
    color: #ae81ff
}

/* Literal.Number */
.highlight .s {
    color: #e6db74
}

/* Literal.String */
.highlight .na {
    color: #a6e22e
}

/* Name.Attribute */
.highlight .nb {
    color: #f8f8f2
}

/* Name.Builtin */
.highlight .nc {
    color: #a6e22e
}

/* Name.Class */
.highlight .no {
    color: #66d9ef
}

/* Name.Constant */
.highlight .nd {
    color: #a6e22e
}

/* Name.Decorator */
.highlight .ni {
    color: #f8f8f2
}

/* Name.Entity */
.highlight .ne {
    color: #a6e22e
}

/* Name.Exception */
.highlight .nf {
    color: #a6e22e
}

/* Name.Function */
.highlight .nl {
    color: #f8f8f2
}

/* Name.Label */
.highlight .nn {
    color: #f8f8f2
}

/* Name.Namespace */
.highlight .nx {
    color: #a6e22e
}

/* Name.Other */
.highlight .py {
    color: #f8f8f2
}

/* Name.Property */
.highlight .nt {
    color: #f92672
}

/* Name.Tag */
.highlight .nv {
    color: #f8f8f2
}

/* Name.Variable */
.highlight .ow {
    color: #f92672
}

/* Operator.Word */
.highlight .w {
    color: #f8f8f2
}

/* Text.Whitespace */
.highlight .mb {
    color: #ae81ff
}

/* Literal.Number.Bin */
.highlight .mf {
    color: #ae81ff
}

/* Literal.Number.Float */
.highlight .mh {
    color: #ae81ff
}

/* Literal.Number.Hex */
.highlight .mi {
    color: #ae81ff
}

/* Literal.Number.Integer */
.highlight .mo {
    color: #ae81ff
}

/* Literal.Number.Oct */
.highlight .sa {
    color: #e6db74
}

/* Literal.String.Affix */
.highlight .sb {
    color: #e6db74
}

/* Literal.String.Backtick */
.highlight .sc {
    color: #e6db74
}

/* Literal.String.Char */
.highlight .dl {
    color: #e6db74
}

/* Literal.String.Delimiter */
.highlight .sd {
    color: #e6db74
}

/* Literal.String.Doc */
.highlight .s2 {
    color: #e6db74
}

/* Literal.String.Double */
.highlight .se {
    color: #ae81ff
}

/* Literal.String.Escape */
.highlight .sh {
    color: #e6db74
}

/* Literal.String.Heredoc */
.highlight .si {
    color: #e6db74
}

/* Literal.String.Interpol */
.highlight .sx {
    color: #e6db74
}

/* Literal.String.Other */
.highlight .sr {
    color: #e6db74
}

/* Literal.String.Regex */
.highlight .s1 {
    color: #e6db74
}

/* Literal.String.Single */
.highlight .ss {
    color: #e6db74
}

/* Literal.String.Symbol */
.highlight .bp {
    color: #f8f8f2
}

/* Name.Builtin.Pseudo */
.highlight .fm {
    color: #a6e22e
}

/* Name.Function.Magic */
.highlight .vc {
    color: #f8f8f2
}

/* Name.Variable.Class */
.highlight .vg {
    color: #f8f8f2
}

/* Name.Variable.Global */
.highlight .vi {
    color: #f8f8f2
}

/* Name.Variable.Instance */
.highlight .vm {
    color: #f8f8f2
}

/* Name.Variable.Magic */
.highlight .il {
    color: #ae81ff
}

/* Literal.Number.Integer.Long */

pre {
    display: inline-block;
    overflow-x: auto;
    padding: 1em;
    border-radius: 5px;
    background-color: #e2e2e2 !important;

}

code {}


@media (max-width: 1024px) {
    body {
        padding:24px;
    }
}