* { 
  box-sizing: border-box;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}
::-moz-selection {
  background: color-mix(in srgb, var(--tertiary) 60%, #fff0);
  color: var(--darkgray);
}
::selection {
  background: color-mix(in srgb, var(--tertiary) 60%, #fff0);
  color: var(--darkgray);
}
:root {
  --light: #ebfff0;
  --lightgray: #c5ffdb;
  --gray: #74e291;
  --darkgray: #2d9d5c;
  --dark: #174029;
  --secondary: #ff1493;
  --tertiary: #d373ff;
  --highlight: #ff149326;
}
[data-theme="dark"] {
  --light: #0c2614;
  --lightgray: #1a4027;
  --gray: #35964b;
  --darkgray: #84ffa8;
  --dark: #ddffea;
  --secondary: #ff47b6;
  --tertiary: #b73fff;
  --highlight: #ff47b626;
}
@font-face {
  font-family: 'Sligoil';
  src: url('https://cdn.jsdelivr.net/gh/dduyg/LiminalLoop@main/fonts/Sligoil-Micro.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: 'Basteleur';
  src: url('https://cdn.jsdelivr.net/gh/dduyg/LiminalLoop@main/fonts/Basteleur-Bold.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
}
html, body { 
  height: 100%;
}
body {
  font-family: 'Sligoil', monospace;
  background-color: var(--light);
  color: var(--darkgray);
  padding: 1rem;
  display: flex;   
  flex-direction: column;
  min-height: 100vh;
  transition: background-color 0.3s ease, color 0.3s ease;
}
main {
  flex: 1;
}

a {
  color: var(--secondary);
  font-weight: 600;
  text-decoration: none;
  transition: color 0.2s;
}
a:hover {
  color: var(--tertiary);
}
a.internal {
  background-color: var(--highlight);
  border-radius: 5px;
  padding: 0 0.1rem;
  line-height: 1.4rem;
}
a.tag {
  background-color: var(--highlight);
  border-radius: 8px;
  margin: 0 0.1rem;
  padding: 0.2rem 0.4rem;
}
a.tag::before {
  content: "#";
} 

.tags {
  display: flex;
  flex-wrap: wrap;
  justify-self: end;
  gap: 0.4rem;
  margin: 1rem 0;
  padding-left: 0;
  list-style: none;
}
.tags .tagg {
  color: var(--tertiary);
  display: inline-block;
  white-space: nowrap;
  overflow-wrap: normal;
  margin: 0;
}

h1, h2 {
  font-family: 'Basteleur', sans-serif;
  color: var(--dark);
}
h1 {
  margin: 2.25rem 0 1rem;
  font-size: 1.75rem;
}
h2 {
  margin: 1.9rem 0 1rem;
  font-size: 1.4rem;
}
h3 {
  color: var(--darkgray);
  margin: 1.62rem 0 1rem;
  font-size: 1.12rem;
}

header, footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 1rem 0 6rem;
}

.logo-icon {
  width: 45px;
  height: 45px;
  fill: var(--secondary);
  transition: fill 0.3s ease;
}
.logo-icon:hover {
  fill: var(--highlight);
}

#theme-toggle {
  background: none;
  border: none;
  padding: 1rem;
  cursor: pointer;
  user-select: none;
}
#theme-toggle svg {
  width: 30px;
  height: 30px;
  fill: var(--darkgray);
  transition: fill 0.4s ease, transform 0.6s ease-in-out;
  transform-origin: center;
  display: block;
}
#theme-toggle.spin svg {
  transform: rotateY(180deg);    
}

ul {
  list-style: none;
  padding-left: 0;
}
ul li {
  margin-bottom: 0.5rem;
}

article h1 {
  margin-bottom: 0;
}
.content-meta {
  font-size: 0.8rem;
  color: var(--gray);
  margin-top: 0;
}
.content-meta[show-comma=true] > span:not(:last-child) {
  margin-right: 8px;
}
.content-meta[show-comma=true] > span:not(:last-child)::after {
  content: ",";
}

.folder::before {
  content: "";
  display: inline-block;
  width: 1.2em;
  height: 1.2em;
  margin-right: 0.4em;
  vertical-align: -0.15em; /* Adjust value for best centering */
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 300'%3E%3Cg transform='translate(0,300) scale(0.05,-0.05)' fill='currentColor' stroke='none'%3E%3Cpath d='M210 5297 c-226 -126 -211 43 -205 -2315 l5 -2058 61 -77 c34 -42 101 -97 149 -122 l88 -45 2274 0 c2202 0 2274 1 2320 38 75 59 1079 2088 1092 2205 38 333 -187 516 -655 533 l-279 10 0 392 c-1 808 87 761 -1425 762 l-1135 0 -115 158 c-63 86 -164 225 -225 309 -179 247 -115 233 -1083 232 -566 0 -840 -7 -867 -22z m1804 -602 c327 -461 155 -415 1545 -415 l1141 0 0 -409 0 -409 -1645 -6 -1645 -6 -113 -55 c-147 -73 -187 -128 -369 -518 -84 -180 -199 -426 -256 -547 -57 -121 -148 -317 -203 -435 -54 -118 -106 -214 -114 -215 -19 0 -20 3268 -2 3287 8 7 339 13 736 13 l722 0 203 -285z m3582 -1626 c85 -60 62 -118 -432 -1099 l-474 -940 -2117 -5 c-2011 -5 -2117 -3 -2107 30 34 114 923 1981 957 2010 60 51 4100 55 4173 4z'/%3E%3C/g%3E%3C/svg%3E");
  fill: var(--dark);
}

code, pre {
  font-family: "IBM Plex Mono", monospace;
}
code, tt {
  margin: 0 2px;
  padding: 0 5px;
  white-space: nowrap;
  border: 1px solid var(--lightgray);
  border-radius: 3px;
}
pre code {
  margin: 0;
  padding: 0;
  white-space: pre;
  border: none;
  background: transparent;
}
pre {
  border: 1px solid var(--lightgray);
  font-size: 13px;
  background-color: #333;
  color: #fff;
  line-height: 19px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding: 6px 10px;
  border-radius: 3px;
}
pre code, pre tt {
  background-color: transparent;
  border: none;
}