/* @import url("vars.css"); */

::-webkit-scrollbar {
  width: 3px;  /* Adjust the width for vertical scrollbars */
  height: 3px; /* Adjust the height for horizontal scrollbars */
}

::-webkit-scrollbar-track {
  background: #f1f1f1;  /* Light gray track */
}

::-webkit-scrollbar-thumb {
  background: #888;  /* Dark gray thumb */
  border-radius: 1px;
}

.katex::-webkit-scrollbar-thumb:hover {
  background: #555;  /* Darker gray when hovered */
}



@media screen and (max-width: 649px) {
    p, li {
        text-align: left;
        -webkit-hyphens: auto;
        -ms-hyphens: auto;
        hyphens: auto;
    }
    /*
    p + p {
        text-indent: 2em; 
    }
    */
    
}




@media screen and (min-width: 650px) {
    p, li {
        text-align: justify;
        hyphens: auto;
        -webkit-hyphens: auto;
        -ms-hyphens: auto;
        hyphens: auto;
    }
   /*
    p + p {
        text-indent: 2em; 
    } 
    */
}



body {
  display: flex;
  min-height: 100dvh;
  flex-direction: column;
  margin: 0;

  background-color: var(--bg1);
  color: var(--fg1);
  font-family: sans-serif;
  line-height: 1.5;

  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

header,
footer,
thead,
pre,
code {
  background-color: var(--bg2);
}

.navbar,
main,
.footer-content {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  padding-left: 2em;
  padding-right: 2em;
  box-sizing: border-box;
}

main {
  flex: 1;
  padding-top: 2em;
  padding-bottom: 2em;
}

.footer-content {
  display: flex;
  align-items: center;
  justify-content: center;
}

article {
  margin-top: 2em;
}

article:not(:last-of-type) {
  padding-bottom: 2em;
  border-bottom: solid 1px var(--fg2);
}

.metadata {
  margin: 1em 0;
}

.tags {
  list-style: none;
  display: inline-flex;
  gap: 0.5em;
  margin: 0;
  padding: 0;
}

.tags a {
  color: var(--fg2);
  text-decoration: none;
}

:is(h1, h2, h3, h4, h5, h6) .anchor {
  visibility: hidden;
}

:is(h1, h2, h3, h4, h5, h6):hover .anchor {
  visibility: visible;
}

p,
li {
  /* text-align: justify;*/
  hyphens: auto;
}

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

a:hover {
  text-decoration: underline;
}


blockquote {
    margin: 2em 0;                    
    padding: 1.5em 2em;               
    border-left: 6px solid var(--link);   
    background-color: var(--bg2);     
    border-radius: 0 8px 8px 0;       
    font-style: italic;
    color: var(--fg1);
    overflow: hidden;                 
}


pre code {
  padding: 0;
}

code {
  padding: 0.2em 0.3em;
}

table {
  border-collapse: collapse;
  width: 100%;
}

td,
th {
  border: solid 1px;
}

td,
th,
pre {
  padding: 1em;
}

pre,
.katex {
  overflow: auto;
}

figure {
  margin: 0;
}

img {
  max-width: 100%;         /* Resizes the image to 70% of its container */
  height: auto;      /* Maintains aspect ratio */
  margin: 0 auto;     /* Ensures centering if display: block is used */
 display: block; */
}


figcaption {
  margin-top: 1em;
  color: var(--fg2);
  text-align: center;
}


.gslide-title {
  text-align: center;
}

.katex { 
  vertical-align: baseline;
}