:root {
  --content-width: 1120px;
  --container-width: 810px;

  --light-primary-color: 255, 255, 255;
  --light-secondary-color: #dddddd;
  --light-tertiary-color: #272822;
  --light-text-color: black;
}

@font-face {
  font-family: Lato;
  font-weight: 400;
  src: url("/fonts/Lato-Regular.ttf");
}

@font-face {
  font-family: Lato;
  font-weight: 700;
  src: url("/fonts/Lato-Bold.ttf");
}
:root {
    --text-color: #343a40;
    --text-secondary-color: #6c757d;
    --text-link-color: #007bff;
    --background-color: #eaedf0;
    --secondary-background-color: #64ffda1a;
    --primary-color: #007bff;
    --secondary-color: #f8f9fa;
    --text-color-dark: #e4e6eb;
    --text-secondary-color-dark: #b0b3b8;
    --text-link-color-dark: #ffffff;
    --background-color-dark: #18191a;
    --secondary-background-color-dark: #212529;
    --primary-color-dark: #ffffff;
    --secondary-color-dark: #212529;
}

body {
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    text-align: left;
    background-color: var(--background-color);
    color: var(--text-color);
}

body.dark {
    background-color: var(--background-color-dark);
    color: var(--text-color-dark);
}

/* Remap shared variables when dark mode is active so components using
   common names switch correctly. */
html.dark, body.dark {
  --background-color: var(--background-color-dark);
  --secondary-background-color: var(--secondary-background-color-dark);
  --text-color: var(--text-color-dark);
  --text-secondary-color: var(--text-secondary-color-dark);
  --text-link-color: var(--text-link-color-dark);
  --primary-color: var(--primary-color-dark);
  --secondary-color: var(--secondary-color-dark);
}

/* Also remap legacy light-* variables used throughout the stylesheet so
   they don't force bright colors in dark mode. These are conservative
   fallbacks that point to darker equivalents. */
html.dark, body.dark {
  --light-primary-color: 24, 25, 26; /* rgb for #18191a */
  --light-secondary-color: #2b2b2b;
  --light-tertiary-color: #2b2b2b;
  --light-text-color: #e4e6eb;
}

/* Fix selectors that explicitly used the light-* variables so they adapt
   when dark mode is active. */
html.dark .header,
body.dark .header {
  background-color: var(--background-color-dark) !important;
  color: var(--text-color-dark) !important;
}

html.dark .nav-hamburger-list,
body.dark .nav-hamburger-list {
  background: var(--secondary-color) !important;
  border-bottom-color: var(--text-secondary-color) !important;
  border-top-color: var(--text-secondary-color) !important;
}

html.dark .nav-links .nav-icons-divider,
body.dark .nav-links .nav-icons-divider {
  border-color: var(--text-secondary-color) !important;
  color: var(--text-secondary-color) !important;
}

/* Some rules used light-specific colors directly (e.g. var(--light-text-color))
   — override common classes so they use theme variables in dark mode. */
html.dark .nav-hamburger-list a,
body.dark .nav-hamburger-list a,
html.dark .header a,
body.dark .header a {
  color: var(--text-color) !important;
}

/* If any element still renders a light primary background via the light var,
   force it to use the theme background in dark mode. */
html.dark [style*="--light-primary-color"],
body.dark [style*="--light-primary-color"] {
  background-color: var(--background-color-dark) !important;
}

/* Override Bootstrap and other component defaults in dark mode so elements
   that default to white use the theme variables instead. Keep these rules
   limited to common components to avoid unintended side-effects. */
html.dark .bg-white,
html.dark .bg-light,
html.dark .card,
html.dark .dropdown-menu,
html.dark .modal-content,
html.dark .popover,
html.dark .toast,
html.dark .navbar,
html.dark .form-control,
html.dark .btn-light,
body.dark .bg-white,
body.dark .bg-light,
body.dark .card,
body.dark .dropdown-menu,
body.dark .modal-content,
body.dark .popover,
body.dark .toast,
body.dark .navbar,
body.dark .form-control,
body.dark .btn-light {
  background-color: var(--secondary-color) !important;
  color: var(--text-color) !important;
  border-color: var(--text-secondary-color) !important;
  /* reduce harsh default shadows in dark mode */
  box-shadow: 0 4px 18px rgba(0,0,0,0.35) !important;
}

/* Specific: map utility classes that cause bright areas */
html.dark .bg-white { background-color: var(--secondary-color) !important; }
body.dark .bg-white { background-color: var(--secondary-color) !important; }

/* Make input placeholders and help texts readable in dark */
html.dark ::placeholder,
body.dark ::placeholder {
  color: rgba(255,255,255,0.6) !important;
}

/* Buttons that are light by default should adapt */
html.dark .btn-light,
body.dark .btn-light {
  background-color: var(--secondary-color) !important;
  color: var(--text-color) !important;
  border-color: var(--text-secondary-color) !important;
}

/* Scrollbar styles */
body::-webkit-scrollbar {
    height: 0;
    width: 8px;
    background-color: var(--background-color);
    margin-bottom: 170px;
}

body.dark::-webkit-scrollbar {
    background-color: var(--background-color-dark);
}

::-webkit-scrollbar-track {
    border-radius: 1rem;
}

::-webkit-scrollbar-thumb {
    border-radius: 1rem;
    background: #b0b0b0;
    outline: 1px solid var(--background-color);
}

body.dark ::-webkit-scrollbar-thumb {
    background: #555;
    outline: 1px solid var(--background-color-dark);
}

html {
  background-color: rgb(var(--light-primary-color));
  color: var(--light-text-color);
  font-family: "Lato", sans-serif;
  font-size: var(--font-size);
  min-height: 100%;
  position: relative;
  scroll-behavior: smooth;
}

/* Ensure the page can use flexbox to push the footer to the bottom */
html, body {
  height: 100%;
}

body.blog-post.has-post-navigation {
  margin-bottom: 80px;
}

b,
strong {
  font-weight: bold;
}

a {
  color: inherit;
}


a:hover {
  color: var(--accent-color);
  fill: var(--accent-color);
}

main#content {
  margin: 90px auto 0;
  width: var(--content-width);
}

main#content > .container {
  margin: auto;
  width: 75%;
  max-width: var(--container-width);
}

.post.container {
  box-sizing: border-box;
  display: inline-block;
}

.post-toc {
  box-sizing: border-box;
  display: inline-block;
  padding-left: 50px;
  vertical-align: top;
  width: 24%;
}

#toc {
  position: fixed;
  top: 80px;
  bottom: 20px;
  overflow-x: hidden;
  overflow-y: auto;
}

#toc ul {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 14px;
}

#toc ul li {
  margin-top: 12px;
}

#toc ul li a.level-1 {
  padding-left: 0;
}

#toc ul li a.level-2 {
  padding-left: 10px;
}

#toc ul li a.level-3 {
  padding-left: 20px;
}

#toc ul li a.level-4 {
  padding-left: 30px;
}

#toc ul li a {
  text-decoration: none;
}

#toc ul li a.active {
  color: var(--accent-color);
}

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

/* HEADER */
.header {
  background-color: rgba(var(--light-primary-color), 0.95);
  color: inherit;
  height: 50px;
  left: 0;
  position: fixed;
  top: 0;
  transition: box-shadow 0.3s ease-in-out;
  width: 100%;
  z-index: 5;
}

.header a {
  text-decoration: none;
}
.header .header-nav {
  height: 50px;
  margin-top: 0;
}

.header-nav .avatar {
  border-radius: 18px;
  float: left;
  height: 100%;
  margin-left: 15px;
}
.header-nav .avatar img {
  border-radius: 100%;
  display: block;
  height: 38px;
  margin-top: 5px;
  overflow: hidden;
  width: 38px;
}
.header-nav .nav-title {
  display: inline-block;
  height: 100%;
  line-height: 50px;
  padding-left: 15px;
}
.nav-title a {
  height: 50px;
}
.header-nav .nav-links {
  float: right;
  line-height: 50px;
  margin-right: 10px;
}
.nav-links .nav-link {
  display: inline-block;
  padding: 0 2px;
}
.nav-links .nav-link a {
  display: block;
  padding: 0 6px;
}
.nav-link a svg {
  height: 20px;
  margin: -3px auto;
  stroke-width: 2;
  width: 20px;
}
.nav-item a svg {
  height: 20px;
  margin: -3px auto;
  stroke-width: 2;
  width: 20px;
}
.nav-links .nav-link.icon a {
  padding: 0 8px;
}
.nav-links .nav-icons-divider {
  border-color: inherit;
  border-left: 1.5px solid;
  color: var(--text-secondary-color);
  margin: 0 10px;
}
.nav-links .dark-theme-toggle:hover {
  cursor: pointer;
}

a:hover .feather-sun {
  fill: black;
  color: black;
}

.dark-theme-toggle .feather {
  height: 22px;
  stroke-linecap: round;
  stroke-linejoin: round;
  width: 22px;
}
#hamburger-menu-toggle {
  display: none;
}
#hamburger-menu-toggle .feather {
  height: 24px;
  stroke-linecap: round;
  stroke-linejoin: round;
  width: 24px;
}
.nav-hamburger-list {
  background: var(--background-color);
  border-bottom: solid 1.5px var(--text-secondary-color);
  border-top: solid 1.5px var(--text-secondary-color);
  list-style-type: none;
  margin: 0;
  padding: 0;
  position: absolute;
  right: 0;
  text-align: center;
  width: 100%;
  z-index: 5;
}
.nav-hamburger-list a:hover {
  text-decoration: underline;
}

/* FOOTER */
.footer {
  /* Use normal flow so footer can be positioned by flexbox (mt-auto on footer works).
     Adjust layout with margins instead of absolute positioning. */
  color: inherit;
  left: 0;
  overflow: hidden;
  padding: 40px 0;
  text-align: center;
  width: 100%;
  margin: 0 auto;
}

.footer span {
  display: block;
  font-size: 0.85em;
  font-weight: 300;
  padding: 1px 0;
}

/** COMMON **/
.flex-break {
  flex-basis: 100%;
  height: 0;
  display: none;
}

.visibility-hidden {
  visibility: hidden;
}

.header-shadow {
  box-shadow: rgb(220, 220, 220) 0px 1px 5px;
}

/* TAGS */
.post-tags {
  list-style-type: none;
  padding: 0;
}
.post-tags .post-tag {
  border: 1.5px solid;
  border-radius: 4px;
  box-sizing: border-box;
  color: inherit;
  display: inline-block;
  font-size: 14px;
}
.post-tags .post-tag:hover {
  background-color: var(--secondary-color);
  color: var(--text-color);
}
.post-tag a {
  color: inherit;
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

/* CODE BLOCKS */
code,
pre {
  background-color: var(--secondary-color);
  box-sizing: border-box;
  color: var(--text-color);
}

pre {
  font-size: 0.95rem;
  overflow: auto;
  padding: 20px;
}

code {
  box-decoration-break: clone;
  word-wrap: break-word;
  font-size: 0.8em;
}

:not(pre) > code {
  background-color: var(--secondary-color) !important;
  color: var(--text-color);
  padding: 1px 4px;
}

pre code {
  font-size: 0.9em;
}

/*
Fix iOS font sizing in code blocks
Author: https://github.com/bglw
Source: https://github.com/adityatelange/hugo-PaperMod/issues/828#issuecomment-1171994855
*/
code {
  text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

blockquote {
  border-left: 2px solid var(--text-secondary-color);
  color: grey;
  padding-left: 1rem;
  margin-left: 0;
}

hr {
  color: var(--light-secondary-color);
  margin: 50px auto;
}

/* Additional dark-mode fixes for selectors still using light-* variables */
html.dark .post-tags .post-tag:hover,
body.dark .post-tags .post-tag:hover {
  background-color: var(--secondary-color) !important;
  color: var(--text-color) !important;
}

html.dark code,
html.dark pre,
body.dark code,
body.dark pre {
  background-color: var(--secondary-color) !important;
  color: var(--text-color) !important;
  border-color: var(--text-secondary-color) !important;
}

html.dark :not(pre) > code,
body.dark :not(pre) > code {
  background-color: var(--secondary-color) !important;
  color: var(--text-color) !important;
}

html.dark blockquote,
body.dark blockquote {
  border-left-color: var(--text-secondary-color) !important;
  color: var(--text-color) !important;
}

html.dark hr,
body.dark hr {
  color: var(--text-secondary-color) !important;
  border-color: var(--text-secondary-color) !important;
}

table {
  border-collapse: collapse;
  margin: 30px 0;
  text-align: left;
  display: block;
  overflow-x: auto;
}

table thead {
  background-color: var(--light-secondary-color);
}

table td,
table th {
  padding: 1.4rem;
}

table td {
  border-bottom: 1px solid var(--light-secondary-color);
}

/* HOME PAGE */
.home-about {
  text-align: center;
}

.home-about .avatar img {
  border-radius: 50%;
  height: auto;
  object-fit: cover;
}

/* Avatar sizes (default is M) - XS, S, M, L, XL */
.home-about .avatar img.size-xs {
  height: 7rem;
  width: 7rem;
}

.home-about .avatar img.size-s {
  height: 9rem;
  width: 9rem;
}

.home-about .avatar img.size-m {
  height: 11rem;
  width: 11rem;
}

.home-about .avatar img.size-l {
  height: 13rem;
  width: 13rem;
}

.home-about .avatar img.size-xl {
  height: 15rem;
  width: 15rem;
}

.home-about h1 {
  font-size: 2em;
}

.home-about h2 {
  font-size: 1.2em;
}

.gk-social-icons {
  text-align: center;
}

.gk-social-icons .gk-social-icons-list {
  display: inline-block;
  list-style-type: none;
  padding: 0;
  text-align: center;
}

.gk-social-icons-list .gk-social-icon {
  box-sizing: border-box;
  display: inline-block;
  fill: var(--light-text-color);
  height: 24px;
  margin: 0 6px;
  width: 24px;
}

.gk-social-icon a svg path {
  transition: fill 0.15s ease;
}

.home-content {
  line-height: 1.25;
  width: 80%;
  margin: 0 auto;
}

.home-posts {
  margin: 0 auto;
  padding-top: 10px;
  width: 80%;
}

/* SINGLE */
.post [role="doc-subtitle"] {
  font-size: 1.1em;
  font-style: italic;
}
.post {
  /* Prevent long strings from overflowing */
  overflow-wrap: break-word;
}
.post .post-date, .prev-post-date, .next-post-date {
  color: gray;
}
.post .post-content {
  line-height: 1.7;
  margin-top: 50px;
  letter-spacing: 0.5px;
}
.post-content h1, .post-content h2, .post-content h3, .post-content h4 {
  scroll-margin-top: 55px;
}
.post-content h1 {
  margin-top: 40px;
}
.post-content h2 {
  margin-top: 35px;
}
.post-content h3 {
  margin-top: 30px;
}
.post-content h4 {
  margin-top: 25px;
}
.post-content h5 {
  margin-top: 20px;
}
.post-content img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* LIST */
.list-posts .list-title {
  text-align: center;
}
.list-posts .posts-year {
  margin-top: 70px;
}
.list-posts .post-title {
  margin: 18px 0 0 15px;
}
.list-posts a {
  text-decoration: none;
}
.post-title .post-link,
.post-title .post-date {
  display: inline-block;
}
.post-title .post-link {
  /* This magic number is the largest width that keeps the post-date div from
   *  causing the line to wrap with the longest possible date string
   *  "September 22, 2022"
   */
  width: 73%;
}
.tags-list .post-tags {
  margin-top: 50px;
}
.tags-list .post-tags .post-tag {
  margin: 2px 5px;
  padding: 0;
}
.tags-list .post-tags .post-tag a {
  border-radius: inherit;
  padding: 0;
}
.tags-list .post-tags .post-tag a div {
  display: inline-block;
}
.tags-list .post-tags .post-tag a .tag-name {
  padding: 5px 8px;
}
.tags-list .post-tags .post-tag a .tag-posts-count {
  background-color: var(--light-secondary-color);
  border-radius: inherit;
  color: inherit;
  opacity: 0.8;
  padding: 6px;
  position: relative;
  z-index: 0;
}
.tags-list .post-tags .post-tag:hover a .tag-posts-count {
  background-color: var(--light-text-color);
  color: rgb(var(--light-primary-color));
}

.text-404 {
  margin-top: 125px;
  text-align: center;
}

@media only screen and (max-width: 1120px) {
  main#content {
    width: auto;
  }
}

@media only screen and (max-width: 820px) {
  body {
    font-size: 0.95rem;
  }

  .flex-break {
    display: block;
  }

  .home-about .avatar img {
    border-radius: 50%;
    height: 7rem;
    width: 7rem;
  }

  .nav-links .nav-link,
  .nav-icons-divider {
    display: none;
  }

  #hamburger-menu-toggle {
    display: inline-block;
  }

  main#content {
    box-sizing: border-box;
    padding: 0 1.5rem;
    width: auto;
  }

  .home-content, .home-posts {
    width: auto;
    margin: 0;
  }

  main#content .container {
    width: 100%;
  }

  .home-about {
    margin: 0 auto;
  }

  #toc {
    display:none;
  }

  .list-posts {
    flex: 1;
  }

  .list-posts .post-date {
    color: gray;
  }

  .footer {
    margin-top: 100%;
    width: 100%;
  }
}

@media only screen and (min-width: 820px) {
  .nav-hamburger-list {
    visibility: hidden !important;
  }
}

/*Accessibility*/
.sr-only {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.post-navigation {
  padding: 40px 0;
}

.post-navigation::after {
  clear: both;
  content: "";
  display: table;
}

.prev-post {
  float: left;
  text-align: left;
}

.next-post {
  float: right;
  text-align: right;
}

.prev-post, .next-post {
  max-width: 33%;
}

/* back to top button  */
.arrow-logo {
  background-color: transparent;
  border-radius: 50%;
  bottom: 20px;
  cursor: pointer;
  display: none;
  font-size: 24px;
  padding: 10px;
  padding-right: 8px;
  position: fixed;
  right: 20px;
  z-index: 5;
  background-color: var(--light-tertiary-color);
  width: 25px;
  height: 25px;
}

.arrow-logo path{
  fill: var(--light-secondary-color)
}

.arrow-logo:hover {
  fill:  var(--accent-color);
}

@media screen and (max-width: 600px) {
  #btt-button {
      visibility: hidden;
  }
}