@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&family=Saira+Semi+Condensed:wght@100&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono&family=Roboto:wght@400;700&family=Saira+Semi+Condensed:wght@100&display=swap');
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,400;0,700;1,400;1,700&family=Nunito:ital,wght@0,400;0,700;1,400;1,700&display=swap');


blockquote {
    margin-bottom: 10px;
    padding: 5px;
    background-color: #F9F8F9;
    border-left: 4px solid #B3E5FC;
    border-left-color: #B3E5FC;
    display: block;
    margin-block-start: .05em;
    margin-block-end: 1em;
    margin-inline-start: 40px;
    margin-inline-end: 150px;
    border-radius: 50px;
    text-align: center; 
}

.myquote {
    margin-bottom: 15px; /* Adjusted margin */
    padding: 10px; /* Adjusted padding */
    background-color: #F9F8F9;
    border-left: 4px solid #B3E5FC;
    border-left-color: #B3E5FC;    
    display: block;
    margin-block-start: .1em; /* Adjusted margin */
    margin-block-end: 1em;
    margin-inline-start: 50px; /* Adjusted margin */
    margin-inline-end: 150px; /* Adjusted margin */
    border-radius: 50px; /* Adjusted border radius */
    text-align: center;
}


.latest-section {
  position: fixed;
  top: 0; /* Adjust the top position as needed */
  right: 0; /* Align the element to the right side */
  width: 25%; /* Adjust width as needed */
  margin-top: 10em; /* Adjust the margin-top to create space from the top */
}


/* is screen size is small, move latest posts to bottom of page */
@media (max-width: 1100px) {
  .latest-section {
    position: relative; /* Change to relative positioning */
    width: 100%; /* Adjust width to fill the mobile screen */
    margin-top: 2em; /* Adjust margin-top as needed */
    top: auto; /* Reset the top property */
    right: auto; /* Reset the right property */
  }
}



.tutorials {
  position: fixed; /* Element position is fixed in the viewport */
  top: 0; /* Element is positioned at the top of the viewport */
  right: 0; /* Element is aligned to the right side of the viewport */
  width: 23%; /* Width of the container is set to 20% of the viewport width */
  margin-top: 25em; /* Margin from the top of the viewport is set to 10em */
}


.latest-posts,
.tutorials {
  margin-bottom: 20px;
}

.latest-posts h2,
.tutorials h2 {
  font-size: 1.2em;
}

.latest-posts ul,
.tutorials ul {
  list-style: none;
  padding: 0;
}

.latest-posts ul li,
.tutorials ul li {
  margin-bottom: 10px;
}

.latest-posts a,
.tutorials a {
  text-decoration: none;
  color: #0349fc; /* #333 */
}

.latest-posts a:hover,
.tutorials a:hover {
  text-decoration: underline;
}


/* .latest-section { */
/*   float: right; */
/*   width: 30%; /\* Adjust width as needed *\/ */
/* } */

/* .latest-posts, */
/* .tutorials { */
/*   margin-bottom: 20px; */
/* } */

/* .latest-posts h2, */
/* .tutorials h2 { */
/*   font-size: 1.2em; */
/* } */

/* .latest-posts ul, */
/* .tutorials ul { */
/*   list-style: none; */
/*   padding: 0; */
/* } */

/* .latest-posts ul li, */
/* .tutorials ul li { */
/*   margin-bottom: 10px; */
/* } */

/* .latest-posts a, */
/* .tutorials a { */
/*   text-decoration: none; */
/*   color: #333; */
/* } */

/* .latest-posts a:hover, */
/* .tutorials a:hover { */
/*   text-decoration: underline; */
/* } */




.news-section {
    margin-bottom: 2em;
}

.news-section h2 {
    font-size: 1.5em;
}

.news-section .news-date {
    font-weight: bold;
}

.fa-brands {
    color: #383838;
}

.fa-solid {
    color: #383838;
}

a:-webkit-any-link {
    color: #383838;
    cursor: pointer;
    text-decoration: underline;
}

h1,.h1 {
    display: block;
    margin-top: 0rem;
    margin-bottom: 1rem;
    font-family: "JetBrains Mono",monospace;
    color: teal;
    letter-spacing: .01em;
    font-weight: 700;
    font-style: normal;
    font-size: 2.0em;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased
}

h2,.h2 {
    position: relative;
    display: block;
    margin-top: 2rem;
    margin-bottom: .5rem;
    font-family: "JetBrains Mono",monospace;
    color: #383838;
    text-transform: none;
    letter-spacing: normal;
    font-weight: bold;
    font-size: 1rem
}

h3 {
    font-family: "JetBrains Mono",monospace;
    color: #383838;
    text-decoration: underline;
    font-weight: bold;
    font-size: .9rem
}

h4 h5 h6 {
    display: inline;
    text-decoration: none;
    font-family: "JetBrains Mono",monospace;
    color: #8c8c8c;
    font-weight: bold;
    font-size: .9rem
}

h3 h4 h5 h6 {
    margin-top: .9rem;
    margin-bottom: .5rem
}

/* readable*/
body {
  margin: 0 auto;
  max-width: 45em;
  font-family: "JetBrains", "Helvetica", "Arial", sans-serif;
  font-size: 18px;
  line-height: 1.5;
  padding: 4em 1em;
}

summary {
  margin-top: 0em; /* you can adjust this value accordingly */
}

summary .p{
  margin-top: 0em; /* you can adjust this value accordingly */
}

header#preamble {
    background-color: white;
}

header#preamble .logo{
    display: flex;
	align-items: start;
	flex-wrap: wrap;
    margin-bottom: 0;
}

header#preamble a {
    color: teal;
    text-decoration: none;
}

header .logo img {
    margin-right: 1em;
    margin-left: -1em;
}

header#preamble .title-section {
    flex-direction: column;
    justify-content: center;
}

header#preamble .title-section h1 {
    margin-bottom: 0;
}

header#preamble .title-section h2 {
    margin-top: -10px;
}

header#preamble .avatar {
  width: 80px;
  height: 80px;
}

header nav {
    color: teal;
    letter-spacing: .01em;
    font-weight: 200;
    font-style: normal;
    font-size: .8rem
    align-self: start;
    margin-top: -20px; /* adjust this value as needed */
}

header ul, footer ul {
    border-color: teal;
    display: flex;
    list-style-type: none;
    margin-left: auto;
    padding-left: 0;
}

/* Add separator */
header ul li:not(:last-child)::after, footer ul li:not(:last-child)::after {
    content: "|";
    margin: 0 10px;
}

header ul li a {
    color: #383838;
    color: teal;
    letter-spacing: .01em;
    font-weight: 300;
    font-style: normal;
    font-size: 1rem
}

body > header {
    padding: 1em;
}

h2 {
  margin-top: 1em;
  padding-top: 1em;
}

header #social {
    flex-grow: 1;
    display: flex;
    justify-content: right;
    column-gap: 0.5em;
}

body {
  color: #555;
}

h1,
h2,
strong {
  color: #333;
}

code,
pre {
  background: #eee;
}

code {
  padding: 2px 4px;
  vertical-align: text-bottom;
}

pre {
  padding: 1em;
}

.timestamp, p[role="doc-subtitle"] {
    font-family: 'Roboto Mono', monospace;
    color: #aaa;
    padding-right: 5px;
    font-size: 18px;
}

section.post-list ul {
  list-style-type: none;
}

section.post-list li .timestamp::after {
  content: " »";
}

footer {
    padding: 1rem;
    font-size: 12px;
    border-top: 1px solid #eee;
    color: #666;
    display: block;
}

.content #header, .content #footer a {
    font-family: "JetBrains Mono",monospace;
}

*, *:before, *:after {
    box-sizing: border-box;
}

section figure {
    margin-top: 1.5em;
}

figure img {
    max-width: 100%;
    height: auto;
    margin-right: 2rem;
    margin-bottom: 1rem;
    border: 1px solid #000;
    box-shadow: 1px 2px 5px black;
}

myimg {
    width: 40%;
}


/* myimg { */
/*     width: 40%; */
/*     display: block; */
/*     margin: 0 auto; */
/* } */

/* .imgcontainer { */
/*     max-width: 50%; */
/*     margin: 0 auto; */
/*     text-align: center; */
/* } */

/* .myimg { */
/*     width: 50%;        /\* Scale the image to 50% of its containing block *\/ */
/*     max-width: 50%;    /\* Ensure it doesn't exceed 50% *\/ */
/*     display: block;    /\* Make the image a block element *\/ */
/* } */

/* .myimgcontainer { */
/*     max-width: 50%;    /\* Limit the container to 50% of the text width *\/ */
/*     margin: 0 auto;    /\* Center the container horizontally *\/ */
/*     text-align: center; /\* Center-align any content inside the container *\/ */
/* } */




.org-src-container, pre.example {
    font-family: 'Roboto Mono', monospace;
    font-size: 14px;
}

/* https://github.com/fniessen/org-html-themes/blob/master/styles/readtheorg/css/htmlize.css */
.org-bold { /* bold */ font-weight: bold; }
.org-bold-italic { /* bold-italic */ font-weight: bold; font-style: italic; }
.org-buffer-menu-buffer { /* buffer-menu-buffer */ font-weight: bold; }
.org-builtin { /* font-lock-builtin-face */ color: #7a378b; }
.org-button { /* button */ text-decoration: underline; }
.org-calendar-today { /* calendar-today */ text-decoration: underline; }
.org-change-log-acknowledgement { /* change-log-acknowledgement */ color: #b22222; }
.org-change-log-conditionals { /* change-log-conditionals */ color: #a0522d; }
.org-change-log-date { /* change-log-date */ color: #8b2252; }
.org-change-log-email { /* change-log-email */ color: #a0522d; }
.org-change-log-file { /* change-log-file */ color: #0000ff; }
.org-change-log-function { /* change-log-function */ color: #a0522d; }
.org-change-log-list { /* change-log-list */ color: #a020f0; }
.org-change-log-name { /* change-log-name */ color: #008b8b; }
.org-comint-highlight-input { /* comint-highlight-input */ font-weight: bold; }
.org-comint-highlight-prompt { /* comint-highlight-prompt */ color: #00008b; }
.org-comment { /* font-lock-comment-face */ color: #999988; font-style: italic; }
.org-comment-delimiter { /* font-lock-comment-delimiter-face */ color: #999988; font-style: italic; }
.org-completions-annotations { /* completions-annotations */ font-style: italic; }
.org-completions-common-part { /* completions-common-part */ color: #000000; background-color: #ffffff; }
.org-completions-first-difference { /* completions-first-difference */ font-weight: bold; }
.org-constant { /* font-lock-constant-face */ color: #008b8b; }
.org-diary { /* diary */ color: #ff0000; }
.org-diff-context { /* diff-context */ color: #7f7f7f; }
.org-diff-file-header { /* diff-file-header */ background-color: #b3b3b3; font-weight: bold; }
.org-diff-function { /* diff-function */ background-color: #cccccc; }
.org-diff-header { /* diff-header */ background-color: #cccccc; }
.org-diff-hunk-header { /* diff-hunk-header */ background-color: #cccccc; }
.org-diff-index { /* diff-index */ background-color: #b3b3b3; font-weight: bold; }
.org-diff-nonexistent { /* diff-nonexistent */ background-color: #b3b3b3; font-weight: bold; }
.org-diff-refine-change { /* diff-refine-change */ background-color: #d9d9d9; }
.org-dired-directory { /* dired-directory */ color: #0000ff; }
.org-dired-flagged { /* dired-flagged */ color: #ff0000; font-weight: bold; }
.org-dired-header { /* dired-header */ color: #228b22; }
.org-dired-ignored { /* dired-ignored */ color: #7f7f7f; }
.org-dired-mark { /* dired-mark */ color: #008b8b; }
.org-dired-marked { /* dired-marked */ color: #ff0000; font-weight: bold; }
.org-dired-perm-write { /* dired-perm-write */ color: #b22222; }
.org-dired-symlink { /* dired-symlink */ color: #a020f0; }
.org-dired-warning { /* dired-warning */ color: #ff0000; font-weight: bold; }
.org-doc { /* font-lock-doc-face */ color: #8b2252; }
.org-escape-glyph { /* escape-glyph */ color: #a52a2a; }
.org-file-name-shadow { /* file-name-shadow */ color: #7f7f7f; }
.org-flyspell-duplicate { /* flyspell-duplicate */ color: #cdad00; font-weight: bold; text-decoration: underline; }
.org-flyspell-incorrect { /* flyspell-incorrect */ color: #ff4500; font-weight: bold; text-decoration: underline; }
.org-fringe { /* fringe */ background-color: #f2f2f2; }
.org-function-name { /* font-lock-function-name-face */ color: teal; }
.org-header-line { /* header-line */ color: #333333; background-color: #e5e5e5; }
.org-help-argument-name { /* help-argument-name */ font-style: italic; }
.org-highlight { /* highlight */ background-color: #b4eeb4; }
.org-holiday { /* holiday */ background-color: #ffc0cb; }
.org-isearch { /* isearch */ color: #b0e2ff; background-color: #cd00cd; }
.org-isearch-fail { /* isearch-fail */ background-color: #ffc1c1; }
.org-italic { /* italic */ font-style: italic; }
.org-keyword { /* font-lock-keyword-face */ color: #0086b3; }
.org-lazy-highlight { /* lazy-highlight */ background-color: #afeeee; }
.org-link { /* link */ color: #0000ff; text-decoration: underline; }
.org-link-visited { /* link-visited */ color: #8b008b; text-decoration: underline; }
.org-log-edit-header { /* log-edit-header */ color: #a020f0; }
.org-log-edit-summary { /* log-edit-summary */ color: #0000ff; }
.org-log-edit-unknown-header { /* log-edit-unknown-header */ color: #b22222; }
.org-match { /* match */ background-color: #ffff00; }
.org-next-error { /* next-error */ background-color: #eedc82; }
.org-nobreak-space { /* nobreak-space */ color: #a52a2a; text-decoration: underline; }
.org-org-archived { /* org-archived */ color: #7f7f7f; }
.org-org-block { /* org-block */ color: #7f7f7f; }
.org-org-block-begin-line { /* org-block-begin-line */ color: #b22222; }
.org-org-block-end-line { /* org-block-end-line */ color: #b22222; }
.org-org-checkbox { /* org-checkbox */ font-weight: bold; }
.org-org-checkbox-statistics-done { /* org-checkbox-statistics-done */ color: #228b22; font-weight: bold; }
.org-org-checkbox-statistics-todo { /* org-checkbox-statistics-todo */ color: #ff0000; font-weight: bold; }
.org-org-clock-overlay { /* org-clock-overlay */ background-color: #ffff00; }
.org-org-code { /* org-code */ color: #7f7f7f; }
.org-org-column { /* org-column */ background-color: #e5e5e5; }
.org-org-column-title { /* org-column-title */ background-color: #e5e5e5; font-weight: bold; text-decoration: underline; }
.org-org-date { /* org-date */ color: #a020f0; text-decoration: underline; }
.org-org-document-info { /* org-document-info */ color: #191970; }
.org-org-document-info-keyword { /* org-document-info-keyword */ color: #7f7f7f; }
.org-org-document-title { /* org-document-title */ color: #191970; font-size: 144%; font-weight: bold; }
.org-org-done { /* org-done */ color: #228b22; font-weight: bold; }
.org-org-drawer { /* org-drawer */ color: #0000ff; }
.org-org-ellipsis { /* org-ellipsis */ color: #b8860b; text-decoration: underline; }
.org-org-footnote { /* org-footnote */ color: #a020f0; text-decoration: underline; }
.org-org-formula { /* org-formula */ color: #b22222; }
.org-org-headline-done { /* org-headline-done */ color: #bc8f8f; }
.org-org-hide { /* org-hide */ color: #ffffff; }
.org-org-latex-and-export-specials { /* org-latex-and-export-specials */ color: #8b4513; }
.org-org-level-1 { /* org-level-1 */ color: #0000ff; }
.org-org-level-2 { /* org-level-2 */ color: #a0522d; }
.org-org-level-3 { /* org-level-3 */ color: #a020f0; }
.org-org-level-4 { /* org-level-4 */ color: #b22222; }
.org-org-level-5 { /* org-level-5 */ color: #228b22; }
.org-org-level-6 { /* org-level-6 */ color: #008b8b; }
.org-org-level-7 { /* org-level-7 */ color: #7a378b; }
.org-org-level-8 { /* org-level-8 */ color: #8b2252; }
.org-org-link { /* org-link */ color: #0000ff; text-decoration: underline; }
.org-org-meta-line { /* org-meta-line */ color: #b22222; }
.org-org-mode-line-clock { /* org-mode-line-clock */ color: #000000; background-color: #bfbfbf; }
.org-org-mode-line-clock-overrun { /* org-mode-line-clock-overrun */ color: #000000; background-color: #ff0000; }
.org-org-quote { /* org-quote */ color: #7f7f7f; }
.org-org-scheduled { /* org-scheduled */ color: #006400; }
.org-org-scheduled-previously { /* org-scheduled-previously */ color: #b22222; }
.org-org-scheduled-today { /* org-scheduled-today */ color: #006400; }
.org-org-sexp-date { /* org-sexp-date */ color: #a020f0; }
.org-org-special-keyword { /* org-special-keyword */ color: #a020f0; }
.org-org-table { /* org-table */ color: #0000ff; }
.org-org-tag { /* org-tag */ font-weight: bold; }
.org-org-target { /* org-target */ text-decoration: underline; }
.org-org-time-grid { /* org-time-grid */ color: #b8860b; }
.org-org-todo { /* org-todo */ color: #ff0000; font-weight: bold; }
.org-org-upcoming-deadline { /* org-upcoming-deadline */ color: #b22222; }
.org-org-verbatim { /* org-verbatim */ color: #7f7f7f; }
.org-org-verse { /* org-verse */ color: #7f7f7f; }
.org-org-warning { /* org-warning */ color: #ff0000; font-weight: bold; }
.org-outline-1 { /* outline-1 */ color: #0000ff; }
.org-outline-2 { /* outline-2 */ color: #a0522d; }
.org-outline-3 { /* outline-3 */ color: #a020f0; }
.org-outline-4 { /* outline-4 */ color: #b22222; }
.org-outline-5 { /* outline-5 */ color: #228b22; }
.org-outline-6 { /* outline-6 */ color: #008b8b; }
.org-outline-7 { /* outline-7 */ color: #7a378b; }
.org-outline-8 { /* outline-8 */ color: #8b2252; }
.org-preprocessor { /* font-lock-preprocessor-face */ color: #7a378b; }
.org-query-replace { /* query-replace */ color: #b0e2ff; background-color: #cd00cd; }
.org-regexp-grouping-backslash { /* font-lock-regexp-grouping-backslash */ font-weight: bold; }
.org-regexp-grouping-construct { /* font-lock-regexp-grouping-construct */ font-weight: bold; }
.org-region { /* region */ background-color: #eedc82; }
.org-secondary-selection { /* secondary-selection */ background-color: #ffff00; }
.org-shadow { /* shadow */ color: #7f7f7f; }
.org-show-paren-match { /* show-paren-match */ background-color: #40e0d0; }
.org-show-paren-mismatch { /* show-paren-mismatch */ color: #ffffff; background-color: #a020f0; }
.org-string { /* font-lock-string-face */ color: #dd1144; }
.org-tool-bar { /* tool-bar */ color: #000000; background-color: #bfbfbf; }
.org-tooltip { /* tooltip */ color: #000000; background-color: #ffffe0; }
.org-trailing-whitespace { /* trailing-whitespace */ background-color: #ff0000; }
.org-type { /* font-lock-type-face */ color: #228b22; }
.org-underline { /* underline */ text-decoration: underline; }
.org-variable-name { /* font-lock-variable-name-face */ color: teal; }
.org-warning { /* font-lock-warning-face */ color: #ff0000; font-weight: bold; }
.org-widget-button { /* widget-button */ font-weight: bold; }
.org-widget-button-pressed { /* widget-button-pressed */ color: #ff0000; }
.org-widget-documentation { /* widget-documentation */ color: #006400; }
.org-widget-field { /* widget-field */ background-color: #d9d9d9; }
.org-widget-inactive { /* widget-inactive */ color: #7f7f7f; }
.org-widget-single-line-field { /* widget-single-line-field */ background-color: #d9d9d9; }