/* i-am-zen theme by tan */
* {
    margin: 0;
    padding: 0;
}
html {
    /* prevent layout zoom in landscape mode in iOS */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}
html,
body {
    height: 100%;
    min-width: 256px;
}
h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0.5em 0 0.5em 0;
    font-weight: 550;
}
h1 {
    font-size: 24px;
}
h2 {
    font-size: 22px;
}
h3 {
    font-size: 20px;
}
h4 {
    font-size: 18px;
}
h5 {
    font-size: 16px;
}
h6 {
    font-size: 14px;
}
strong {
    font-weight: 600;
}
hr,
hr.post-separator {
    margin: 1em 0;
}
img {
    max-width: 90%;
}
ol,
ul {
    margin-left: 2em;
    margin-bottom: 1em;
}
li {
    margin-top: 0.5em;
    line-height: 1.25;
}
p {
    margin: 0.75em 0;
}
blockquote {
    margin: 1em;
    padding-left: 0.75em;
}
table {
    border-collapse: collapse;
}
td, th {
    padding: 0.5em;
}
iframe {
    border: none;
}
input[type="text"],
input[type="email"],
input[type="url"] {
    border: none;
    width: 250px;
    padding: 4px 4px;
    border-bottom: 1px dashed #609ea0;
    background-color: #000813;
    color: #b1a759;
    font-size: 14px;
    transition: 0.25s;
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus {
  border-color: #4CAF50;
  background-color: #0a0e13;
  color: #b1a759;
  outline: none;
}
input[type="text"]::placeholder,
input[type="email"]::placeholder,
input[type="url"]::placeholder {
    color: #7b7b7b;
}
.pdf-viewer {
  height: 660px;
}
.mono {
    font-family: "Cascadia Code","Consolas","SF Mono",SFMono-Regular,ui-monospace,Menlo,"Andale Mono",Monaco,"Courier New",Courier,"Ubuntu Mono","Roboto Mono",monospace !important;
}
.overflow-x {
    overflow-x: auto;
}
.float-left {
    float: left;
}
.float-right {
    float: right;
}
.text-align-center {
    text-align: center;
}
.vh-0-5 {
    margin-top: 0.5em !important;
}
.vh-1 {
    margin-top: 1em !important;
}
.vh-1-5 {
    margin-top: 1.5em !important;
}
.vh-2 {
    margin-top: 2em !important;
}
.vh-neg-b-0-5 {
    margin-bottom: -0.5em;
}
.margin-left-to-li {
    margin-left: 32px !important;
    line-height: 23px;
}
.margin-top-0-5 {
    margin-top: 0.5em;
}
.margin-top-1 {
    margin-top: 1em;
}
.margin-left-0-5 {
    margin-left: 0.5em;
}
.margin-left-1 {
    margin-left: 1em;
}
.margin-left-1-5 {
    margin-left: 1.5em;
}
.margin-left-2 {
    margin-left: 2em;
}
.margin-top-1-5 {
    margin-top: 1.5em;
}
.margin-top-2 {
    margin-top: 2em;
}
.margin-bottom-0-5 {
    margin-bottom: 0.5em;
}
.margin-bottom-2 {
    margin-bottom: 2em;
}
.margin-right-0-5 {
    margin-right: 0.5em;
}
.margin-right-1 {
    margin-right: 1em;
}
.attention {
    background: #39306f;
    padding: 1px 4px 2px 4px;
    border-radius: 3px;
}
.underline {
    text-decoration: underline;
}
.main-wrapper {
    width: 100%;
    max-width: 1024px;
    margin: 1em auto;  /* center align */
    padding-bottom: 0.5em;
}
/* row with 2 column layout 5:2 ratio */
.row {
    display: flex;
    font-size: 16px;
    flex-wrap: wrap;
}
.column {
    display: flex;
    flex-direction: column;
    flex-basis: 100%;
    flex: 2;
    text-align: end;
}
.column-3 {
    display: flex;
    flex-direction: column;
    flex-basis: 100%;
    flex: 5;
    text-align: start;
}
.center {
    display: flex;
    justify-content: center;
    align-items: center;
}
.flex-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 1em;
}
.container {  /* align two divs to the each sides */
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}
.container-right {
    display: flex;
    justify-content: flex-end;
}
.form-group {
    display: flex;
    align-items: center;
    margin-bottom: 1em;
}
.form-group label {
    flex-basis: 55px;
    font-size: 15px;
}
.display-inline-flex {
    display: inline-flex;
}
.display-none {
    display: none;
}
.display-block {
    display: block;
}
.success-msg {
    font-size: 15px;
    color: #54d454;
}
.err-msg {
    font-size: 15px;
    color: #f24444;
}
.info-msg {
    font-size: 15px;
    color: #88867c;
}
.scroll-item {
    display: inline-flex;
    overflow-x: auto;
    gap: 15px;
}
.scroll-item img {
    max-width: none !important;
}
.fade-in {
  opacity: 0;
  animation: fadeIn 0.5s ease-in forwards;
}
@keyframes fadeIn {
  to {
    opacity: 1;
  }
}
/* header */
.header {
    text-align: center;
}
.header-info {
    margin-top: 0.5em;
    margin-bottom: 1.5em;
}
.header-name {
    font-size: 28px;
    font-weight: 600;
}
.header-desc {
    font-size: 13px;
    margin-top: 0.2em;
}
.header-nav {
    margin: 0.75em 1.5em 1em 1.5em;
    font-size: 17px;
    font-weight: 500;
}
/* content */
.blog-content {
    margin: 0.5em 1.5em;
    overflow: hidden;
}
.blog-posts {
    margin-top: 0.75em;
}
.blog-post-title {
    margin-right: 5px;
}
/* footer */
.footer {
    padding: 0.5em 0;
    overflow: hidden;
}
.footer-copyright {
    overflow: hidden;
}
.footer-copyright-text {
    display: block;
    position: relative;
    font-size: 14px;
}
/* posts list */
.posts-pagination {
    margin-top: 2em;
    margin-bottom: 1em;
    text-align: center;    
}
.posts-pagination a {
    font-weight: 500;
}
.page-number {
    font-size: 15px;
}
/* post */
.post-title {
    text-align: left;
    position: relative;
}
.post-author {
    display: none;
}
.post-content {
    margin: 0.5em 0 1.5em 0;
}
.post-content p,
.page-content p {
    line-height: 23px;
}
.post-content img {
    display: block;  /* center align */
    margin: 0.5em auto;
}
.post-info {
    padding: 0.75em 0;
}
.post-info div {
    margin: 0.75em 0;
}
.post-category,
.post-tag {
    border-radius: 0.5em;
}
/* page */
.page-title {
    text-align: center;
}
/* categories, tags listing */
.cat-list,
.tag-list {
    margin: 1em 0 1.5em 2em;
}
.cat-list li,
.tag-list li {
    margin-bottom: 0.5em;
}
.cat-title,
.tag-title {
    margin: 0.5em 0;
}
/* individual posts under a category */
.post-list li {
    margin-bottom: 0.5em;
}
/* post title under a category */
.post-list div {
    margin-bottom: 0.3em;
}
.post-list .tag-name {
    margin-right: 0.1em;
}
.particles-header {
    position: absolute;
    width: 100%;
    z-index: 0;
}
@media screen 
and (max-width: 768px)
and (orientation: portrait)  {
    .owl-video {
        width: 300px;
    }
}
@media screen 
and (max-width: 768px) 
and (orientation: landscape) {
    .owl-video {
        width: 500px;
    }
}

/* mobile device overrides  */

@media screen 
and (max-width: 768px)
and (orientation: portrait)  {
  .pdf-viewer {
    height: 300px;
  }
}
@media screen 
and (max-width: 768px) 
and (orientation: landscape) {
  .pdf-viewer {
    height: 500px;
  }
}

/* theme */

body {
    font-family: Candara, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
    font-weight: normal;
    font-size: 16px;
    background: #000813;
    color: #a2aaa0;
}
a {
    text-decoration: none;
    color: #328cde;
}
a:hover {
    color: #c4992a;
    text-decoration: underline;
}
a:visited {
    color: #347ab8;
}
hr {
    border: 1px dashed #0b3c55;
}
hr.post-separator {
    border: 1px dashed #012130;
}
blockquote {
    border-left: 3px solid #194708;
}
h1,
h2,
h3,
h4,
h5,
h6 {
    color: #269470;
}
ul li::marker {
    color: #066a49;
}
td, th {
    border: 1px solid #1c454d;
}
::selection {
  color: #c4992a;
  background: #435e3a;
}
.post-font {
    font-family: Candara, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}
.header {
    color: #c4992a;
    z-index: 1;
    position: relative;
    pointer-events: none;  /* ignore click on header so that it goes to the canvas */
}
.header nav {
  pointer-events: auto;  /* enable click for nav items inside header */
}
.post-title,
.page-title,
.cat-title,
.tag-title {
    color: #269470;
}
.categories-list .tag-name a,
.categories-list .tag-name a:visited {
    color: #515356;  /* tag under categories */
}
.post-info {
    border-top: 1px dotted #4a7000;
    border-bottom: 1px dotted #4a7000;
}
.post-category:visited,
.post-tag:visited {
    color: #a4a68f;
}
.post-tag {
    color: #a4a68f;
}
a.post-tag,
a.post-tag:visited {
    color: #a4a68f;
}
/* single post tags */
.post-categories a.post-category,
.post-tags a.post-tag {
    color: #35B38a;
}
.header {
    border-bottom: solid 1px #19442e;
}
/* main nav */
.header-nav-elem a,
.header-nav-elem a:visited,
.posts-pagination a,
.posts-pagination a:visited {
    color: #269470;
}
.page-number {
    color: #696f67;
}
.error {
    color: #ba4c78;
}
/* comments */
.comments-control-container {
    margin-top: 0.75em;
}
.comments-control,
.add-comment-btn {
    color: #5aabcd;  /* cadetblue */
    cursor: pointer;
    font-size: 16px;
}
.comments {
    opacity: 0;
    transition: opacity 0.4s ease;
}
.comments.show {
    opacity: 1;
    margin: 1em 0 1em 0;
}
.add-comment-form {
    opacity: 0;
    transition: opacity 0.4s ease;
}
.add-comment-form.show {
    opacity: 1;
    margin: 1em 0;
}
.comment-wrap {
    margin-bottom: 1em;
    color: cadetblue;
}
.markdown-help-link {
    font-size: 14px;
}
.comments-pagination {
    color: #5aabcd;
    font-size: 16px;
    opacity: 0;
    transition: opacity 0.4s ease;
}
.comments-pagination.show {
    opacity: 1;
}
#comments .comment {
    margin: 0.5em; 
}
.comment-separator {
    border-bottom: 1px dotted #194890;
}
.comment-text {
    margin-bottom: 0.5em;
}
.comment-author {
    font-size: 15px;
    margin-bottom: 0.25em;
}
.comment-time {
    font-size: 15px;
}
.author-comment { /* ind */
    color: #c0baff;
    background: #295ebb;
    padding: 0px 3px;
    border-radius: 3px;
    font-size: 13px;
}
/* comment markdown rendering */
.comment h1 {
    font-size: 19px;
}
.comment h2 {
    font-size: 18px;
}
.comment h3 {
    font-size: 17px;
}
.comment h4 {
    font-size: 16px;
}
.comment h5 {
    font-size: 15px;
}
.comment h6 {
    font-size: 14px;
}
.comment h1,
.comment h2,
.comment h3,
.comment h4,
.comment h5,
.comment h6 {
    color: #58a34c; 
}
.comment p,
.comment div {
    color: #b1a759;
}
.comment pre,
.comment code {
    overflow: scroll;
    -webkit-overflow-scrolling: touch;
    color: #779c68;
}
.comment pre,
.comment pre code {
    font-size: 13px;
}
.comment-author,
.comment-time {
    color: #889361 !important;
}
.comment hr {
    border: 1px dashed #17454d;
}
.comment blockquote {
    border-left: 3px solid #6f6f24;
}
.comment td,
.comment th {
    border: 1px solid #4d451c;
}
.comment ul li::marker {
    color: #70621a;
}
.comment-editor {
    border: 1px dashed cadetblue;
}
.comment-submit-btn {
    margin: 1em 0;
    color: cadetblue;
    cursor: pointer;
}
.comment-status {
    margin: 0.5em 1em;
}
.CodeMirror {
  height: auto;
  font-size: 14px;
}
.CodeMirror-scroll {
  max-height: 300px;
  overflow-y: auto;
}
.comment code[class*=language-],
.comment pre[class*=language-] {
    background-color: #001317;
    color: #acb5ab;
    font-size: 13px;
    line-height: 1.5;
}
/* overrides */
pre,
code {    
    font-family: "Cascadia Code",Menlo,"Andale Mono",Monaco,Consolas,"Courier New",Courier,"Ubuntu Mono","Roboto Mono",monospace !important;
    font-size: 15px;
}
code,
:not(pre)>code[class*=language-] {
    font-size: 16px;
    color: #699;
    background-color: transparent;
    font-size: 15px;
}
code[class*=language-],
pre[class*=language-] {
    background-color: #001317;
    color: #acb5ab;
    font-size: 14px;
    line-height: 1.5;
}
.token.treeview-part .line-h:before,
.token.treeview-part .line-v:before {
    border-left: 1px solid #acb5ab;
}
.token.bold, .token.important {
    font-weight: 600;
}
.command-line span.token.output {
    opacity: 0.6;
}
.line-highlight {
    background: #00823e30;
    margin-top: 13px;
}
/* line number  */
.line-numbers-rows>span:before {
    color: #3f5659;
}
/* gutter line */
.command-line-prompt,
.line-numbers .line-numbers-rows {
    border-right: 1px solid #1c454d;
}