@font-face{font-family:"IBM Plex Mono";src:url('../fonts/IBMPlexMono-Bold.woff2')format("woff2"),url('../fonts/IBMPlexMono-Bold.woff')format("woff");font-weight:700;font-style:normal;font-display:swap}@font-face{font-family:"IBM Plex Mono";src:url('../fonts/IBMPlexMono-BoldItalic.woff2')format("woff2"),url('../fonts/IBMPlexMono-BoldItalic.woff')format("woff");font-weight:700;font-style:italic;font-display:swap}@font-face{font-family:"IBM Plex Mono";src:url('../fonts/IBMPlexMono-Regular.woff2')format("woff2"),url('../fonts/IBMPlexMono-Regular.woff')format("woff");font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:"IBM Plex Mono";src:url('../fonts/IBMPlexMono-Italic.woff2')format("woff2"),url('../fonts/IBMPlexMono-Italic.woff')format("woff");font-weight:400;font-style:italic;font-display:swap}


*, *:before, *:after {box-sizing: border-box;}
* {margin: 0; padding: 0;}
html {scroll-behavior: smooth;}
body {background: #232731!important; margin:0; padding:0; font-family: 'IBM Plex Mono', monospace; line-height: 1.5em; font-size: 14px;}

img {max-width: 100%; display: block;}
small {font-size: 0.65em;}
hr {border: 0; border-bottom: 1px dashed #ccc;}


h1,h2,h3,h4,h5,h6 {text-wrap: balance; color: #e7e5e5; margin-top: 0.75em;}
p {font-size: 1em; margin: 0.75em 0 0.75em 0; color: #cbcaca;}
a {color: #ea2560; text-decoration: underline dashed;}
a:hover {color: #ccc;}
/* .logo {max-width:50px;} */
h1.sitename {color: #fff;}

ul {list-style: square outside; margin-left: 1.5em; margin-top: 1em; line-height: 1.4em; color: #cbcaca;}
ul li {margin: .25em 0 .25em 0;}
ul li a {cursor: pointer;}
ol {margin-left: 1.75em; list-style-position: outside; line-height: 1.25em;}
/* li.checked {list-style-type:"\2714";}
li.checked::marker {color: green;} */

ul.nav {border-right: 1px dashed #4d4c4c; margin-top: 2em; list-style-type: none; margin-left: 0; font-weight: 700; font-size: 1.2em;}
ul.nav li a {text-decoration: none;}
ul.nav li a:hover {color: #ccc;}

  
.main {margin: 0 auto; width: 60%; padding: 1em;}
.topheader {margin: 0 auto; width: 50%; padding: 1em;}
.topheader h1 {font-family: 'IBM Plex Mono', monospace; font-weight: 700;}
.topheader h1 a {text-decoration: none;}
.topheader h1 a:hover {color: #ccc;}
.content {padding: 0 0 0 1.5em; margin-top: 0!important;}

.colophon {line-height: 1.25em; margin-top: 2em; padding: 0.5em; color: #fff; font-size: 0.7em;}


.flexcontainer {display:flex; flex-wrap:wrap; margin:auto;}
.full { flex: 1 1 100%;}
.half { flex: 1 1 50%; }
.third { flex: 1 1 33%; }
.twothird { flex: 1 1 66%; }
.quarter { flex: 1 1 25%; }
.threequarter { flex: 1 1 75%;}


/* blog styles */
.post-item {margin-top: 1em; background: #1e1d1d; padding: 1em; border-radius: 10px;}
.post-item:hover {background: #343333;}
.post-item h2 a {text-decoration: none;}
.post-meta {font-size: 0.7em; margin-top: 0.25em;}
.backblog {text-decoration: none; font-size: 0.8em;}
.post-date {font-size: 0.65em; display: inline-block;}
.post-tags {font-size: 0.65em; margin-top: 0;}
/* .post-content p {line-height: 2em;} */
.post-content ul {line-height: 1.5em!important;}
.post-content ul li {margin-top: 1em;}
.pagination {margin-top: 1em;}
.post-excerpt {font-size: 0.85em; color: #888; margin-top: 0.25em; margin-bottom: 0;}
.reading-time {color: #666; font-size: 0.9em;}
.post-nav {display: flex; justify-content: space-between; align-items: center; margin-top: 2em; padding-top: 1em; border-top: 1px dashed #4d4c4c; gap: 1em;}
.post-nav-link {font-size: 0.8em; text-decoration: none; max-width: 35%;}
.post-nav .backblog {text-align: center;}

code {background: #313c51; color: white; padding: 5px; border-radius: 3px; display: inline-block; width: 100%; overflow: auto; white-space: pre-wrap!important; cursor:text;}

p.warning {font-size: 0.8em; padding: 1em; border: 1px dashed #838382; color:#e6ba35;}

@keyframes blink {
    0% {opacity: 1;}
    50% {opacity: 0;}
    100% {opacity: 1;}
}

.blinkie {animation: blink 1s infinite;}
.redcursor {color: red;}

@media screen and (max-width: 1024px) {

    /*whatever styles you need to apply on small screens*/
    .flexcontainer {display: block;}

}

@media screen and (max-width: 600px) {

    /*whatever styles you need to apply on small screens*/
    .flexcontainer {display: block;}
    .main {width: 100%;}
    .post-nav {flex-direction: column; text-align: center;}
    .post-nav-link {max-width: 100%;}

}