:root{--dark-grey:oklch(0.1763 0.014 258.36);--hover-grey:oklch(0.2350 0.014 258.36);--light-grey:oklch(0.2212 0.015 261.62);--date-grey:oklch(0.5122 0.0141 259.82);--separator:oklch(0.3151 0.0107 248.51);--white:#fff;--light-blue:oklch(0.5629 0.1933 256.16);--light-blue-darkened:oklch(0.4629 0.1933 256.16);--warning-yellow:oklch(0.5629 0.1179 103.12);--warning-yellow-darkened:oklch(0.4629 0.1179 103.12);--todo-green:oklch(0.5629 0.1183 150.12);--todo-green-darkened:oklch(0.4629 0.1183 150.12);--padding:2rem;--rounding:24px;--codeblock-bg:#1a1b26}body{color:var(--white);background-color:var(--dark-grey);font-family:sans-serif;line-height:1.5;padding:var(--padding);margin:0}.topbar{display:flex;flex-direction:column;align-items:center;justify-content:center;padding-bottom:var(--padding);gap:1rem;& .logo-link { cursor: pointer; & img { height: 48px; } } & .lang-switch { & a { box-sizing: border-box; color: var(--light-blue); font-family: Inter; transition: color 0.1s; padding: 0.25rem 0.75rem; transition: color 0.1s, background-color 0.1s; border: 1px solid var(--light-blue); } & a:first-of-type { border-top-left-radius: var(--rounding); border-bottom-left-radius: var(--rounding); } & a:last-of-type { border-top-right-radius: var(--rounding); border-bottom-right-radius: var(--rounding); } & a.active { color: var(--white); font-weight: 600; background-color: var(--light-blue); } & a:hover { color: var(--light-blue-darkened); } }}.feed{container-name:feed;container-type:inline-size;box-sizing:border-box;max-width:1200px;margin:0 auto;width:100%;display:flex;flex-direction:column;gap:1rem;& .featured-feed { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: 1fr; gap: var(--padding); & .featured-post { grid-column: span 1; min-height: 480px; position: relative; transition: transform 0.3s; & img.featured-image { width: 100%; height: 100%; object-fit: cover; border-radius: var(--rounding); z-index: 0; display: block; transition: zoom 0.3s; } & .featured-image:hover { zoom: 1.08; } & a.overlay-link { position: absolute; inset: 0; z-index: 1; cursor: pointer; background: linear-gradient(to bottom, rgba(0,0,0,0.2) 0%, transparent 40%, rgba(0,0,0,0.8) 100%); display: flex; align-items: flex-end; color: var(--white); border-radius: var(--rounding); & .title { margin: 0; padding: var(--padding); font-size: 2rem; font-weight: bold; font-family: Inter; font-weight: 600; text-align: center; } } & .categories { position: absolute; top: var(--padding); left: var(--padding); z-index: 2; display: flex; gap: 0.5rem; flex-wrap: wrap; & .category-label { background-color: rgba(255,255,255,0.2); padding: 0.25rem 0.75rem; border-radius: calc(var(--rounding)*2); font-size: 1rem; color: var(--white); font-family: Inter; transition: background-color 0.1s; } & .category-label:hover { background-color: rgba(255,255,255,0.4); } } } } & .featured-post:first-of-type { grid-column: 1 / span 2; } & .featured-post:hover { transform: scale(1.01); } & .taxonomy-title { text-align: center; color: var(--white); font-family: Inter; font-size: 2.5rem; & .taxonomy-title-value { color: var(--light-blue); font-weight: 900; } } & .term-title { text-align: center; color: var(--white); font-family: Inter; font-size: 2rem; margin-bottom: var(--padding); } & .term-list { display: flex; list-style-type: none; justify-content: space-between; gap: var(--padding); flex-wrap: wrap; & .term-item { display: inline-flex; align-items: center; & .term-link { color: var(--light-blue); font-size: 1.25rem; font-family: Inter; transition: color 0.1s; } & .term-link:hover { color: var(--light-blue-darkened); } & .term-count { background-color: var(--date-grey); color: var(--white); font-size: 0.875rem; margin-left: 0.25rem; padding: calc(0.25*var(--padding)) calc(0.5*var(--padding)); border-radius: calc(var(--rounding)*2); font-weight: 600; } } }}@container feed (width < 800px){.feed {
    & .featured-feed {
      grid-template-columns: 1fr;
      grid-template-rows: repeat(2, 1fr);

      & .featured-post:first-of-type {
        grid-column: auto;
      }

    }

    & .term-list {
      flex-direction: column;
      align-items: center;
    } 
  }
}@container feed (width < 400px){.featured-feed {
    & .featured-post {
      & .categories {
        flex-direction: column;
      }
    }
  }
}.post-feed{display:flex;flex-direction:column;gap:3px;container:post-list/inline-size;& .post-item { background-color: var(--light-grey); display: flex; justify-content: space-between; padding: var(--padding); min-height: 80px; overflow: hidden; transition: background-color 0.3s; & .post-meta { align-self: center; & .title { color: var(--white); font-size: 2rem; font-weight: 600; margin-bottom: 0.35rem; } & .date { color: var(--date-grey); font-size: 0.875rem; } & .separator { color: var(--date-grey); margin: 0 0.5rem; } & .category { color: var(--light-blue); font-size: 0.875rem; } } & span.arrow { color: var(--light-blue); align-self: center; } } & .post-item:first-of-type { margin-top: var(--padding); border-top-left-radius: var(--rounding); border-top-right-radius: var(--rounding); } & .post-item:last-of-type { margin-bottom: var(--padding); border-bottom-left-radius: var(--rounding); border-bottom-right-radius: var(--rounding); } & .post-item:hover { background-color: var(--hover-grey); }}.single-post{max-width:1000px;margin:0 auto;color:var(--white);& .post-header { position: relative; & .post-image { width: 100%; height: 600px; object-fit: cover; border-radius: var(--rounding); z-index: 0; display: block; } & .post-overlay { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,0.2) 0%, transparent 40%, rgba(0,0,0,0.8) 100%); display: flex; flex-direction: column; justify-content: flex-end; border-radius: var(--rounding); z-index: 1; padding: var(--padding); overflow: hidden; & .post-categories { align-self: center; display: flex; gap: var(--padding); flex-wrap: wrap; & .category { background-color: rgba(255,255,255,0.2); padding: 0.25rem 0.75rem; border-radius: calc(var(--rounding)*2); font-size: 1rem; color: var(--white); font-family: Inter; transition: background-color 0.1s; } & .category:hover { background-color: rgba(255,255,255,0.4); } } & .post-title { font-size: 3rem; font-family: Inter; font-weight: 600; margin: 0; text-align: center } } } & .post-meta { box-sizing: border-box; max-width: 800px; color: var(--white); text-align: center; margin-left: auto; margin-right: auto; padding: var(--padding); border-bottom: 1px solid var(--separator); display: flex; justify-content: center; gap: 0.5rem; flex-direction: column; & .translations { & .translation-link { color: var(--white); font-family: Inter; transition: color 0.1s; padding: 0.25rem 0.75rem; background-color: var(--light-blue); border-radius: var(--rounding); } } } & .post-content { text-align: justify; max-width: 800px; margin: 0 auto; }}blockquote{box-sizing:border-box;border-left:4px solid var(--light-blue);padding-left:var(--padding);padding-right:var(--padding);padding-top:calc(var(--padding)*.3);padding-bottom:calc(var(--padding)*.3);margin:.3rem 0;color:var(--white);font-style:italic;background-color:var(--light-grey)}pre{background-color:var(--codeblock-bg);color:#f5f5f5;padding:1rem;overflow-x:auto;font-family:fira code,monospace;font-size:.95rem}header{border-bottom:1px solid #222;margin-bottom:1rem}a{text-decoration:none}p img{max-width:100%;height:auto;border-radius:var(--rounding);margin:0}p a{color:var(--light-blue);transition:color .1s}p a:hover{color:var(--light-blue-darkened)}.admonition{box-sizing:border-box;margin:var(--padding)0;border-radius:var(--rounding);& .admonition-header { font-weight: bold; padding: calc(0.5*var(--padding)); } & .admonition-content { padding: calc(0.5*var(--padding)); }}.admonition[type=note]{border-color:var(--light-blue);& .admonition-header { color: var(--white); background-color: var(--light-blue); } & .admonition-content { color: var(--white); background-color: var(--light-blue-darkened); }}.admonition[type*=warn]{border-color:var(--warning-yellow);color:var(--white);& .admonition-header { background-color: var(--warning-yellow); } & .admonition-content { background-color: var(--warning-yellow-darkened); }}.admonition[type=todo]{border-color:var(--todo-green);color:var(--white);& .admonition-header { background-color: var(--todo-green); } & .admonition-content { background-color: var(--todo-green-darkened); }}#back-to-top{content-visibility:auto;contain-intrinsic-size:auto 500px;position:fixed;bottom:3rem;right:1rem;color:var(--white);width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:2rem;cursor:pointer;z-index:10;& img { height: 36px; }}footer{box-sizing:border-box;border-top:1px solid var(--separator);max-width:800px;margin-left:auto;margin-right:auto;text-align:center;padding:var(--padding);display:flex;flex-direction:column;gap:1rem;& .footer-text { color: var(--white); font-family: Inter; text-align: center; } & .bottom-menu { display: flex; flex-direction: row; justify-content: center; gap: var(--padding); & .bottom-menu-item { color: var(--light-blue); font-family: Inter; transition: color 0.1s; } & .bottom-menu-item:hover { color: var(--light-blue-darkened); } }}