/* === Reset & Base === */
*, *::before, *::after { box-sizing: border-box; margin: 0; border: 0; font-family: 'Inconsolata', monospace; -webkit-transition: all 200ms linear; -ms-transition: all 200ms linear; transition: all 200ms linear; }

html, body { background-color: #151515; color: aliceblue; }

body { padding: 50px; font-size: 14px; line-height: 1.5; font-weight: 400; }

img { height: auto; }

/* === Typography === */
h1, h2, h3, h4, h5, h6 { margin: 0 0 15px; }

h1 a:hover { font-weight: 900; }

h1, h2, h3, h4, h5, h6, a { color: red; }

:not(header) > h1, :not(header) > h2, :not(header) > h3, :not(header) > h4, :not(header) > h5, :not(header) > h6 { font-size: 28px; border-bottom: 1px solid red; padding-bottom: 15px; }

p, ul, ol, table, pre, dl { margin: 0 0 10px; }

a { text-decoration: none; }

a:hover, a:focus { color: red; font-weight: bold; }

a:focus-visible { outline: 2px solid rgba(255, 0, 0, 0.6); outline-offset: 2px; border-radius: 2px; }

strong { color: white; }

/* === Layout === */
.wrapper { width: 860px; margin: 0 auto; position: relative; }

header { position: fixed; top: 50px; left: calc(50% - 430px); width: 240px; }

footer { position: fixed; bottom: 30px; left: calc(50% - 430px); width: 240px; }

section { margin-left: 245px; width: 580px; min-height: 45vh; font-size: 1.1em; float: none; }

/* === Profile / Sidebar === */
[alt=Logo] { display: block; max-height: 350px; max-width: 210px; height: 350px; width: 210px; object-fit: cover; border-radius: 1rem; filter: brightness(1.25); box-shadow: 0px 0px 15px red; margin-bottom: 15px; }

.view { margin-top: 10px; }

/* === Post List === */
:not(li) > ul { padding: 0; }

ul { list-style-type: none; }

ul > li::before { content: "> "; color: red; font-weight: 100; }

li a { color: aliceblue; }

li a:hover { font-weight: initial; color: red; }

/* === Post Page === */
.post > h1 { font-size: clamp(24px, 4vw, 36px); border-bottom: 1px solid red; padding-bottom: 15px; }

.date, .back { color: rgba(240, 248, 255, 0.55); font-size: 0.9em; }

.back { color: rgba(255, 0, 0, 0.8); }

/* === Code === */
code, pre { font-family: 'Inconsolata', monospace; }

:not(pre) > code { background-color: #656c7633; padding: .2em .4em; margin: 0; font-size: 85%; word-break: break-all; border-radius: 6px; color: aliceblue; }

pre { padding: 1rem; overflow: auto; font-size: 85%; line-height: 1.45; background-color: #231b1b !important; border-radius: 6px; }

/* === Syntax Highlighting === */
.highlight { background-color: #231b1b; border-radius: 6px; }

.highlight table td { padding: 5px; }

.highlight table pre { margin: 0; }

.highlight .ne, .highlight .nf, .highlight .nl { color: red; }

code, pre, .highlight, .highlight .gi, .highlight .kc, .highlight .kd, .highlight .kn, .highlight .kp, .highlight .kr, .highlight .k, .highlight .kv, .highlight .nt, .highlight .o, .highlight .ow, .highlight .gp, .highlight .nn { color: white; }

.highlight .cm, .highlight .cp, .highlight .c1, .highlight .cs, .highlight .c { color: #888; font-style: italic; }

.highlight .s, .highlight .s1, .highlight .s2, .highlight .sb, .highlight .sc, .highlight .sd, .highlight .se, .highlight .sh, .highlight .si, .highlight .sx { color: #f88; }

.highlight .mi, .highlight .mf, .highlight .mh, .highlight .mo, .highlight .m { color: #a8d8a8; }

/* === Blockquote === */
blockquote { border-left: 1px solid red; margin: 0; padding: 0 0 0 20px; font-style: italic; color: rgba(240, 248, 255, 0.7); }

/* === Table === */
table { width: 100%; border-collapse: collapse; margin-bottom: 20px; }

th, td { text-align: left; padding: 5px 10px; border-bottom: 1px solid rgba(255, 0, 0, 0.25); }

th { color: red; }

/* === Images in posts === */
.post img { max-width: 100%; border: 1px solid rgba(255, 0, 0, 0.2); border-radius: 4px; }

/* === Footer === */
footer a { font-weight: 500; }

/* === Responsive === */
@media print, screen and (max-width: 960px) { .wrapper { display: block; width: auto; }
  header, footer { position: static; padding: 0; display: flex; flex-direction: column; align-items: center; width: auto; text-align: center; }
  [alt=Logo] { height: 150px; width: 80px; border-radius: .5rem; margin: 10px auto; }
  section { padding: 15px 0; margin: 0 0 15px; width: inherit; float: none; }
  .view { text-align: center; } }
@media print, screen and (max-width: 480px) { body { padding: 30px; } }