@font-face{font-family:nunito;font-style:italic;font-weight:200 1000;font-display:swap;src:url(/fonts/Nunito-cyrillic-italic.woff2)format("woff2");unicode-range:U+301,U+400-45F,U+490-491,U+4B0-4B1,U+2116}@font-face{font-family:nunito;font-style:italic;font-weight:200 1000;font-display:swap;src:url(/fonts/Nunito-latin-ext-italic.woff2)format("woff2");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:nunito;font-style:italic;font-weight:200 1000;font-display:swap;src:url(/fonts/Nunito-latin-italic.woff2)format("woff2");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:nunito;font-style:normal;font-weight:200 1000;font-display:swap;src:url(/fonts/Nunito-cyrillic.woff2)format("woff2");unicode-range:U+301,U+400-45F,U+490-491,U+4B0-4B1,U+2116}@font-face{font-family:nunito;font-style:normal;font-weight:200 1000;font-display:swap;src:url(/fonts/Nunito-latin-ext.woff2)format("woff2");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:nunito;font-style:normal;font-weight:200 1000;font-display:swap;src:url(/fonts/Nunito-latin.woff2)format("woff2");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:sen;font-style:normal;font-weight:400 800;font-display:swap;src:url(/fonts/Sen-latin-ext.woff2)format("woff2");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:sen;font-style:normal;font-weight:400 800;font-display:swap;src:url(/fonts/Sen-latin.woff2)format("woff2");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:fira code;font-style:normal;font-weight:300 700;font-display:swap;src:url(/fonts/Fira_Code.woff2)format("woff2");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}:root{--color-background:#121212;--color-footer:#eeeeee;--color-text:white;--color-text-secondary:#c0c0c0;--color-accent:#8fdfd4;--color-accent-medium:#8dd4cc;--color-accent-light:#9ce3d9;--color-accent-dark:#7db8b0;--color-h1:#a8e4dd;--color-link:var(--color-accent-light);--color-link-hover:white;--color-article-bg:rgba(30, 30, 30);--color-article-border:rgba(255, 255, 255, 0.1);--color-article-border-light:rgba(255, 255, 255, 0.05);--color-table-header-bg:rgba(20, 20, 20, 0.8);--color-table-bg:rgb(31, 31, 31);--color-table-bg-zebra:rgb(29, 29, 29);--color-table-row-hover:rgba(50, 50, 50, 0.5);--color-snippet-bg:#1f1f1f;--color-code-bg:#1f1f1f;--color-accent-transparent-10:rgba(143, 223, 212, 0.1);--color-accent-transparent-15:rgba(143, 223, 212, 0.15);--color-accent-transparent-20:rgba(143, 223, 212, 0.2);--color-button-text:#111;--color-chat-sender-bg:#3a3a3a;--color-chat-recipient-bg:#124161;--color-focus-outline:var(--color-accent-light);--color-gradient-mint:linear-gradient(135deg, var(--color-accent), var(--color-text));--color-gradient-mint-inverse:linear-gradient(135deg, var(--color-text), var(--color-accent));--font-primary:"Nunito", sans-serif;--font-secondary:"Sen", sans-serif;--font-monospace:"Fira Code", monospace;--font-weight-light:400;--font-weight-code:400;--font-weight-normal:400;--font-weight-bold:600;--font-size-base:1.07rem;--font-size-sm:0.9rem;--font-size-md:1rem;--font-size-h1:clamp(1rem, 7vw, 3rem);--font-size-h2:1.6rem;--font-size-h3:1.4rem;--font-size-h4:1.2rem;--spacing-xs:0.5rem;--spacing-sm:0.75rem;--spacing-md:1rem;--spacing-lg:1.5rem;--spacing-xl:2rem;--main-margin-top:5rem;--main-margin-top-mobile:3.5rem;--main-width:100vw;--main-width-mobile:98vw;--frontmatter-margin-left:var(--spacing-sm);--article-margin-top:clamp(1rem, 4vw, 1.875rem);--chat-padding-y:0.625rem;--chat-padding-x:1rem;--chat-margin-bottom:0.2rem;--radius-sm:4px;--radius-md:8px;--radius-lg:12px;--radius-xl:16px;--radius-round:18px;--border-standard:1px solid var(--color-article-border);--border-light:1px solid var(--color-article-border-light);--border-accent:3px solid var(--color-accent);--shadow-color-dark:rgba(0, 0, 0, 0.2);--shadow-color-accent:rgba(143, 223, 212, 0.3);--shadow-color-accent-hover:rgba(143, 223, 212, 0.4);--shadow-article:0 8px 32px var(--shadow-color-dark);--shadow-button:0 4px 12px var(--shadow-color-accent);--shadow-button-hover:0 8px 20px var(--shadow-color-accent-hover);--shadow-table:var(--shadow-article);--shadow-table-hover:0 12px 40px var(--color-accent-transparent-20);--shadow-chat:0 1px 2px var(--shadow-color-dark);--transition-duration:0.3s;--transition-duration-fast:0.2s;--transition-timing:ease;--transition-default:all var(--transition-duration-fast) var(--transition-timing);--transition-transform-shadow:transform var(--transition-duration) var(--transition-timing), box-shadow var(--transition-duration) var(--transition-timing);--transition-transform:transform var(--transition-duration) var(--transition-timing);--transition-background:background-color var(--transition-duration-fast) var(--transition-timing);--media-width:clamp(300px, 60vw, 1000px);--max-media-height:1200px;--max-media-width-big:clamp(70vw, 80vw, 800px);--max-media-height-big:70vh;--max-media-width-small:clamp(25vw, 30vw, 250px);--max-media-height-small:30vh;@media(max-width:768px){--media-width: 100%;}--body-bg-gradient:radial-gradient(circle at 10% 10%, rgba(143, 223, 212, 0.15), transparent 40%), radial-gradient( circle at 90% 80%, rgba(143, 223, 212, 0.12), transparent 50%), var(--color-background);--child-animation-delay:0s}.lightmode{--color-background:#fefefe;--color-footer:black;--color-text:#121212;--color-text-secondary:#505050;--color-accent:#00afaf;--color-accent-medium:#008888;--color-accent-light:#009999;--color-accent-dark:#007070;--color-link:var(--color-accent-dark);--color-link-hover:black;--color-article-bg:rgba(255, 255, 255, 0.7);--color-article-border:rgba(0, 0, 0, 0.1);--color-article-border-light:rgba(0, 0, 0, 0.05);--color-table-header-bg:rgba(235, 235, 235, 0.8);--color-table-bg:rgb(250, 250, 250);--color-table-bg-zebra:rgb(245, 245, 245);--color-table-row-hover:rgba(220, 220, 220, 0.5);--color-snippet-bg:#f5f5f5;--color-accent-transparent-10:rgba(0, 128, 128, 0.1);--color-accent-transparent-15:rgba(0, 128, 128, 0.15);--color-accent-transparent-20:rgba(0, 128, 128, 0.2);--color-button-text:#fff;--color-chat-sender-bg:#e5e5ea;--color-chat-recipient-bg:#0b93f6;--color-focus-outline:var(--color-accent-dark);--body-bg-gradient:radial-gradient(circle at 10% 10%, rgba(0, 128, 128, 0.15), transparent 40%), radial-gradient(circle at 90% 80%, rgba(0, 128, 128, 0.12), transparent 50%), var(--color-background);--color-gradient-mint:linear-gradient(135deg, var(--color-accent), var(--color-text));--color-gradient-mint-inverse:linear-gradient(135deg, var(--color-text), var(--color-accent))}html{font-size:100%;scroll-behavior:smooth;@media(pointer:fine){overscroll-behavior: none;}}body{background:var(--body-bg-gradient);line-height:1.4;font-family:var(--font-primary);color:var(--color-text);margin:0;font-size:var(--font-size-base);overflow-wrap:break-word;&.background-fixed { background-attachment: fixed; }}main{max-width:var(--main-width);box-sizing:border-box;margin:var(--main-margin-top)12vw 0;display:flex;flex-direction:column;padding:0;@media(max-width:768px){margin: var(--main-margin-top-mobile) auto 0; max-width: var(--main-width-mobile);}}p,li{font-weight:var(--font-weight-normal);word-break:normal}h1,h2,h3,h4{font-family:var(--font-secondary)}h1{width:fit-content;font-size:var(--font-size-h1);flex-shrink:1;overflow:hidden;text-overflow:ellipsis;margin:0 0 0 var(--frontmatter-margin-left);font-weight:var(--font-weight-bold);color:var(--color-h1);@-moz-document url-prefix(){background: var(--color-gradient-mint); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent;}&.animated { animation: slideInFromLeft 0.5s 0.1s var(--transition-timing) both; }}h2{font-size:var(--font-size-h2)}h3{font-size:var(--font-size-h3)}h4{font-size:var(--font-size-h4)}article{margin:var(--article-margin-top)0 0;width:100%;max-width:100%;box-sizing:border-box;padding:var(--spacing-md)var(--spacing-lg);background:var(--color-article-bg);border-radius:var(--radius-xl);box-shadow:var(--shadow-article);border:var(--border-standard);transform:translateY(0);transition:var(--transition-transform-shadow);overflow-x:hidden;& > :first-child { @media (max-width: 768px) { margin-top: 6px; } } &.anchored { border-radius: var(--radius-xl) var(--radius-xl) 0 0; border-bottom: none; } @media (max-width: 768px) { padding: var(--spacing-sm); } &.animated { animation: articleSlideInFromBottom 0.8s var(--transition-timing) both; }}a{color:var(--color-link);text-decoration:none;transition:color var(--transition-duration-fast)var(--transition-timing);&:hover { color:var(--color-link-hover); text-decoration:underline; } &:focus-visible { outline:2px solid var(--color-focus-outline); text-decoration:none; }}figure{display:flex;flex-direction:column;align-items:center;justify-content:center;margin:0;text-align:center;font-style:italic;color:var(--color-text-secondary);figcaption { width: fit-content; }}img,video,iframe{height:auto;width:var(--media-width);border-radius:var(--radius-xl);border:var(--border-standard);&.media-tall { width: auto; height: var(--max-media-height); }}.noborder{border:none}.bigimage{max-width:var(--max-media-width-big);max-height:var(--max-media-height-big)}.smallimage{max-width:var(--max-media-width-small);max-height:var(--max-media-height-small)}pre{position:relative;font-family:var(--font-monospace);width:fit-content;white-space:pre;overflow-x:auto;display:block;line-height:1.4;background-color:var(--color-code-bg) !important;color:#fff;padding:18px;border-radius:var(--radius-xl);border:var(--border-standard);box-shadow:var(--shadow-table);transition:var(--transition-transform-shadow);&.scroll { width: auto; } &:hover { box-shadow: var(--shadow-table-hover); } & code { background-color: transparent; border: none; border-radius: 0; padding: 0; }}code{padding:.1em .3em;border:var(--border-standard);border-radius:var(--radius-md);background-color:var(--color-snippet-bg);font-family:var(--font-monospace);font-weight:var(--font-weight-code);font-size:1rem;white-space:pre;overflow-x:auto;&.language-ascii { display: block; text-align: left; font-size: clamp(0.1rem, 2vw, 0.5rem); font-family: var(--font-monospace); width: fit-content; margin-left: auto; margin-right: auto; @media (max-width: 1200px) { font-size: 0.8rem; width: auto; margin-left: 0; margin-right: 0; } }}blockquote{font-style:italic;position:relative;&::before { content:""; display:block; position:absolute; width:3px; height:100%; margin:0 -1em 0; background:var(--color-accent-dark); border-radius:2px; float:left; } &.centered-blockquote { font-style:normal; width:fit-content; margin-left:auto; margin-right:auto; font-size:1.15rem; &::before { display:none; } }}ul{list-style:disc inside;padding-left:var(--spacing-lg);& li { line-height: 1.6; transition: color var(--transition-duration-fast) var(--transition-timing); }}iframe{display:block;border:none;width:var(--media-width);height:500px;&.homepage { width: clamp(80%, 100%, 800px); height: clamp(30vh, 50vh, 400px); }}.mint{background:var(--color-gradient-mint);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}.nomint{background:0 0;background-clip:none;-webkit-background-clip:none;-webkit-text-fill-color:var(--color-text)}.staggered{&:nth-child(1) {--child-animation-delay:0.05s;} &:nth-child(2) {--child-animation-delay:0.10s;} &:nth-child(3) {--child-animation-delay:0.15s;} &:nth-child(4) {--child-animation-delay:0.20s;} &:nth-child(5) {--child-animation-delay:0.25s;} &:nth-child(6) {--child-animation-delay:0.30s;} &:nth-child(7) {--child-animation-delay:0.35s;} &:nth-child(8) {--child-animation-delay:0.40s;} &:nth-child(9) {--child-animation-delay:0.45s;} &:nth-child(10) {--child-animation-delay:0.50s;} &:nth-child(11) {--child-animation-delay:0.55s;} &:nth-child(12) {--child-animation-delay:0.60s;} &:nth-child(13) {--child-animation-delay:0.65s;} &:nth-child(14) {--child-animation-delay:0.70s;} &:nth-child(15) {--child-animation-delay:0.75s;} &:nth-child(16) {--child-animation-delay:0.80s;} &:nth-child(17) {--child-animation-delay:0.85s;} &:nth-child(18) {--child-animation-delay:0.90s;} &:nth-child(19) {--child-animation-delay:0.95s;} &:nth-child(20) {--child-animation-delay:1.00s;}}@keyframes fadeIn{from{opacity:0}to{opacity:1}}@keyframes slideInFromTop{from{opacity:0;transform:translateY(-100px)}to{opacity:1;transform:translateY(0)}}@keyframes articleSlideInFromBottom{from{opacity:0;transform:translateY(32px)}to{opacity:1;transform:translateY(0)}}@keyframes slideInFromLeft{from{opacity:0;transform:translateX(-40px)}to{opacity:1;transform:translateX(0)}}@keyframes postLinkAnim{from{opacity:0}to{opacity:1;transform:translate(0)}}@keyframes postTagSlideIn{to{opacity:1;transform:translateX(0)}}@keyframes randomBtnSlideInFromLeft{from{opacity:0;transform:translateX(-60px)}to{opacity:1;transform:translateX(0)}}@keyframes flyInFromTop{from{transform:translateX(-50%)translateY(-20px)translate3d(0,0,0)}to{transform:translateX(-50%)translateY(0)translate3d(0,0,0)}}@keyframes flyInFromLeft{to{transform:translateX(0);opacity:1}}@keyframes flyInFromRight{to{transform:translateX(0);opacity:1}}@media(prefers-reduced-motion:reduce){.animated,h1.animated,article.animated,.frontmatter .info time.animated,.post-tags .post-tag.animated,.random-blog-btn-container.animated{animation:none !important;opacity:1 !important;transform:none !important}header .title,header nav a{animation:none !important;opacity:1 !important;transform:none !important}header{animation:none !important;transform:translateX(-50%)translateY(0)translate3d(0,0,0) !important}table:hover{box-shadow:var(--shadow-table) !important}.post-link:hover{transform:none}}.chat{display:block;width:100%;margin-top:var(--spacing-lg);& p { clear: both; padding: var(--chat-padding-y) var(--chat-padding-x); box-shadow: var(--shadow-chat); margin-top: 0; margin-bottom: var(--chat-margin-bottom); max-width: 80%; word-wrap: break-word; line-height: 1.5; position: relative; &.a { float: left; background-color: var(--color-chat-sender-bg); border-radius: var(--radius-round) var(--radius-round) var(--radius-round) var(--radius-sm); margin-right: auto; margin-left: 0; } &.b { float: right; background-color: var(--color-chat-recipient-bg); border-radius: var(--radius-round) var(--radius-round) var(--radius-sm) var(--radius-round); margin-left: auto; margin-right: 0; } } & img { max-height: none; height: auto; margin-top: var(--spacing-xs); border-radius: var(--radius-md); display: block; box-shadow: none; border: none; } &::after { content: ""; display: table; clear: both; }}.external-link-row{margin:0;display:flex;flex-wrap:wrap;flex-direction:row;justify-content:center;gap:20px;align-self:center;a.external-link { padding: 1.2em; background: linear-gradient( 135deg, var(--color-accent-light), var(--color-accent) ); color: var(--color-button-text); font-weight: var(--font-weight-semibold); text-decoration: none; border-radius: var(--radius-xl); font-size: var(--font-size-md); display: inline-flex; gap: var(--spacing-sm); box-shadow: var(--shadow-button); position: relative; overflow: hidden; transition: transform 0.3s ease, box-shadow 0.3s ease, color 0.3s ease; animation: slideInFromLeft 0.5s 0.4s var(--transition-timing) both; &::after { content: ""; position: absolute; top: 0; left: 0; width: 50%; height: 100%; background: linear-gradient( to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0) 100% ); transform: translateX(-100%) skewX(-20deg); transition: transform 0.5s ease; opacity: 0.8; } &:hover, &:focus { transform: translateY(-3px); box-shadow: var(--shadow-button-hover); color: var(--color-link-hover); &::after { transform: translateX(250%) skewX(-20deg); } & img { transform: rotate(10deg) scale(1.1); filter: invert(1) brightness(2); transition: transform 0.3s ease, filter 0.3s ease; border: none; } } &:focus-visible { outline: 2px solid var(--color-focus-outline); outline-offset: 3px; box-shadow: var(--shadow-button-hover); } & img { transition: var(--transition-transform), filter 0.3s ease; width: 1.5em; height: 1.5em; border-radius: 0; color: inherit; border: none; } }}footer{display:flex;justify-content:space-between;align-items:center;width:100%;background:rgba(255,255,255,.1);backdrop-filter:blur(10px);transform:translate3d(0,0,0);border-top:1px solid rgba(255,255,255,.18);box-shadow:0 4px 30px rgba(0,0,0,.1);border-radius:0;padding:10px 30px 5px;box-sizing:border-box;color:var(--color-text);z-index:9999;position:static;left:unset;bottom:unset;transition:position .2s;&.fixed-bottom { position: fixed; left: 0; bottom: 0; margin-top: 0; width: 100vw; max-width: 100vw; } & span { font-size: var(--font-size-base); & a { color: var(--color-text); } &.copyright { z-index: 4; font-style: italic; margin: auto; @media (min-width: 768px) { position: absolute; right: 30px; left: 30px; width: calc(100% - 60px); text-align: center; } } &.repo, &.contact { z-index: 5; @media (max-width: 768px) { display: none; } } }}.frontmatter{display:flex;flex-direction:column;margin:0 0 0 var(--frontmatter-margin-left);align-self:flex-start;& .title { margin-left: 0; max-width: clamp(300px, 80vw, 800px); } & .info { margin-bottom: var(--spacing-sm); font-family: var(--font-secondary); font-size: 1.2rem; font-style: italic; color: var(--color-accent-medium); &.animated { animation: slideInFromLeft 0.8s var(--transition-timing) both; @media (max-width: 768px) { animation: slideInFromLeft 0.5s 0.2s var(--transition-timing) both; } } & .separator { font-style: normal; } } & .post-tags { margin: 0; align-items: left; justify-content: left; & .post-tag { animation: slideInFromLeft 0.5s calc(var(--child-animation-delay) + 0.3s) var(--transition-timing) both !important; } } & .external-link-row { justify-content: left; align-self: start; margin-top: var(--spacing-md); & a.external-link { padding: 0.8em 1.2em; } }}header{position:fixed;top:20px;left:50%;transform:translateX(-50%)translate3d(0,0,0);width:100vw;max-width:1000px;padding:10px 15px;background:rgba(30,30,30,.2);border:var(--border-standard);border-radius:40px;backdrop-filter:blur(20px)saturate(.8);display:flex;align-items:center;justify-content:space-between;color:var(--color-text);box-sizing:border-box;z-index:1000;overflow:hidden;transition:backdrop-filter .3s;@media(max-width:768px){max-width: 100vw; border-radius: 0; top: 0;}@media(pointer:fine){&:hover{backdrop-filter:blur(5px)saturate(.8)}}& .title { font-weight: var(--font-weight-light) !important; display: inline-block; background: var(--color-gradient-mint); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-family: var(--font-secondary); font-size: clamp(1rem, 4vw, 2rem); flex-shrink: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; border: none; outline: none; text-decoration: none; &:focus-visible { outline: 2px solid var(--color-focus-outline, var(--color-accent)); outline-offset: 2px; } } & nav { display: flex; gap: 8px; flex-shrink: 0; @media (max-width: 768px) { gap: 4px; } & a { background: rgba(60, 60, 60, 0.1); color: var(--color-text); border: 2px solid rgba(255, 255, 255, 0.03); border-radius: 20px; padding: 6px 12px; font-family: var(--font-secondary); font-size: clamp(0.75rem, 3vw, 1rem); font-weight: var(--font-weight-light) !important; cursor: pointer; transition: background-color 0.2s ease, transform 0.2s ease; white-space: nowrap; text-decoration: none; &:hover { background-color: rgba(80, 80, 80, 0.7); transform: translateY(-1px) scale(1.02); text-decoration: none; } &:nth-child(1) { animation-delay: 0.1s; } &:nth-child(2) { animation-delay: 0.2s; } &:nth-child(3) { animation-delay: 0.3s; } &:nth-child(4) { animation-delay: 0.4s; } } }}.post-link{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.5rem;background:var(--color-table-bg);border-radius:12px;box-shadow:0 4px 15px rgba(0,0,0,.2);border:var(--border-standard);text-decoration:none;color:var(--color-text);transition:all .3s ease;width:100%;box-sizing:border-box;overflow:hidden;margin-bottom:1rem;cursor:pointer;&.animated { animation: postLinkAnim 1s calc(var(--child-animation-delay) * 2 + 0.05s) var(--transition-timing) both; @media (min-width: 768px) { transform: translateY(-10px); } @media (max-width: 768px) { &:nth-child(odd) { transform: translateX(50px); } &:nth-child(even) { transform: translateX(-50px); } } } &:hover, &:focus { text-decoration: none; background: var(--color-table-row-hover); border-color: rgba(143, 223, 212, 0.3); transform: translateY(-3px); box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3); & .title { color: var(--color-accent); } } & .content { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; } & .tags { display: flex; gap: 0.4em; flex-shrink: 0; margin-left: 1em; list-style: none; padding: 0; margin: 0; @media (max-width: 1000px) { display: none; } } & .tag { background: rgba(143, 223, 212, 0.15); color: var(--color-accent); font-family: var(--font-primary); font-size: 0.8rem; font-weight: 600; border-radius: 999px; padding: 0.2em 0.8em; white-space: nowrap; border: 1px solid rgba(143, 223, 212, 0.25); letter-spacing: 0.01em; user-select: none; pointer-events: none; transition: background 0.2s, color 0.2s; } & .title { font-family: var(--font-secondary); font-size: 1.1rem; font-weight: 700; display: block; color: var(--color-text); margin: 0; transition: color 0.3s ease; } & .description { font-family: var(--font-primary); font-size: 0.9rem; color: var(--color-text-secondary); line-height: 1.4; display: block; margin: 0.25rem 0 0 0; }}.post-tags{display:flex;flex-wrap:wrap;gap:.5em;justify-content:center;align-items:center;margin:var(--spacing-md)var(--spacing-xs)var(--spacing-lg);& .post-tag { display: inline-block; background: var(--color-accent-transparent-10); color: var(--color-accent); border: 1px solid var(--color-accent); border-radius: var(--radius-round); padding: 0.2em 0.8em; font-size: 0.95em; font-family: var(--font-secondary); text-decoration: none; transition: background 0.2s, color 0.2s, border 0.2s; &:hover, &:focus { background: var(--color-accent); color: var(--color-background); border-color: var(--color-accent-light); text-decoration: none; } &.animated { opacity: 0; transform: translateX(60px); animation: postTagSlideIn 0.6s var(--child-animation-delay) cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; } }}.random-blog-btn-container{margin:1.5rem;text-align:center;&.animated { animation: randomBtnSlideInFromLeft 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; animation-delay: 0.4s; opacity: 0; } & .random-blog-btn { background: var(--color-accent-transparent-15); color: var(--color-accent-dark); border: 1px solid var(--color-accent-dark); border-radius: var(--radius-round); padding: 0.5em 1.5em; font-size: 1.1rem; font-family: var(--font-secondary); font-weight: var(--font-weight-bold); box-shadow: none; cursor: pointer; transition: background 0.2s, color 0.2s, border 0.2s; &:hover, &:focus { text-decoration: none; background: var(--color-accent-dark); color: var(--color-accent); border-color: var(--color-accent); box-shadow: none; outline: 2px solid var(--color-accent-dark); } }}table{width:100%;border-collapse:separate;border-spacing:0;margin:var(--spacing-xl)0;border-radius:var(--radius-lg);background:var(--color-table-bg-zebra);box-shadow:var(--shadow-table);border:var(--border-standard);transition:var(--transition-transform-shadow);overflow:hidden;&:hover { @media (pointer:fine) { box-shadow:var(--shadow-table-hover); } } &.compact { font-size:0.92em; margin:var(--spacing-sm) 0; th,td { padding:var(--spacing-xs) var(--spacing-md); } th { letter-spacing:0.5px; } @media (max-width:768px) { font-size:0.88em; } } &.scroll { display:block; overflow-x:auto; } thead { background:var(--color-table-header-bg); } tbody tr { &:nth-child(even) td { background-color:var(--color-table-bg); } &:hover td { @media (pointer:fine) { background-color:var(--color-table-row-hover); color:var(--color-text); } } } tr:last-child td { border-bottom:none; } th { font-family:var(--font-secondary); font-weight:var(--font-weight-bold); padding:var(--spacing-md) var(--spacing-lg); color:var(--color-accent); text-transform:uppercase; font-size:var(--font-size-sm); } td { padding:var(--spacing-md) var(--spacing-lg); border-bottom:var(--border-light); transition:var(--transition-background); }}