@charset "UTF-8";
:root {
  /* DARK as default theme */
  --col-text: #F3F7F0;
  --col-text-secondary: color-mix(in srgb, var(--col-text) 70%, black);
  --col-accent: #5C64FF;
  --col-unlicked-link-accent: #5C64FF;
  --col-background-header: #0C181D;
  --col-background-nav: color-mix(in srgb, var(--col-background-header) 95%, white);
  --col-background-content: color-mix(in srgb, var(--col-background-nav) 95%, white);
  --col-border: color-mix(in srgb, var(--col-background-nav) 92%, white);
  --col-link: #5C64FF;
  --pgp-bg: #2a3740;
  --col-highlight-red: #F2545B;
  --col-highlight-green: #4DE6AC;
  --col-highlight-blue: #64B5F6;
  --col-highlight-important: #FF8F33;
  --shadow-intensity: 0.12;
}

/* Make inline SVGs respond to dark mode */
[data-theme=dark] .img-theme-toggle svg,
[data-theme=dark] .img-theme-toggle img,
[data-theme=dark] .img-theme-toggle object {
  filter: invert(1) hue-rotate(180deg);
}

/* LIGHT overrides – only the ones that differ */
[data-theme=light] {
  --col-text: #3A343A;
  --col-text-secondary: color-mix(in srgb, var(--col-text) 85%, white);
  --col-accent: #5C64FF;
  --col-unlicked-link-accent: #5C64FF;
  --col-background-header: #D8DADC;
  --col-background-nav: color-mix(in srgb, var(--col-background-header) 38%, white);
  --col-background-content: color-mix(in srgb, var(--col-background-nav) 38%, white);
  --col-border: color-mix(in srgb, var(--col-background-nav) 95%, black);
  --col-link: #5C64FF;
  --pgp-bg: #EEEEEE;
  --col-highlight-red: #EF4444;
  --col-highlight-green: #10B981;
  --col-highlight-blue: #0EA5E9;
  --col-highlight-important: #FF8F33;
  --shadow-intensity: 0.05;
}

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

html, body {
  height: 100%;
  background-color: var(--col-background-content);
}

body {
  display: flex;
  flex-direction: column;
  color: var(--col-text);
}

main {
  flex: 1;
}

p {
  font-size: 1.2rem;
  color: var(--col-text);
}

ul {
  list-style: square;
  list-style-position: outside;
  margin-left: 1rem;
  font-family: inherit;
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
  color: var(--col-text);
}

ol {
  list-style-position: outside;
  padding-left: 0;
  margin-left: 2rem;
  font-family: inherit;
  font-size: 1.2rem;
  color: var(--col-text);
}

hr {
  margin: 1rem 0rem;
}

header {
  text-align: center;
  background-color: var(--col-background-header);
  padding: 1em;
}

#keuchel {
  color: var(--col-text);
  font-size: 50px;
  text-decoration: none;
}

#keuchel:hover {
  text-decoration: underline;
  text-decoration-thickness: 3px;
}

a {
  color: var(--col-unlicked-link-accent);
  text-decoration: none;
  margin: 0px 0px;
}

a:hover {
  color: var(--col-accent);
  text-decoration: underline;
}

nav {
  text-align: center;
  background-color: var(--col-background-nav);
  padding: 0.6em;
}

nav a {
  color: var(--col-text);
  text-decoration: none;
  margin: 0px 1em;
}

nav a:hover {
  color: var(--col-accent);
  text-decoration: underline;
}

.current {
  color: var(--col-accent);
  font-weight: bold;
  text-decoration: none;
}

nav > * {
  vertical-align: middle;
}

.theme-switch {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  margin-left: 1em;
  position: relative;
}
.theme-switch input {
  display: none;
}
.theme-switch .slider {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.8em;
  height: 1.8em;
  border-radius: 50%;
  background-color: transparent;
  transition: transform 0.3s ease;
}
.theme-switch .slider svg {
  width: 1.2em;
  height: 1.2em;
  fill: var(--col-text);
  transition: opacity 0.3s ease;
}
.theme-switch .slider .sun {
  opacity: 1;
}
.theme-switch .slider .moon {
  opacity: 0;
  position: absolute;
}

.theme-switch .slider {
  transition: background-color 0.3s ease, transform 0.4s ease;
}

[data-theme=dark] .theme-switch .slider {
  transform: rotate(360deg);
}

[data-theme=dark] .theme-switch .slider .sun {
  opacity: 0;
}
[data-theme=dark] .theme-switch .slider .moon {
  opacity: 1;
}

footer {
  text-align: center;
  background-color: var(--col-background-nav);
  padding: 1em;
}

.personal-links a {
  color: var(--col-text);
  text-decoration: none;
}

.obligaroty-links {
  text-decoration: none;
  color: var(--col-link);
  font-size: 0.65em;
}

.obligaroty-links:hover {
  color: var(--col-link);
  text-decoration: underline;
}

.sep {
  margin: 0em 0.2em;
  font-size: 0.65em;
}

.content {
  width: 100%;
  max-width: 800px;
  margin: auto;
  text-align: justify;
  padding: 2rem;
  line-height: 1.5;
  color: var(--col-text);
}

.plain-list {
  list-style-type: none;
  margin: 0em;
  padding: 0em;
}

.card-main-link:hover {
  text-decoration: none;
}

.card {
  display: block;
  padding: 1.2rem;
  background-color: var(--col-background-nav);
  border: 1px solid var(--col-border);
  border-radius: 10px;
  color: var(--col-text);
  box-shadow: 0 0 8px 4px rgba(0, 0, 0, var(--shadow-intensity));
  text-align: left;
}

.card:hover {
  text-decoration: none;
  background-color: var(--col-border);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  flex-wrap: nowrap;
}

.card-title {
  font-weight: bold;
  font-size: 1.2rem;
}

.pdf-icon {
  position: relative;
  bottom: -3px;
  right: -8px;
}

.card-title,
.card-description p {
  text-align: left;
  text-justify: auto;
}

.card-metadata {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.card-md-flag {
  max-height: 0.8rem;
  width: auto;
  margin-left: 0.5rem;
}

.card-md-logo {
  max-height: 1.25rem;
  width: auto;
  display: block;
  margin-bottom: 5px;
}

#pgp-key {
  width: 100%;
  overflow-x: auto;
  margin: 1rem 0rem;
  padding: 1rem;
  background-color: var(--pgp-bg);
  border-radius: 4px;
  /* Responsive font scaling */
  font-size: clamp(0.65rem, 0.8rem + 0.5vw, 1.1rem);
}

.highlight-block {
  padding: 0.8em 1em;
  margin: 0.75rem 0rem;
  font-size: 1rem;
  color: var(--col-text);
}

.highlight-quote {
  background: color-mix(in srgb, var(--col-background-content) 90%, white);
  border-left: 6px solid color-mix(in srgb, var(--col-background-content) 70%, white);
  font-style: italic;
}

.highlight-warning {
  background: color-mix(in srgb, var(--col-background-content) 90%, var(--col-highlight-red));
  border-left: 6px solid color-mix(in srgb, var(--col-background-content) 60%, var(--col-highlight-red));
}

.highlight-hint {
  background: color-mix(in srgb, var(--col-background-content) 90%, var(--col-highlight-green));
  border-left: 6px solid color-mix(in srgb, var(--col-background-content) 60%, var(--col-highlight-green));
}

.highlight-note {
  background: color-mix(in srgb, var(--col-background-content) 90%, var(--col-highlight-blue));
  border-left: 6px solid color-mix(in srgb, var(--col-background-content) 60%, var(--col-highlight-blue));
}

.highlight-important {
  background: color-mix(in srgb, var(--col-background-content) 90%, var(--col-highlight-important));
  border-left: 6px solid color-mix(in srgb, var(--col-background-content) 60%, var(--col-highlight-important));
}

.language-plaintext {
  overflow-wrap: anywhere;
}

#toc-table {
  background-color: var(--col-background-nav);
  padding: 0.5rem 1rem;
  border-radius: 4px;
  margin-bottom: 1rem;
}

.text-primary {
  color: var(--col-text);
  text-decoration: none;
  font-size: 1.2em;
}

.text-secondary {
  color: var(--col-text-secondary);
  font-size: 1em;
}

.text-small {
  font-size: 1rem;
}

.center {
  text-align: center;
}

.mb-025, .content-project h3, .content-post h3, h6, .content-lecture-notes h3, h4, h5, p {
  margin-bottom: 0.25rem;
}

.mb-05, .content-project h2, .content-post h2, .content-lecture-notes h2 {
  margin-bottom: 0.5rem;
}

.mb-075 {
  margin-bottom: 0.75rem;
}

.mb-1, .content-project h1, .content-post h1, .content-lecture-notes h1 {
  margin-bottom: 1rem;
}

.mb-2 {
  margin-bottom: 2rem;
}

.mt-025 {
  margin-top: 0.25rem;
}

.mt-05 {
  margin-top: 0.5rem;
}

.mt-1, .content-project h1, .content-post h1 {
  margin-top: 1rem;
}

.mt-2, .content-project h3, .content-post h3, h4, h5, h6 {
  margin-top: 2rem;
}

.mt-3 {
  margin-top: 3rem;
}

.bb {
  border-bottom: 2px solid var(--col-text);
}

.v-space-1 {
  height: 1rem;
}

.v-space-2 {
  height: 2rem;
}

.font1 {
  font-size: 1rem;
}

.img-100 svg,
.img-100 img {
  width: 100%;
  height: auto;
  margin: 1em 0em;
}

.img-80 {
  display: flex;
  justify-content: center;
  margin: 1em 0em;
}

.img-80 svg,
.img-80 img {
  width: 80%;
  height: auto;
}

.px24-svg svg {
  width: 24px;
  height: 24px;
}

@media (max-width: 768px) {
  #keuchel {
    font-size: 2rem;
  }
  p, ul, ol {
    font-size: 1rem;
  }
  .content {
    padding: 1rem;
    max-width: 95%;
  }
  nav a {
    display: inline-block;
    margin: 0.5em;
  }
  .card {
    padding: 1rem;
  }
}
@media (max-width: 480px) {
  #keuchel {
    font-size: 1.6rem;
  }
  .content {
    padding: 0.8rem;
  }
  p, ul, ol {
    font-size: 0.95rem;
  }
}
html {
  font-family: "Open Sans", sans-serif;
}

.content-post img {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto; /* Optional: centers images */
}

.content-project img {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto; /* Optional: centers images */
}

.content-project video {
  width: 100%;
  max-width: 100%;
  aspect-ratio: 5/4;
  height: auto;
  display: block;
  margin: 1em 0em;
  background-color: black;
}

/* Base code block */
.highlight {
  border-radius: 6px;
  overflow-x: auto;
  max-height: 600px;
  overflow-y: auto;
  font-family: "Fira Code", monospace;
  line-height: 1.4;
  font-size: 0.9rem;
}

/* Inline code */
code {
  border-radius: 4px;
  font-family: "Fira Code", monospace;
  font-size: 0.95em;
}

html[data-theme=light] .highlight .lineno {
  color: #999;
}

html[data-theme=light] code {
  background-color: #eee;
  color: #222;
}

html[data-theme=dark] .highlight .lineno {
  color: #88c0d0;
}

[data-theme=light] .language-plaintext {
  background-color: #eeeeee;
  padding: 0.2em 0.4em;
}
[data-theme=light] .highlight table td {
  padding: 5px;
}
[data-theme=light] .highlight table pre {
  margin: 0;
}
[data-theme=light] .highlight, [data-theme=light] .highlight .w {
  color: #383838;
  background-color: #eeeeee;
}
[data-theme=light] .highlight .c, [data-theme=light] .highlight .ch, [data-theme=light] .highlight .cd, [data-theme=light] .highlight .cm, [data-theme=light] .highlight .cpf, [data-theme=light] .highlight .c1, [data-theme=light] .highlight .cs {
  color: #585858;
}
[data-theme=light] .highlight .cp {
  color: #f7ca88;
}
[data-theme=light] .highlight .nt {
  color: #A66B13;
}
[data-theme=light] .highlight .o, [data-theme=light] .highlight .ow {
  color: #565656;
}
[data-theme=light] .highlight .p, [data-theme=light] .highlight .pi {
  color: #565656;
}
[data-theme=light] .highlight .gi {
  color: #a1b56c;
}
[data-theme=light] .highlight .gd {
  color: #ab4642;
}
[data-theme=light] .highlight .gh {
  color: #7cafc2;
  background-color: #181818;
  font-weight: bold;
}
[data-theme=light] .highlight .ge {
  font-style: italic;
}
[data-theme=light] .highlight .ges {
  font-weight: bold;
  font-style: italic;
}
[data-theme=light] .highlight .gs {
  font-weight: bold;
}
[data-theme=light] .highlight .k, [data-theme=light] .highlight .kn, [data-theme=light] .highlight .kp, [data-theme=light] .highlight .kr, [data-theme=light] .highlight .kv {
  color: #CC0A7B;
}
[data-theme=light] .highlight .kc {
  color: #dc9656;
}
[data-theme=light] .highlight .kt {
  color: #dc9656;
}
[data-theme=light] .highlight .kd {
  color: #dc9656;
}
[data-theme=light] .highlight .s, [data-theme=light] .highlight .sb, [data-theme=light] .highlight .sc, [data-theme=light] .highlight .dl, [data-theme=light] .highlight .sd, [data-theme=light] .highlight .s2, [data-theme=light] .highlight .sh, [data-theme=light] .highlight .sx, [data-theme=light] .highlight .s1 {
  color: #37A637;
}
[data-theme=light] .highlight .sa {
  color: #ba8baf;
}
[data-theme=light] .highlight .sr {
  color: #86c1b9;
}
[data-theme=light] .highlight .si {
  color: #a16946;
}
[data-theme=light] .highlight .se {
  color: #a16946;
}
[data-theme=light] .highlight .nn {
  color: #f7ca88;
}
[data-theme=light] .highlight .nc {
  color: #f7ca88;
}
[data-theme=light] .highlight .no {
  color: #f7ca88;
}
[data-theme=light] .highlight .na {
  color: #7cafc2;
}
[data-theme=light] .highlight .m, [data-theme=light] .highlight .mb, [data-theme=light] .highlight .mf, [data-theme=light] .highlight .mh, [data-theme=light] .highlight .mi, [data-theme=light] .highlight .il, [data-theme=light] .highlight .mo, [data-theme=light] .highlight .mx {
  color: #89a837;
}
[data-theme=light] .highlight .ss {
  color: #a1b56c;
}

[data-theme=dark] .language-plaintext {
  background-color: #2a3740;
  padding: 0.2em 0.4em;
}
[data-theme=dark] .highlight table td {
  padding: 5px;
}
[data-theme=dark] .highlight, [data-theme=dark] .highlight .w {
  color: #d8d8d8;
  background-color: #2a3740;
  margin: 1rem 0rem;
}
[data-theme=dark] .highlight .c, [data-theme=dark] .highlight .ch, [data-theme=dark] .highlight .cd, [data-theme=dark] .highlight .cm, [data-theme=dark] .highlight .cpf, [data-theme=dark] .highlight .c1, [data-theme=dark] .highlight .cs {
  color: #69948F;
}
[data-theme=dark] .highlight .cp {
  color: #f7ca88;
}
[data-theme=dark] .highlight .nt {
  color: #f7ca88;
}
[data-theme=dark] .highlight .o, [data-theme=dark] .highlight .ow {
  color: #d8d8d8;
}
[data-theme=dark] .highlight .p, [data-theme=dark] .highlight .pi {
  color: #d8d8d8;
}
[data-theme=dark] .highlight .gi {
  color: #a1b56c;
}
[data-theme=dark] .highlight .gd {
  color: #ab4642;
}
[data-theme=dark] .highlight .gh {
  color: #7cafc2;
  background-color: #181818;
  font-weight: bold;
}
[data-theme=dark] .highlight .ge {
  font-style: italic;
}
[data-theme=dark] .highlight .ges {
  font-weight: bold;
  font-style: italic;
}
[data-theme=dark] .highlight .gs {
  font-weight: bold;
}
[data-theme=dark] .highlight .k, [data-theme=dark] .highlight .kn, [data-theme=dark] .highlight .kp, [data-theme=dark] .highlight .kr, [data-theme=dark] .highlight .kv {
  color: #ba8baf;
}
[data-theme=dark] .highlight .kc {
  color: #dc9656;
}
[data-theme=dark] .highlight .kt {
  color: #dc9656;
}
[data-theme=dark] .highlight .kd {
  color: #dc9656;
}
[data-theme=dark] .highlight .s, [data-theme=dark] .highlight .sb, [data-theme=dark] .highlight .sc, [data-theme=dark] .highlight .dl, [data-theme=dark] .highlight .sd, [data-theme=dark] .highlight .s2, [data-theme=dark] .highlight .sh, [data-theme=dark] .highlight .sx, [data-theme=dark] .highlight .s1 {
  color: #a1f56c;
}
[data-theme=dark] .highlight .sa {
  color: #ba8baf;
}
[data-theme=dark] .highlight .sr {
  color: #86c1b9;
}
[data-theme=dark] .highlight .si {
  color: #f16946;
}
[data-theme=dark] .highlight .se {
  color: #f16946;
}
[data-theme=dark] .highlight .nn {
  color: #f7ca88;
}
[data-theme=dark] .highlight .nc {
  color: #f7ca88;
}
[data-theme=dark] .highlight .no {
  color: #f7ca88;
}
[data-theme=dark] .highlight .na {
  color: #7cafc2;
}
[data-theme=dark] .highlight .m, [data-theme=dark] .highlight .mb, [data-theme=dark] .highlight .mf, [data-theme=dark] .highlight .mh, [data-theme=dark] .highlight .mi, [data-theme=dark] .highlight .il, [data-theme=dark] .highlight .mo, [data-theme=dark] .highlight .mx {
  color: #a1b56c;
}
[data-theme=dark] .highlight .ss {
  color: #a1b56c;
}

/*# sourceMappingURL=styles.css.map */