:root{--primary-color:hsla(195, 67.3%, 30%, 1);--alternative-color:hsla(31, 100%, 60%, 1);--text-color:hsla(0, 0%, 13.3%, 1);--support-color:hsla(0, 0%, 73%, 1);--background-color:hsla(0, 0%, 99.6%, 1);@media(prefers-color-scheme:dark){--primary-color: hsla(195,100%,75.1%,1); --alternative-color: hsla(31,100%,60%,1); --text-color: hsla(47,12%,83%,1); --support-color: hsla(0,0%,73%,1); --background-color: hsla(0,0%,13.3%,1);}--small-gap:0.5rem;--normal-gap:1rem;--large-gap:1.5rem;--letter-gap:1ch;--variable-gap:calc(8px + 1.5625vw);--small-size:0.875rem;--normal-size:1rem;--large-size:1.5rem;--very-large-size:2.5rem;--normal-border-radius:0.25rem;--large-border-radius:4rem}:target{transition:all .3s 1s fade-in-out;transform:rotate(-2deg);max-width:fit-content;margin:calc(var(--normal-gap) * 2)0;outline:2px dotted var(--text-color)}html{scroll-padding:1rem;scroll-behavior:smooth}p,figure,small,em,ol,ul,strong,h1,h2,h3,h4,h5,h6{margin:0;padding:0}p{font-size:var(--normal-size)}small{color:var(--support-color);font-size:var(--small-size);line-height:normal}a{color:var(--primary-color);text-decoration:underline dotted;transition:all .3s ease-in-out}a:hover{color:var(--alternative-color);text-decoration:underline}h1{font-size:var(--very-large-size);width:fit-content}h2{font-size:var(--large-size)}h1,h2,h3{font-family:Optician Sans,sans-serif;color:var(--primary-color);transition:all .3s ease-in-out}body>header{font-family:Optician Sans,sans-serif;& img { border-radius: var(--normal-border-radius); } & nav { padding: 1rem 0; display: flex; flex-direction: column; align-items: center; & span.site-title { font-size: var(--large-size); } a { display: flex; align-items: center; gap: var(--letter-gap); } }}aside.tags{font-family:Optician Sans,sans-serif;& ul { list-style: none; display: flex; flex-wrap: wrap; gap: var(--small-gap); transition: all 0.3s ease-in-out; & a:hover { outline: 2px ridge var(--text-color); filter: none; border-radius: var(--large-border-radius); box-shadow: 0 0 0 2px var(--text-color); } & li { padding: calc(var(--small-gap) / 2) var(--small-gap); list-style: none; & a { padding: calc(var(--small-gap) / 2) var(--small-gap); } & a.active { outline: 2px ridge var(--text-color); filter: none; border-radius: var(--large-border-radius); } } } & ul:hover a:not(:hover) { opacity: 0.8; filter: blur(1px); }}section{display:flex;flex-direction:column;gap:var(--small-gap);padding:calc(var(--small-gap)/2)var(--small-gap);& h2 { text-align: center; } & header { display: flex; flex-direction: column; gap: 0; } & footer { display: flex; justify-content: end; }}section.about{position:relative;transform:rotate(-1deg);flex-direction:column;border:2px solid var(--text-color);border-radius:var(--normal-border-radius);box-shadow:0 0 0 2pt var(--text-color);transition:all .3s ease-in-out;&:hover { transform:rotate(0deg); }}article{display:flex;flex-direction:column;gap:var(--small-gap);transition:all .3s ease-in-out;& header { & h1 { transform: rotate(-1deg); &:hover { transform: rotate(0deg); } } } & footer { display: grid; grid-template-columns: repeat(2, 1fr); & a[rel="prev"] { overflow: hidden; text-overflow: ellipsis; text-align: start; } & a[rel="next"] { overflow: hidden; text-overflow: ellipsis; text-align: end; } &:hover a:not(:hover) { opacity: 0.8; filter: blur(1px); } }}div.posts-groupby{display:flex;width:100%;gap:var(--large-gap);border-top:1px dotted var(--text-color);padding:var(--small-gap)0;&:hover a:not(:hover) { opacity:0.8; filter:blur(1px); } & ul { width:100%; & li { padding:var(--small-gap) 0; list-style:none; & a { display:flex; align-items:center; justify-content:space-between; gap:var(--small-gap); & span.post-title { overflow:hidden; text-overflow:ellipsis; } } } & li:not(:first-child) { border-top:1px dotted var(--text-color); } } & h3 { padding-top:var(--small-gap); }}small.post-metadata{display:flex;flex-wrap:wrap;& span { white-space: nowrap; overflow: hidden; &#suggest { text-overflow: ellipsis; } } & span:not(:last-child)::after { padding: 0 calc(var(--letter-gap) / 2); content: "·"; }}body{display:flex;margin:0;flex-direction:column;min-height:100dvh;line-height:1.5;letter-spacing:0;color:var(--text-color);background-color:var(--background-color);font-family:Domine,Cambria,Cochin,Georgia,Times,times new roman,serif}hr{width:100%}main{display:flex;flex-direction:column;gap:var(--large-gap);margin-left:auto;margin-right:auto;padding:0 var(--variable-gap);width:100%;max-width:calc(75ch + var(--variable-gap));flex-grow:1}body>footer{width:100%;padding:1rem 0;margin-top:1rem;border-top:1px solid var(--text-color);font-family:Optician Sans,sans-serif;display:flex;align-items:center;justify-content:center;& p { text-align: center; } & div { max-width: 75ch; width: 100%; display: flex; align-items: center; justify-content: space-around; gap: calc(var(--letter-gap) / 2); }}details.table-of-contents{& ol, ul { padding-left: var(--small-gap); list-style-position: inside; } &:has(nav:empty) { display: none; }}div.content{word-break:break-word;& p, ul, ol, div.highlight, img { margin: var(--normal-gap) 0rem; } & blockquote { border-left: 2px solid var(--text-color); padding-left: var(--normal-gap); } & ul, ol { list-style-position: inside; & li { padding-left: var(--normal-gap); & p { display: inline; } } } & pre:has(code) { max-width: 100%; border-radius: calc(var(--normal-border-radius) * 2); padding: calc(var(--small-gap)) calc(var(--small-gap) / 2); box-shadow: 0px 0px 2px var(--text-color); overflow-x: auto; } & code { font-family: "Monaspace Radon"; border-radius: var(--normal-border-radius); } & img { max-width: 100%; max-height: 90dvh; object-fit: contain; border-radius: var(--normal-border-radius); box-shadow: 0 0 0 2px var(--text-color); transition: all 0.3s ease-in-out; &:hover { border-radius: 0; } }}figure:has(img,audio){display:flex;flex-direction:column;justify-content:center;align-items:center;gap:var(--small-gap);margin:var(--normal-gap)0;& img { max-width: 100%; object-fit: contain; border-radius: var(--normal-border-radius); box-shadow: 0 0 0 2px var(--text-color); transition: all 0.3s ease-in-out; &:hover { border-radius: 0; } } & figcaption { font-size: var(--small-size); color: var(--support-color); }}@font-face{font-family:optician sans;font-style:normal;font-weight:400;src:url(/fonts/Optiker-K.woff)format("woff")}@font-face{font-family:monaspace radon;font-style:normal;src:url(/fonts/MonaspaceRadon-Regular.woff)format("woff")}@font-face{font-family:domine;src:url(/fonts/Domine-VariableFont_wght.woff)format("woff")}