@font-face {
  font-family: "Manrope";
  font-weight: 500;
  font-style: normal;
  src: url("../font/manrope/Manrope-Regular.woff2") format("woff2"), url("../font/manrope/Manrope-Regular.ttf") format("truetype");
}
@font-face {
  font-family: "Manrope";
  font-weight: 700;
  font-style: normal;
  src: url("../font/manrope/Manrope-ExtraBold.woff2") format("woff2"), url("../font/manrope/Manrope-ExtraBold.ttf") format("truetype");
}
@font-face {
  font-family: "RobotoCondensed";
  font-weight: 700;
  font-style: normal;
  src: url("../font/roboto-condensed/Roboto-Condensed-Bold.woff2") format("woff2"), url("../font/roboto-condensed/Roboto-Condensed-Bold.ttf") format("truetype");
}
html {
  font-family: "Manrope", sans-serif;
}

h1, h2, h3 {
  font-family: "RobotoCondensed", sans-serif;
  line-height: 1;
  color: var(--t);
}

:root {
  --b:white;
  --bs:#ebebeb;
  --bt:#ebebeb;
  --t:black;
  --ts: #6b6b6b;
  --tl:#4d4d4d;
  --tc:#444444;
  --bc:#e5e5e5;
  --h:rgb(134 134 134 / 50%);
  --hs:#eee;
  --c:rgb(25, 0, 255);
}

@media (prefers-color-scheme: dark) {
  :root {
    --b:rgb(31,31,31);
    --bs:#171717;
    --bt:#383838;
    --t:white;
    --ts: #989898;
    --tl: #a3a3a3;
    --tc:#bdbdbd;
    --bc: #2b2b2b;
    --h:rgba(238, 238, 238, 0.5);
    --hs:#383838;
    --c:#a5ea20;
  }
}
* {
  padding: 0;
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  overflow-wrap: break-word;
  scrollbar-gutter: stable;
  line-height: 1.5;
}

body {
  background-color: var(--b);
  color: var(--tc);
}

hr {
  margin-top: 30px;
  border: none;
  border-bottom: solid var(--hs) 1.5px;
}

nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
nav a {
  text-decoration: none;
  color: var(--ts);
  font-weight: 500;
}
nav a:hover {
  text-decoration: none;
  color: var(--t);
}
nav .active {
  color: var(--t);
}
nav > div > a {
  margin-right: 10px;
}

main, nav {
  font-optical-sizing: auto;
  font-style: normal;
}

header, main {
  margin: auto;
  max-width: 600px;
  padding: 30px 20px 0;
}

a {
  color: var(--ts);
  text-decoration: underline;
  transition: color 0.2s ease;
  text-decoration-color: var(--hs);
  text-decoration-thickness: 1px;
  text-underline-position: under;
}
a:hover {
  color: var(--c);
}

article h2 {
  padding-top: 40px;
  color: var(--t);
}
article h3 {
  padding-top: 30px;
}
article hr, article ul, article ol, article dl, article blockquote, article p, article table, article pre {
  margin-top: 30px;
}

li {
  margin: 5px 0;
}

pre code {
  padding: 0;
  background-color: transparent;
  white-space: unset;
  line-height: initial;
}
pre {
  color: var(--t);
  padding: 20px 15px;
  margin: 10px 0;
  overflow: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

pre:not(.highlight) {
  border: solid 1px var(--ts);
}

.container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 20px;
}
@media (max-width: 768px) {
  .container {
    grid-template-columns: 1fr;
  }
}

header > a {
  display: contents;
  transform: scale(0.9);
  transition: transform 0.2s ease-in-out;
}
header > a:active {
  transform: scale(0.85);
}
header > a > img {
  border-radius: 100rem;
  display: block;
}
header time, header .view-counter {
  color: var(--ts);
  transition: color 0.2s ease;
  font-size: 95%;
}
header time:hover, header .view-counter:hover {
  color: var(--t);
}
@media screen and (min-width: 1200px) {
  header {
    padding-top: 100px;
  }
}

ul, ol {
  padding-inline-start: 20px;
}

iframe {
  margin: 30px 0;
  border: none;
}

img {
  display: block;
  margin: 0 0 5px;
  max-width: 100%;
  max-height: max-content;
  height: auto;
  background: linear-gradient(90deg, #e0e0e0, #f5f5f5, #e0e0e0);
  background-size: 200% 100%;
  animation: imgLoadingBg 1s infinite linear;
  border: solid 1px var(--bs);
  border-radius: 10px;
}

@keyframes imgLoadingBg {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}
img + em, a + em {
  opacity: 0.6;
  display: block;
  font-size: 0.9rem;
  font-style: normal;
  text-align: center;
}

figure {
  margin: 30px 0;
}

figcaption {
  opacity: 0.6;
  display: block;
  font-size: 0.8rem;
  font-style: normal;
  text-align: center;
}

table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  border-radius: 10px;
  overflow: hidden;
  border: solid var(--hs) 1.5px;
}
table td, table th {
  padding: 5px 10px;
  text-align: left;
  border-right: solid var(--hs) 1.5px;
  border-bottom: solid var(--hs) 1.5px;
}
table tr:nth-child(even) {
  background-color: color-mix(in srgb, var(--bc) 30%, transparent);
}
table {
  /* Header styles */
}
table th {
  background-color: var(--bc);
  border-top: none;
}
table tr:first-child th:last-child {
  border-right: none;
}
table tr td:last-child {
  border-right: none;
}
table tr:last-child td {
  border-bottom: none;
}

pre::-webkit-scrollbar {
  display: none; /* For Chrome, Safari, and Opera */
}

footer {
  margin: 40px 0;
  padding: 20px 0;
  border-top: solid var(--hs) 1.5px;
}

.copyright {
  color: var(--ts);
  transition: color 0.2s ease;
  display: inline;
}
.copyright:hover {
  color: var(--t);
}
.copyright a {
  color: inherit;
  text-decoration: none;
}

article hr {
  border: solid 1px var(--bt);
}
article h1 a, article h2 a, article h3 a, article h4 a {
  text-decoration: none;
}
article strong {
  color: var(--tc);
}
article #toc ul {
  margin-top: 0;
}

.logo {
  display: inline-block;
  width: 50px;
  height: 50px;
  background: url(../img/profile-square-100.webp) no-repeat 0% 0%;
  color: transparent;
  user-select: none;
  background-size: cover;
  border-radius: 100rem;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent; /* for removing the highlight */
  text-decoration: none;
}
.logo:hover {
  color: transparent;
  text-decoration: none;
}

.mermaid {
  margin: 50px 0;
}

h1 {
  font-size: 1.8em;
  margin: 0.67em 0;
  line-height: 1;
}

p {
  color: var(--tc);
}

main {
  margin-bottom: 50px;
}

code {
  font-family: sans-serif;
  padding: 0.2em 0.4em;
  margin: 0;
  font-size: 85%;
  white-space: break-spaces;
  background-color: var(--bt);
  border-radius: 6px;
}

a.footnote, a.reversefootnote {
  text-decoration: none;
  padding: 0 5px;
}

ul.post-list > li {
  margin-bottom: 1rem;
}
ul.post-list a {
  text-decoration: none;
  font-weight: bold;
  color: var(--t);
  line-height: 1;
}

.posts div {
  margin-bottom: 40px;
}

.suggestion-link {
  margin: 10px 0;
}

blockquote {
  padding: 0 1em;
  border-left: 0.25em solid var(--ts);
}

.sm {
  display: none;
}

@media (max-width: 768px) {
  .lg {
    display: none;
  }
}
svg.bi {
  display: flex;
}

@media (prefers-color-scheme: dark) {
  img {
    background: linear-gradient(90deg, #363636 25%, #2c2c2c 50%, #363636 75%);
    background-size: 200% 100%;
    animation: imgLoadingBg 2s infinite linear;
  }
}
.tag {
  text-decoration: none;
}

header {
  position: relative;
}

.archived {
  position: absolute;
  top: 0.25rem;
  left: 4.5rem;
  max-width: 300px;
  padding: 0.5rem 0.7rem;
  background-color: #a5e922;
  color: #1b1a1b;
  border-radius: 1rem;
  border-bottom-left-radius: 0;
  z-index: 10;
  font-size: small;
  font-family: "RobotoCondensed", sans-serif;
}

.archived::after {
  content: "";
  position: absolute;
  bottom: -10px;
  left: -1px;
  width: 0;
  height: 0;
  border-top: 15px solid #a5e922;
  border-right: 20px solid transparent;
  transform: rotate(10deg);
  z-index: 9;
}

@media (min-width: 1200px) {
  .archived {
    top: 4.25rem;
    left: 4.2rem;
  }
}
.skeleton {
  display: inline-block;
  vertical-align: middle;
  height: 1em;
  width: 2em;
  background: linear-gradient(90deg, var(--b), var(--bt), var(--bs));
  background-size: 200% 100%;
  animation: loading 1.5s infinite;
  border-radius: 5px;
}

@keyframes loading {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}
.error {
  color: red;
  animation: none;
  background: none;
}

ul#toc {
  margin-top: 0;
}

.modal {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 0.2s ease;
  /* Center the modal content with flexbox */
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal-content {
  background-color: var(--bt);
  color: var(--ts);
  padding: 20px;
  width: 80%;
  max-width: 550px;
  border-radius: 10px;
  box-shadow: rgba(0, 0, 0, 0.4196078431) 0px 0px 10px 0px;
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.2s ease;
  transform: translateY(-10px);
  /* Ensure content alignment */
  text-align: center;
}

.modal-content p {
  text-align: center;
  margin: 20px 0;
}

.modal-content p a {
  margin: 0 10px;
  background: var(--c);
  color: var(--bs);
  padding: 5px 7px;
  text-decoration: none;
}

span#modalCancel {
  cursor: pointer;
}

span#modalCancel:hover {
  color: var(--ts);
}

p#modalMessage {
  font-size: large;
  font-weight: bold;
}

#photos a {
  display: contents;
}
#photos img {
  width: 100%;
  margin: 0;
}

.container {
  display: grid;
  gap: 10px; /* Adjust the gap between images as needed */
}

/* For large screens */
@media (min-width: 1200px) {
  .container {
    grid-template-columns: repeat(4, 1fr);
  }
}
/* For medium screens */
@media (max-width: 1199px) {
  .container {
    grid-template-columns: repeat(3, 1fr);
  }
}
/* For small screens */
@media (max-width: 480px) {
  .container {
    grid-template-columns: repeat(2, 1fr);
  }
}
.container a {
  display: block;
  width: 100%;
  height: 0;
  padding-bottom: 75%; /* Adjust the aspect ratio (e.g., 75% for 4:3) */
  position: relative;
  overflow: hidden;
}

.container img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 10px;
  object-fit: cover; /* Ensure the image covers the container without stretching */
}

.pswp.pswp--open {
  backdrop-filter: blur(1px);
}

.pswp__caption__center > a {
  color: #CCC;
  text-decoration-color: #CCC;
}

html.is-changing .transition-fade {
  transition: 0.1s;
}

#contactForm {
  display: flex;
  margin: 10px 0;
}

.hidden {
  display: none;
}

#formContainer h2, #sendingMessage h2, #responseMessage h2 {
  color: black;
}
#formContainer, #sendingMessage, #responseMessage {
  margin: 100px 0;
  border-radius: 5px;
  background: #a5ea20;
  color: black;
  padding: 30px;
}

/* Styling for form input fields */
input[type=text],
input[type=email],
input[type=password],
textarea {
  padding: 10px;
  background-color: var(--bs);
  color: var(--t);
  border: none;
  border-radius: 5px;
  min-width: 50px;
}

/* Styling for submit button */
input[type=submit] {
  background-color: #1A611A; /* Green */
  color: white;
  padding: 10px 20px;
  border: none;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  cursor: pointer;
}
input[type=submit]:hover {
  background-color: #45a049; /* Darker green */
}

/* Remove outline when input field is active */
input:focus,
textarea:focus {
  outline: none;
}

input#\32 094455528 {
  width: 100%;
}

/* Form container */
#formContainer, #sendingMessage, #responseMessage {
  margin: 100px 0;
  border-radius: 5px;
  background: #a5ea20;
  color: black;
  padding: 30px;
  position: relative;
  overflow: hidden;
}

/* Animated Grid Background */
#formContainer::before,
#sendingMessage::before,
#responseMessage::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 200%;
  height: 200%;
  background-size: 40px 40px;
  background-image: linear-gradient(rgba(0, 0, 0, 0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 0, 0, 0.1) 1px, transparent 1px);
  animation: gridMove 6s linear infinite;
  z-index: 0;
}

/* Moving Grid Animation */
@keyframes gridMove {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-40px, -40px);
  }
}
/* Ensure content is above animation */
#formContainer > *,
#sendingMessage > *,
#responseMessage > * {
  position: relative;
  z-index: 1;
}

/* Form Group (Aligns Input & Button in One Line) */
.form-group {
  display: flex;
  width: 100%;
  gap: 5px; /* Small spacing */
}

/* Input Styling */
input[type=text] {
  flex: 1; /* Takes up remaining space */
  padding: 10px;
  border: none;
  border-radius: 5px 0 0 5px;
  transition: background-color 0.3s ease, transform 0.2s ease-in-out;
}

/* Submit Button */
input[type=submit] {
  background-color: #1A611A; /* Green */
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 0 5px 5px 0; /* Matches input field */
  cursor: pointer;
  transition: background-color 0.3s, transform 0.2s;
}

/* Hover Effects */
input[type=submit]:hover {
  background-color: #45a049;
  transform: scale(1.05);
}

/* Focus Effects */
input:focus, textarea:focus {
  outline: none;
  transform: scale(1.02);
}

.highlight .c {
  color: #998;
  font-style: italic;
}
.highlight .err {
  color: #a61717;
  background-color: #e3d2d2;
}
.highlight .k {
  font-weight: bold;
}
.highlight .o {
  font-weight: bold;
}
.highlight .cm {
  color: #998;
  font-style: italic;
}
.highlight .cp {
  color: #999;
  font-weight: bold;
}
.highlight .c1 {
  color: #998;
  font-style: italic;
}
.highlight .cs {
  color: #999;
  font-weight: bold;
  font-style: italic;
}
.highlight .gd {
  color: #000;
  background-color: #fdd;
}
.highlight .gd .x {
  color: #000;
  background-color: #faa;
}
.highlight .ge {
  font-style: italic;
}
.highlight .gr {
  color: #a00;
}
.highlight .gh {
  color: #999;
}
.highlight .gi {
  color: #000;
  background-color: #dfd;
}
.highlight .gi .x {
  color: #000;
  background-color: #afa;
}
.highlight .go {
  color: #888;
}
.highlight .gp {
  color: #555;
}
.highlight .gs {
  font-weight: bold;
}
.highlight .gu {
  color: #aaa;
}
.highlight .gt {
  color: #a00;
}
.highlight .kc {
  font-weight: bold;
}
.highlight .kd {
  font-weight: bold;
}
.highlight .kp {
  font-weight: bold;
}
.highlight .kr {
  font-weight: bold;
}
.highlight .kt {
  color: #458;
  font-weight: bold;
}
.highlight .m {
  color: #099;
}
.highlight .s {
  color: #d14;
}
.highlight .na {
  color: #008080;
}
.highlight .nb {
  color: #0086B3;
}
.highlight .nc {
  color: #458;
  font-weight: bold;
}
.highlight .no {
  color: #008080;
}
.highlight .ni {
  color: #800080;
}
.highlight .ne {
  color: #900;
  font-weight: bold;
}
.highlight .nf {
  color: #900;
  font-weight: bold;
}
.highlight .nn {
  color: #555;
}
.highlight .nt {
  color: #000080;
}
.highlight .nv {
  color: #008080;
}
.highlight .ow {
  font-weight: bold;
}
.highlight .w {
  color: #bbb;
}
.highlight .mf {
  color: #099;
}
.highlight .mh {
  color: #099;
}
.highlight .mi {
  color: #099;
}
.highlight .mo {
  color: #099;
}
.highlight .sb {
  color: #d14;
}
.highlight .sc {
  color: #d14;
}
.highlight .sd {
  color: #d14;
}
.highlight .s2 {
  color: #d14;
}
.highlight .se {
  color: #d14;
}
.highlight .sh {
  color: #d14;
}
.highlight .si {
  color: #d14;
}
.highlight .sx {
  color: #d14;
}
.highlight .sr {
  color: #009926;
}
.highlight .s1 {
  color: #d14;
}
.highlight .ss {
  color: #990073;
}
.highlight .bp {
  color: #999;
}
.highlight .vc {
  color: #008080;
}
.highlight .vg {
  color: #008080;
}
.highlight .vi {
  color: #008080;
}
.highlight .il {
  color: #099;
}

@media (prefers-color-scheme: dark) {
  .highlight .c {
    color: #545454;
    font-style: italic;
  }
  .highlight .err {
    color: #f07178;
    background-color: #e3d2d2;
  }
  .highlight .k {
    color: #89DDFF;
    font-weight: bold;
  }
  .highlight .o {
    font-weight: bold;
  }
  .highlight .cm {
    color: #545454;
    font-style: italic;
  }
  .highlight .cp {
    color: #545454;
    font-weight: bold;
  }
  .highlight .c1 {
    color: #545454;
    font-style: italic;
  }
  .highlight .cs {
    color: #545454;
    font-weight: bold;
    font-style: italic;
  }
  .highlight .gd {
    color: #000;
    background-color: #fdd;
  }
  .highlight .gd .x {
    color: #000;
    background-color: #faa;
  }
  .highlight .ge {
    font-style: italic;
  }
  .highlight .gr {
    color: #f07178;
  }
  .highlight .gh {
    color: #999;
  }
  .highlight .gi {
    color: #000;
    background-color: #dfd;
  }
  .highlight .gi .x {
    color: #000;
    background-color: #afa;
  }
  .highlight .go {
    color: #888;
  }
  .highlight .gp {
    color: #555;
  }
  .highlight .gs {
    font-weight: bold;
  }
  .highlight .gu {
    color: #aaa;
  }
  .highlight .gt {
    color: #f07178;
  }
  .highlight .kc {
    font-weight: bold;
  }
  .highlight .kd {
    font-weight: bold;
  }
  .highlight .kp {
    font-weight: bold;
  }
  .highlight .kr {
    font-weight: bold;
  }
  .highlight .kt {
    color: #FFCB6B;
    font-weight: bold;
  }
  .highlight .m {
    color: #F78C6C;
  }
  .highlight .s {
    color: #C3E88D;
  }
  .highlight .na {
    color: #008080;
  }
  .highlight .nb {
    color: #EEFFFF;
  }
  .highlight .nc {
    color: #FFCB6B;
    font-weight: bold;
  }
  .highlight .no {
    color: #008080;
  }
  .highlight .ni {
    color: #800080;
  }
  .highlight .ne {
    color: #900;
    font-weight: bold;
  }
  .highlight .nf {
    color: #82AAFF;
    font-weight: bold;
  }
  .highlight .nn {
    color: #555;
  }
  .highlight .nt {
    color: #FFCB6B;
  }
  .highlight .nv {
    color: #EEFFFF;
  }
  .highlight .ow {
    font-weight: bold;
  }
  .highlight .w {
    color: #EEFFFF;
  }
  .highlight .mf {
    color: #F78C6C;
  }
  .highlight .mh {
    color: #F78C6C;
  }
  .highlight .mi {
    color: #F78C6C;
  }
  .highlight .mo {
    color: #F78C6C;
  }
  .highlight .sb {
    color: #C3E88D;
  }
  .highlight .sc {
    color: #C3E88D;
  }
  .highlight .sd {
    color: #C3E88D;
  }
  .highlight .s2 {
    color: #C3E88D;
  }
  .highlight .se {
    color: #EEFFFF;
  }
  .highlight .sh {
    color: #C3E88D;
  }
  .highlight .si {
    color: #C3E88D;
  }
  .highlight .sx {
    color: #C3E88D;
  }
  .highlight .sr {
    color: #C3E88D;
  }
  .highlight .s1 {
    color: #C3E88D;
  }
  .highlight .ss {
    color: #C3E88D;
  }
  .highlight .bp {
    color: #999;
  }
  .highlight .vc {
    color: #FFCB6B;
  }
  .highlight .vg {
    color: #EEFFFF;
  }
  .highlight .vi {
    color: #EEFFFF;
  }
  .highlight .il {
    color: #F78C6C;
  }
}
/* width */
::-webkit-scrollbar {
  height: 10px;
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  background: var(--b);
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: var(--ts);
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: var(--t);
}

@media only screen and (max-width: 600px) {
  ::-webkit-scrollbar {
    height: 0;
  }
  .MJXc-display {
    overflow-x: scroll;
    overflow-y: clip;
  }
}
main > h2 {
  padding-top: 30px;
  color: var(--t);
}
main > hr, main blockquote, main table, main pre {
  margin-top: 30px;
  color: var(--t);
}

.copy {
  background-color: transparent;
  color: var(--t);
  border: none;
  padding: 4px 8px;
  cursor: pointer;
  border-radius: 30px;
}

.copy-container {
  display: flex;
  justify-content: space-between;
  padding: 5px 15px;
  background: rgba(137, 136, 136, 0.1803921569);
  border-radius: 10px 10px 0 0;
}

div.highlight {
  background-color: var(--bs);
  border-radius: 10px;
  margin-top: 30px;
  margin-bottom: 30px;
}
div.highlight pre {
  margin: 0;
}

p:has(img) {
  border-radius: 10px;
  margin: 30px 0;
}
p:has(img) img {
  max-width: 100%;
  display: block;
  margin: 0 auto;
}
p:has(img) em {
  display: block;
  text-align: center;
  margin-top: 5px;
  font-style: italic;
  font-size: 85%;
  opacity: 0.85;
}

figure {
  border-radius: 10px;
  margin: 30px 0;
}
figure img {
  max-width: 100%;
  display: block;
  margin: 0 auto;
}
figure figcaption {
  display: block;
  text-align: center;
  font-style: italic;
  font-size: 85%;
  opacity: 0.85;
}

figure:has(img),
p:has(img) {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

picture:has(img) {
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: 10px;
  margin: 30px 0;
}
picture:has(img) img {
  max-width: 100%;
  display: block;
  margin: 0 auto;
}

p:has(a img) {
  display: flex;
  flex-direction: unset;
  background-color: transparent;
  border: none;
  border-radius: 0;
  margin: 1em 0;
}

/* Note Section Container */
#note-section {
  max-width: 600px;
  margin: 2rem auto;
  border-radius: 8px;
}

/* Section Headers */
#note-section .post-subtitle {
  font-size: 1.5rem;
  margin-bottom: 1rem;
  border-bottom: solid var(--hs) 1.5px;
  padding-bottom: 0.5rem;
}

/* Notes Container */
#noteSection {
  margin-top: 1rem;
}

.note-item {
  margin-bottom: 1rem;
  padding: 0.8rem;
  border-radius: 5px;
  background: var(--bc);
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.05);
  border-left: 5px solid #007bff;
}

.note-name {
  font-weight: bold;
  margin-bottom: 0.3rem;
  display: flex;
  justify-content: space-between;
  font-size: 0.9rem;
  color: #555;
  transition: 0.3s;
}
.note-name:hover {
  color: var(--t);
}

.note-name small {
  font-weight: normal;
  color: #999;
}
.note-name small:hover {
  color: var(--t);
}

.note-item p {
  margin: 0.3rem 0;
}

/* Add Note Section */
.notes-form {
  margin-top: 1.5rem;
}

#note-form {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

#note-form .input-container {
  display: flex;
  justify-content: space-between;
  gap: 0.8rem;
}

#note-form input[type=text],
#note-form textarea {
  padding: 0.6rem;
  font-size: 1rem;
  border-radius: 5px;
  background: var(--bc);
  transition: border-color 0.2s ease;
}

#note-form input[type=text]:focus,
#note-form textarea:focus {
  border-color: #007BFF;
  outline: none;
}

#note-form textarea {
  resize: none;
  height: 100px;
}

#note-form input[type=text] {
  flex: 1;
}

#note-submit {
  padding: 0.7rem;
  font-size: 1rem;
  font-weight: bold;
  color: #fff;
  background: #007BFF;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

#note-submit:hover {
  background: #0056b3;
}

span.author-badge {
  background: #daff00;
  color: rgb(0, 0, 0);
  padding: 0 5px;
  border-radius: 1rem;
  margin-left: 6px;
}

.notes {
  border-radius: 12px;
  background-color: var(--b);
  margin-bottom: 20px;
}

#note-submit {
  border: solid 1px #007BFF;
  background-color: #2ea44f; /* GitHub green */
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 8px 16px;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  align-self: flex-end;
  transition: background-color 0.2s ease;
}

/* Hide noscript message by default (assuming JS is enabled) */
noscript {
  color: #d73a49;
  font-style: italic;
}

details summary {
  cursor: pointer;
  padding: 10px 0;
}

@media print {
  h3, h2, p, li, pre {
    opacity: 1 !important;
  }
  nav, footer, #comment-section > .comments-form, div#formContainer {
    display: none !important;
  }
  .lg {
    display: inline;
  }
  figure, p:has(img) {
    border: none;
    margin: 20px auto;
  }
  img {
    width: 50%;
    border: none;
    margin: 0 auto;
  }
  div#note-section {
    display: none;
  }
  p.copyright {
    margin: 30px 0;
  }
  article > details > summary {
    display: none;
  }
}
h3, h2, p, li, pre {
  opacity: 0;
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.visible {
  opacity: 1;
}

.modal p, #note-section p {
  opacity: 1;
}

#search-results, #search-results > li, #search-results > li > p, #search-results > li > a > h3 {
  opacity: 1;
}

.swup-progress-bar {
  height: 4px;
  background-color: var(--c);
}

.task-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.task-list .task-list-item {
  display: flex;
  align-items: center;
  padding: 10px;
  margin-bottom: 8px;
  border: 1px solid var(--bt);
  border-radius: 5px;
  background-color: var(--b);
  color: var(--t);
  transition: background-color 0.3s, box-shadow 0.3s;
}
.task-list .task-list-item:hover {
  background-color: var(--bc);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
.task-list .task-list-item input[type=checkbox] {
  margin-right: 10px;
  accent-color: var(--c);
  width: 18px;
  height: 18px;
}
.task-list .task-list-item input[type=checkbox]:checked::after {
  color: var(--tl); /* Use --tl for the check icon color */
}
.task-list .task-list-item input[type=checkbox]:disabled {
  opacity: 0.6;
}
.task-list .task-list-item.checked {
  text-decoration: line-through;
  color: var(--ts);
  background-color: var(--bc);
}

@font-face {
  font-family: "icon/icons";
  src: url("../font/icon/icons.woff2") format("woff2"), url("../font/icon/icons.woff") format("woff"), url("../font/icon/icons.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}
[class^=icon-]:before, [class*=" icon-"]:before {
  font-family: "icon/icons";
  font-style: normal;
  font-weight: normal;
  speak: never;
  display: inline-block;
  text-decoration: inherit;
  width: 1em;
  margin-right: 0.2em;
  text-align: center;
  font-variant: normal;
  text-transform: none;
  line-height: 1em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-mail:before {
  content: "\e800";
}

.icon-doc:before {
  content: "\e801";
}

.icon-link:before {
  content: "\e802";
}

.icon-picture:before {
  content: "\e803";
}

.icon-facebook-brands:before {
  content: "\e804";
}

.icon-export:before {
  content: "\e805";
}

.icon-bookmark:before {
  content: "\e806";
}

.icon-calendar:before {
  content: "\e807";
}

.icon-clock:before {
  content: "\e808";
}

.icon-back-in-time:before {
  content: "\e809";
}

.icon-search:before {
  content: "\e80a";
}

.icon-cancel:before {
  content: "\e80b";
}

.icon-cancel-circled2:before {
  content: "\e80c";
}

.icon-cancel-circled-1:before {
  content: "\e80d";
}

.icon-briefcase:before {
  content: "\e80e";
}

.icon-comment:before {
  content: "\e80f";
}

.icon-tag:before {
  content: "\e810";
}

.icon-tags:before {
  content: "\e811";
}

.icon-tag-1:before {
  content: "\e812";
}

.icon-tags-1:before {
  content: "\e813";
}

.icon-tag-2:before {
  content: "\e814";
}

.icon-calendar-outlilne:before {
  content: "\e815";
}

.icon-calendar-1:before {
  content: "\e816";
}

.icon-arrows-cw:before {
  content: "\e817";
}

.icon-graduation-cap:before {
  content: "\e818";
}

.icon-graduation-cap-1:before {
  content: "\e819";
}

.icon-user:before {
  content: "\e81a";
}

.icon-users:before {
  content: "\e81b";
}

.icon-user-1:before {
  content: "\e81c";
}

.icon-folder:before {
  content: "\e81d";
}

.icon-folder-1:before {
  content: "\e81e";
}

.icon-link-1:before {
  content: "\e81f";
}

.icon-linkedin-1:before {
  content: "\e820";
}

.icon-attach:before {
  content: "\e821";
}

.icon-attach-1:before {
  content: "\e822";
}

.icon-attach-2:before {
  content: "\e823";
}

.icon-list:before {
  content: "\e824";
}

.icon-archive:before {
  content: "\e825";
}

.icon-eye:before {
  content: "\e826";
}

.icon-eye-1:before {
  content: "\e827";
  font-size: 110%;
}

.icon-home:before {
  content: "\e828";
}

.icon-home-1:before {
  content: "\e829";
}

.icon-home-circled:before {
  content: "\e82a";
}

.icon-menu:before {
  content: "\e82b";
}

.icon-fast-food:before {
  content: "\e82c";
}

.icon-cog:before {
  content: "\e82d";
}

.icon-wrench:before {
  content: "\e82e";
}

.icon-cog-1:before {
  content: "\e82f";
}

.icon-spin1:before {
  content: "\e830";
}

.icon-wrench-circled:before {
  content: "\e831";
}

.icon-level-up:before {
  content: "\e832";
}

.icon-forward:before {
  content: "\e833";
}

.icon-forward-outline:before {
  content: "\e834";
}

.icon-forward-1:before {
  content: "\e835";
}

.icon-thumbs-up:before {
  content: "\e836";
}

.icon-thumbs-down:before {
  content: "\e837";
}

.icon-spin5:before {
  content: "\e838";
}

.icon-thumbs-up-1:before {
  content: "\e839";
}

.icon-thumbs-down-1:before {
  content: "\e83a";
}

.icon-heart:before {
  content: "\e83b";
}

.icon-heart-empty:before {
  content: "\e83c";
}

.icon-trash-empty:before {
  content: "\e83d";
}

.icon-adjust:before {
  content: "\e83e";
}

.icon-eye-2:before {
  content: "\f082";
}

.icon-bookmark-empty:before {
  content: "\f097";
}

.icon-twitter:before {
  content: "\f099";
}

.icon-github-circled:before {
  content: "\f09b";
}

.icon-mail-alt:before {
  content: "\f0e0";
}

.icon-linkedin:before {
  content: "\f0e1";
}

.icon-lightbulb:before {
  content: "\f0eb";
}

.icon-laptop:before {
  content: "\f109";
}

.icon-folder-empty:before {
  content: "\f114";
}

.icon-unlink:before {
  content: "\f127";
}

.icon-calendar-empty:before {
  content: "\f133";
}

.icon-doc-inv:before {
  content: "\f15b";
}

.icon-youtube-play:before {
  content: "\f16a";
}

.icon-instagram:before {
  content: "\f16d";
}

.icon-windows:before {
  content: "\f17a";
}

.icon-linux:before {
  content: "\f17c";
}

.icon-graduation-cap-2:before {
  content: "\f19d";
}

.icon-reddit:before {
  content: "\f1a1";
}

.icon-file-pdf:before {
  content: "\f1c1";
}

.icon-share:before {
  content: "\f1e0";
}

.icon-trash:before {
  content: "\f1f8";
}

.icon-whatsapp:before {
  content: "\f232";
}

.icon-sticky-note:before {
  content: "\f249";
}

.icon-sticky-note-o:before {
  content: "\f24a";
}

.icon-chrome:before {
  content: "\f268";
}

.icon-telegram:before {
  content: "\f2c6";
}

.icon-linkedin-squared:before {
  content: "\f30c";
}

.project-list {
  list-style: none;
  padding-left: 0;
  margin-top: 10px;
}

.project-list li {
  margin-bottom: 20px;
}

.project-link {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px 12px;
  text-decoration: none;
  color: var(--tc);
  border-radius: 8px;
  padding-top: 10px;
  transition: background 0.2s;
}

.project-thumbnail {
  width: 100px;
  height: 100px;
  object-fit: cover;
  border-radius: 8px;
  flex-shrink: 0;
}

.title {
  font-weight: bold;
  margin-bottom: 4px;
}

.desc {
  line-height: 1.4;
}

/*  title+desc  */
@media (min-width: 768px) {
  .project-link {
    grid-template-columns: auto 1fr;
    grid-template-rows: auto;
    align-items: flex-start;
  }
  .text-wrap {
    display: block;
  }
  .desc {
    grid-column: auto;
    font-size: 95%;
  }
  .project-thumbnail {
    width: 120px;
    height: 120px;
    object-fit: cover;
    border-radius: 8px;
    flex-shrink: 0;
  }
}
@media (max-width: 767px) {
  .project-link {
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    align-items: start;
  }
  .text-wrap {
    display: contents;
  }
  .desc {
    grid-column: 1/span 2;
  }
}