:root{--link-color:#003fff;--link-color-hovered:#0036c7;--backdrop-color:#edecec;--backdrop-color-hovered:#d5d5d5;--code-block-background-color:#222431;--note-bad-color:#ce0000;--note-check-color:#22ce00;--note-info-color:#007BFF;--note-warning-color:#ff8800;--note-bad-background-color:#ff7878;--note-check-background-color:#7dd36c;--note-info-background-color:#d2e6f7;--note-warning-background-color:#ffb574;--note-text-color:black;--readmore-border-color:#c9cdd0;--display-dark:none;--display-light:block}html.dark{--link-color:#77a8fd;--link-color-hovered:#5292ff;--backdrop-color:#323232;--backdrop-color-hovered:#444;--note-bad-background-color:#a20000;--note-check-background-color:#4c7f41;--note-info-background-color:#00396b;--note-warning-background-color:#a15e00;--note-text-color:white;--readmore-border-color:#44474f;--display-dark:block;--display-light:none}.wrapper{max-width:calc(900px - (30px * 2))}blockquote div.highlight pre{margin-left:0;margin-right:0}html a.tag{background-color:var(--backdrop-color);color:var(--link-color);display:inline-flex;padding:.4rem .8rem;border-radius:16px;font-size:.875rem;font-weight:500;text-decoration:none;&:hover,&:active { background-color:var(--backdrop-color-hovered); color:var(--link-color-hovered); }}iframe{border:none;border-radius:.3rem;background-color:var(--code-block-background-color)}html a.readmore{color:var(--link-color);display:inline-flex;align-items:center;padding:.25em 1em;margin:1em 0;text-decoration:none;border:.2rem solid var(--readmore-border-color);border-radius:10rem;transition:color .2s ease,border-color .2s ease;&::before { content:"→"; padding-right:0.5rem; } &:hover,&:active { color:var(--link-color-hovered); border-color:var(--link-color-hovered); }}.note-box{display:flex;align-items:flex-start;gap:.6em;padding:1em;margin:1em 0;border-radius:7px;color:var(--note-text-color);.note-content { flex: 1; width: calc(100% - 5em); div.highlight pre { margin-left: 0; margin-right: 0; } } .note-icon { font-size: 1.3em; line-height: 1; flex-shrink: 0; margin-top: 0.1em; img { width: 1.5em; height: 1.5em; &.dark { display: var(--display-dark); } &.light { display: var(--display-light); } } } &.bad { border-left: 7px solid var(--note-bad-color); background: var(--note-bad-background-color); } &.check { border-left: 7px solid var(--note-check-color); background: var(--note-check-background-color); } &.info { border-left: 7px solid var(--note-info-color); background: var(--note-info-background-color); } &.warning { border-left: 7px solid var(--note-warning-color); background: var(--note-warning-background-color); }}