:root{--background:rgba(27, 43, 63, 0.9);--foreground:#c6cacf;--cursor:#c6cacf;--color0:#1b2b3f;--color1:#526D96;--color2:#69799B;--color3:#6A7C9F;--color4:#837F97;--color5:#948598;--color6:#B58B91;--color7:#c6cacf;--color8:#6a7581;--color9:#526D96;--color10:#69799B;--color11:#6A7C9F;--color12:#837F97;--color13:#948598;--color14:#B58B91;--color15:#c6cacf;--terminal-margin:1em}::selection{background-color:var(--foreground);color:var(--background)}@keyframes fade{from{opacity:1}50%{opacity:0}to{opacity:1}}@-webkit-keyframes fade{from{opacity:1}50%{opacity:0}to{opacity:1}}.blink{animation:fade 1s linear infinite;-webkit-animation:fade 1s linear infinite}.window{background-color:var(--background);height:100%;overflow:scroll;color:var(--foreground);border:solid var(--color1)1px;&:hover { border:solid #fff 1px; } a { text-decoration:none; &:visited,&:link { color:var(--foreground); } &:hover { color:var(--color5); } }}@media(prefers-color-scheme:dark){body{background-color:#22222a;color:#eee}}@media(prefers-color-scheme:light){body{background-color:#eee;color:#22222a}}body{margin:0;font-family:monospace;font-size:16px;main { display: grid; grid-template-columns: calc(100vw/4) 3fr; grid-template-rows: 1; .background { position: absolute; display: flex; justify-content: center; align-items: center; font-size: 36px; width: 100%; height: 100%; z-index: -1; } .terminal-tree { grid-column: 1; height: calc(100vh - (var(--terminal-margin) * 2)); padding: var(--terminal-margin); padding-right: calc(var(--terminal-margin) / 2); .window { display: flex; flex-direction: column; .ps1 { display: flex; .name { color: var(--color1); } .sysname { color: var(--color8); } .dir { color: var(--color11); } } .spacing { opacity: 0; cursor: default; } a { text-overflow: ellipsis; overflow-x: hidden; white-space: nowrap; } } } .terminal { grid-column: 2; height: calc(100vh - (var(--terminal-margin) * 2)); padding: var(--terminal-margin); padding-left: calc(var(--terminal-margin) / 2); .window { padding-left: 1em; padding-right: 1em; overflow: scroll; .output { white-space: pre; overflow: hidden; font-size: 10px; } h1 { margin-top: 0; } } } }}.post-header{display:grid;grid-template-columns:1fr 10fr 1fr;align-items:end;.prev { grid-column: 1; a { color: var(--color8); width: 100%; display: inline-block; text-align: center; cursor: pointer; text-decoration: underline; } } .title { grid-column: 2; h1 { color: var(--color1); text-align: center; } } .next { grid-column: 3; a { color: var(--color8); width: 100%; display: inline-block; text-align: center; cursor: pointer; text-decoration: underline; } } time { width: 100%; display: inline-block; text-align: center; }}