/* yzedeka — one theme for the whole site */
/* fonts are declared in assets/fonts.css (self-hosted) */

:root {
  --bg: #000000;
  --panel: #0d0d0d;
  --line: #242424;
  --ink: #e6e6e6;
  --dim: #8a8a8a;
  --green: #53bd22;
  --green-link: #53bd22;
  --purple: #AF5FD9;
  --teal: #6fd0c0;
  --yellow: #ffff00;
  --font: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
  --font-pixel: "Minecraft", "MinecraftTen", "JetBrains Mono", monospace;
}

/* fluid root size so big monitors / zoom stay comfortable */
html {
  font-size: clamp(15px, 0.5vw + 11px, 22px);
  scroll-behavior: smooth;
  background: var(--bg);
  color-scheme: dark;
}

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

body {
  min-height: 100vh;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.6;
  text-align: center;
  padding: 2.8rem 1rem 2.4rem;
}

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

/* bold things use the pixel font */
b, strong, h1, h2, h3, h4,
.name, .section-title, .heading, .entry-title, .brick .title,
.coin .tag, .entry-files h3 {
  font-family: var(--font-pixel);
  font-weight: 400;
  letter-spacing: 0;
}

/* gradient / coloured inline text (from <#hex>..</#hex> tags) */
.grad { background-clip: text; -webkit-background-clip: text; color: transparent; }

.page { max-width: 45rem; margin: 0 auto; }
.page-wide { max-width: 64rem; }

/* ------------------------------ header ------------------------------ */
.site-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;
  margin-bottom: 1.4rem;
}

.brand { display: inline-flex; align-items: center; gap: 0.7rem; text-decoration: none; }
.brand:hover { text-decoration: none; }
.brand .logo {
  width: 2.6rem;
  height: 2.6rem;
  object-fit: cover;
  background: var(--panel);
  border: 1px solid var(--line);
  flex: none;
}

.name { font-size: 2.2rem; line-height: 1.05; color: var(--green); }
.name .hl { color: #bfe6a4; }

.rule { border: 0; border-top: 1px solid var(--line); width: min(36rem, 92%); margin: 1.4rem auto; }

/* ------------------------------- menu ------------------------------- */
.menu { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.3rem 1.3rem; font-size: 1.2rem; }
.menu a { color: var(--purple); text-decoration: none; }
.menu a:hover { color: #d9a9f2; }
.menu a.selected { color: var(--green); }

/* ------------------------------ intro ------------------------------- */
.intro { max-width: 38rem; margin: 1.5rem auto 1.6rem; font-size: 1.1rem; line-height: 1.9; }
.intro p { margin: 0 0 0.1rem; }
.intro .lead { color: #a8dd8a; font-size: 1.25rem; }

/* --------------------------- link lists ----------------------------- */
.links { list-style: none; font-size: 1.15rem; line-height: 2.1; margin: 0.8rem 0 1.9rem; }
.links li { word-wrap: break-word; }
.links .ico { display: inline-block; width: 1.7rem; }
.links img.ico { height: 1.15rem; width: auto; vertical-align: -0.2em; }

.section-title { font-size: 1.25rem; margin: 0.4rem 0; }
.section-title a { color: #ffffff; }

/* ------------------------------ crypto ------------------------------ */
.support-note { max-width: 36rem; margin: 0 auto 0.5rem; color: #cfcfcf; font-size: 1rem; }
.crypto { max-width: 36rem; margin: 1.6rem auto 0.5rem; text-align: left; }

.coin { display: flex; align-items: center; gap: 0.8rem; border-top: 1px solid var(--line); padding: 0.85rem 0.1rem; }
.coin:last-child { border-bottom: 1px solid var(--line); }

.coin .tag { flex: none; width: 3rem; color: var(--yellow); font-size: 0.95rem; }
.coin code { flex: 1; font-family: var(--font); font-size: 0.82rem; color: #cfd8cf; word-break: break-all; }

.coin .copy {
  flex: none;
  background: none;
  border: 0;
  color: var(--green-link);
  cursor: pointer;
  font-size: 1.15rem;
  line-height: 1;
  padding: 0.2rem 0.4rem;
}
.coin .copy:hover { color: var(--green); }
.coin.copied .copy { color: var(--green); }

/* ---------------------------- archive ------------------------------- */
.archive { text-align: left; }
.archive .menu { text-align: center; }

.loading { color: var(--dim); }
.month-section { margin-bottom: 1.9rem; }

.heading {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  font-size: 0.85rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #53bd22;
  margin-bottom: 0.9rem;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--line);
  scroll-margin-top: 1rem;
}
.heading .count { color: var(--dim); letter-spacing: 0; font-size: 0.75rem; }

.bricks { display: flex; flex-wrap: wrap; gap: 0.4rem; }

.brick {
  position: relative;
  display: block;
  width: 7.8rem;
  height: 7.8rem;
  overflow: hidden;
  background: var(--panel);
  border: 1px solid var(--line);
  color: #b9c2b9;
}
.brick:hover { border-color: #53bd22; text-decoration: none; }

.brick.photo { background-color: var(--c, #3a5a52); border-color: #1a1a1a; }
.brick.photo.has-image { background-size: cover; background-position: center; }

.brick .title { font-size: 0.72rem; line-height: 1.1; margin: 0.5rem 0.5rem -0.2rem; color: #d3dad3; }
.brick .excerpt { margin: 0.5rem 0.55rem 0; font-size: 0.62rem; line-height: 1.15; color: var(--dim); max-height: 5rem; overflow: hidden; }

.brick .overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
  text-align: center;
  background: rgba(0, 0, 0, 0.85);
  opacity: 0;
  transition: opacity 0.1s linear;
}
.brick:hover .overlay { opacity: 1; }
.brick .overlay .date { color: var(--green); font-size: 0.78rem; }
.brick .overlay .notes { color: #9fb8c9; font-size: 0.68rem; }

.brick.hidden { display: none; }

/* ------------------------- single post page -------------------------- */
.entry { text-align: left; max-width: 42rem; margin: 0 auto; }
.entry-title { font-size: 1.75rem; line-height: 1.25; color: #ffffff; margin: 0 0 0.2rem; }
.entry-title.empty { color: var(--dim); font-style: italic; }

.entry-meta { color: var(--dim); font-size: 0.82rem; margin-top: 0.4rem; font-family: var(--font); }

.entry-body { margin-top: 1.4rem; color: #d6dcd6; font-size: 1.02rem; line-height: 1.8; }
.entry-body p { margin: 0 0 1em; }

.entry-image {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 30rem;
  margin: 1.2rem auto;
  border: 1px solid var(--line);
  background: var(--panel);
  cursor: zoom-in;
}

/* ------------------ youtube embed card (discord style) ---------------- */
.yt-embed {
  max-width: 34rem;
  margin: 1.2rem 0;
  padding: 0.8rem 0.95rem;
  background: #0d0d0d;
  border-radius: 4px;
  text-align: left;
}
.yt-head { margin-bottom: 0.6rem; }
.yt-provider {
  display: block;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #8a8a8a;
}
.yt-link {
  display: block;
  font-weight: 700;
  font-size: 0.98rem;
  line-height: 1.3;
  color: var(--green-link);
  margin: 0.15rem 0;
}
.yt-cover {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: #000;
  cursor: pointer;
  line-height: 0;
  overflow: hidden;
}
.yt-thumb { display: block; width: 100%; height: auto; }
.yt-play {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 4rem;
  height: 2.8rem;
  margin: -1.4rem 0 0 -2rem;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 0.4rem;
}
.yt-play::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-40%, -50%);
  border-style: solid;
  border-width: 0.7rem 0 0.7rem 1.1rem;
  border-color: transparent transparent transparent #ffffff;
}
.yt-cover:hover .yt-play { background: rgba(0, 0, 0, 0.82); }
.yt-frame { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 3px; background: #000; }

/* --------------------------- image lightbox --------------------------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.94);
  overflow: hidden;
}
.lightbox[hidden] { display: none; }
.lightbox-img {
  max-width: 92vw;
  max-height: 92vh;
  transform-origin: center center;
  cursor: grab;
  user-select: none;
  -webkit-user-drag: none;
}
.lightbox-img:active { cursor: grabbing; }
.lightbox-close {
  position: absolute;
  top: 0.6rem;
  right: 1rem;
  background: transparent;
  border: 0;
  color: #ffffff;
  font-size: 2.2rem;
  line-height: 1;
  cursor: pointer;
}
.lightbox-close:hover { color: var(--green); }

.entry-files { margin-top: 1.6rem; }
.entry-files h3 { font-size: 0.95rem; color: var(--dim); margin-bottom: 0.5rem; letter-spacing: 0.1em; text-transform: uppercase; }
.entry-files a { display: block; color: var(--green-link); padding: 0.4rem 0; border-bottom: 1px solid var(--line); }
.entry-files a i { color: var(--dim); margin-right: 0.5rem; }

.entry-tags { margin-top: 1.2rem; font-size: 0.82rem; }
.entry-tags a { color: var(--green-link); margin-right: 0.7rem; }

/* markdown */
.md h1, .md h2, .md h3 { margin: 1.3em 0 0.5em; color: #fff; line-height: 1.3; }
.md h1 { font-size: 1.4rem; }
.md h2 { font-size: 1.2rem; }
.md h3 { font-size: 1.05rem; }
.md ul, .md ol { margin: 0 0 1em 1.5em; }
.md li { margin: 0.25em 0; }
.md blockquote { border-left: 2px solid var(--line); padding-left: 1em; color: var(--dim); margin: 0 0 1em; }
.md code { background: #111; border: 1px solid var(--line); padding: 0.08em 0.35em; font-size: 0.85em; }
.md pre { background: #0b0b0b; border: 1px solid var(--line); padding: 1em; overflow: auto; margin: 0 0 1em; }
.md pre code { background: none; border: 0; padding: 0; }
.md a { color: var(--green-link); }
.md img { max-width: 100%; border: 1px solid var(--line); margin: 0.5em 0; }
.md hr { border: 0; border-top: 1px solid var(--line); margin: 1.4em 0; }

.entry-nav { display: flex; justify-content: space-between; gap: 1rem; max-width: 42rem; margin: 2.2rem auto 0; font-size: 0.95rem; }
.entry-nav .none { color: #4d4d4d; }
.entry-nav .older { text-align: right; }

.notfound { color: var(--dim); margin-top: 1.5rem; }

/* ------------------------------ footer ------------------------------ */
.footer { color: #5f5f5f; font-size: 0.88rem; margin-top: 2rem; text-align: center; }
.footer a { color: #6f6f6f; }
.footer a:hover { color: var(--green-link); }
.footer .donate { display: inline-block; color: #ffffff; font-family: var(--font-pixel); margin-bottom: 0.5rem; }
.footer .dot { margin: 0 0.5rem; opacity: 0.6; }

/* ---------------------------- projects ------------------------------ */
.projects { text-align: center; }

.project { margin: 0 0 2.6rem; }
.project:last-child { margin-bottom: 0.6rem; }

.project-title { font-size: 1.5rem; line-height: 1.2; margin: 0 0 0.8rem; }
.project-title a { color: var(--green-link); }

.project-images { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 0 0 1rem; }
.project-images img {
  max-width: 100%;
  max-height: 5.5rem;
  width: auto;
  border: 0;
  background: none;
  cursor: zoom-in;
}

.project-body { max-width: 40rem; margin: 0 auto; text-align: center; color: #d6dcd6; font-size: 1.02rem; line-height: 1.8; }
.project-body p { margin: 0 0 1em; }

@media (max-width: 560px) {
  body { padding: 1.6rem 0.9rem 1.6rem; }
  .name { font-size: 1.8rem; }
  .brand .logo { width: 2.1rem; height: 2.1rem; }
  .menu { font-size: 1.05rem; gap: 0.25rem 0.9rem; }
  .rule { margin: 1rem auto; }
  .entry-title { font-size: 1.4rem; }
}