@charset "UTF-8";
/* http://meyerweb.com/eric/tools/css/reset/  v2.0 | 20110126 License: none (public domain)
*/
@import url("https://fonts.googleapis.com/css2?family=Fira+Mono:wght@400;500;700&display=swap");
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; }

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }

body { line-height: 1; }

ol, ul { list-style: none; }

blockquote, q { quotes: none; }

blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }

table { border-collapse: collapse; border-spacing: 0; }

:root { --color-personal: #d60049; --color-personal-sub: #c11550; --color-work: #2e63b8; --color-work-sub: #4568a1; }

:root.dark { --color-personal: #de336d; --color-personal-sub: #f73476; --color-work: #4373bf; --color-work-sub: #2a6dd8; }

@media (prefers-color-scheme: dark) { :root { --color-personal: #de336d; --color-personal-sub: #f73476; --color-work: #4373bf; --color-work-sub: #2a6dd8; } }
.work article .date, .personal article .date { opacity: 0.5; font-size: 0.8em; margin: 0; }

.work > h1 { color: var(--color-work); }

.work > article :is(h2, h2 a) { color: var(--color-work-sub); }

.work > article h2::before, .work h2 a.external::after { background: var(--color-work-sub); }

.personal > h1 { color: var(--color-personal); }

.personal > article :is(h2, h2 a) { color: var(--color-personal-sub); }

.personal > article h2::before, .personal h2 a.external::after { background: var(--color-personal-sub); }

section + section { margin-top: 2em; }

.soviet { display: flex; justify-content: start; align-items: center; width: 100%; flex-wrap: wrap; gap: 16px; }
.soviet .badge { width: 25%; min-height: 150px; }
.soviet .badge .image { display: flex; align-items: center; justify-content: center; min-height: 150px; }
.soviet .badge .image img { width: 100%; }
.soviet .badge .title { margin-top: 0.5em; text-align: center; }
.soviet .badge .comment { text-align: center; color: var(--fg-color-unimportant); margin-top: 0.25em; font-size: 0.7rem; }

:root { --bg-color: white; --fg-color: #555; --fg-color-unimportant: #55555580; --fg-important-color: #121212; text-rendering: optimizeLegibility; }

@media (prefers-color-scheme: dark) { :root:not(.light) { --bg-color: #151515; --fg-color: #c9d1d9; --fg-color-unimportant: #c9d1d980; --fg-important-color: #f0f6fc; }
  :root:not(.light) ::selection { background: rgba(255, 255, 255, 0.99); color: var(--bg-color); } }
:root.dark { --bg-color: #151515; --fg-color: #c9d1d9; --fg-color-unimportant: #c9d1d980; --fg-important-color: #f0f6fc; }
:root.dark ::selection { background: rgba(255, 255, 255, 0.99); color: var(--bg-color); }

* { color: var(--fg-color); transition: background-color 0.5s ease, color 0.5s ease; }

::selection { background-color: var(--fg-color); color: white; }

body, html { height: 100%; margin: 0; }

body { font-family: "Fira Mono", ui-monospace, monospace, Ubuntu; font-size: 0; background: var(--bg-color); color: var(--fg-color); text-align: center; }

h1, h2, h3 { font-weight: bold; margin: 0.2em 0; }

h1 { font-size: 1.5rem; }

strong { font-weight: 500; }

ol, ul { margin: 1em 0; }

ol { padding-left: 6ch; list-style-type: lower-roman; }

ul { padding-left: 4ch; list-style-type: square; }

ol li::marker, ul li::marker { color: var(--fg-color-unimportant); }

li { line-height: 1.7em; }

.dummy, .centered { display: inline-block; vertical-align: middle; }

.dummy { width: 1px; height: 100%; }

.centered { font-size: 10pt; height: fit-content; max-height: 100vh; margin: 2em auto; text-align: left; }

.centered > header, main, footer { width: 65ch; height: fit-content; margin: 1em auto; }

.centered > header header h1:before, main h2:before { content: ""; display: inline-block; margin-top: -1px; margin-left: -22px; vertical-align: middle; width: 22px; height: 22px; mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='icon icon-tabler icon-tabler-caret-right' width='22' height='22' viewBox='0 0 24 24' stroke-width='0' stroke='currentColor' fill='currentColor' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'%3E%3C/path%3E%3Cpath d='M18 15l-6 -6l-6 6h12' transform='rotate(90 12 12)'%3E%3C/path%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='icon icon-tabler icon-tabler-caret-right' width='22' height='22' viewBox='0 0 24 24' stroke-width='0' stroke='currentColor' fill='currentColor' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'%3E%3C/path%3E%3Cpath d='M18 15l-6 -6l-6 6h12' transform='rotate(90 12 12)'%3E%3C/path%3E%3C/svg%3E"); background: var(--fg-important-color); }

.centered > header { text-align: left; margin-bottom: 2em; }
.centered > header header { margin-bottom: 1em; }
.centered > header header h1 { margin: 0; font-size: 1rem; font-weight: 700; }
.centered > header header p { margin: 0.35em 0; }

a { color: var(--fg-color); text-decoration: none; }
a.medium-link { font-weight: 500; }
a.important-link { font-weight: 700; }
a.medium-link, a.important-link, a:is(h2 a) { color: var(--fg-important-color); }
a.external { vertical-align: middle; }
a.external::after { content: ""; display: inline-block; width: 16px; height: 16px; mask-image: url(../img/external-link.svg); -webkit-mask-image: url(../img/external-link.svg); mask-size: 16px; -webkit-mask-size: 16px; mask-position: center; -webkit-mask-position: center; mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat; vertical-align: middle; background: var(--fg-important-color); margin-left: 4px; margin-top: -2px; }
a.external.small::after { width: 12px; height: 12px; mask-size: 12px; -webkit-mask-size: 12px; margin-left: 3px; }
a.current { text-decoration: underline; text-decoration-style: solid; text-decoration-skip: edges; }

a:hover { color: var(--fg-important-color); text-decoration: underline; text-decoration-style: wavy; }

main { text-align: justify; }
main h2 { font-size: 1rem; margin: 0; }
main h2 + p { margin-top: 0; }
main h3 { font-size: 0.85rem; }
main h3 + p { margin-top: 0; }
main p { margin: 1em 0; line-height: 1.5em; }
main p + h3 { margin-top: 2em; }
main figure { margin-bottom: 1.5em; }
main figure figcaption { text-align: center; margin-top: -1.5em; font-weight: 500; }
main figure figcaption + img-enlarge { cursor: pointer; }
main figure figcaption + img-enlarge::before { content: "(press to enlarge)"; display: block; text-align: center; opacity: 0.5; margin-top: 0.5em; }
main figure img { margin: 16px; margin-bottom: 32px; width: calc(100% - 32px); height: auto; filter: drop-shadow(0 0 15px #00000045); transition: transform 0.35s ease; cursor: zoom-in; }

header h1, h2, strong { color: var(--fg-important-color); }
header h1::selection, h2::selection, strong::selection { background-color: var(--fg-important-color); color: var(--bg-color); }

article + article { margin-top: 2em; }

footer { opacity: 0.5; padding-bottom: 2em; }
footer a + a::before { margin-left: 1ch; margin-right: 1ch; content: "•"; display: inline-block; text-decoration: none !important; }

@media screen and (max-width: 600px) { .centered { width: calc(100% - 1px); padding-left: 0; }
  .centered > header, main, footer { width: calc(100% - 44px); padding: 0 22px; } }
.popup-frame { position: fixed; left: 0; right: 0; top: 0; bottom: 0; background: rgba(0, 0, 0, 0.8); z-index: 99; font-size: 0; text-align: center; opacity: 0; transition: opacity 0.35s ease; }
.popup-frame .dummy { height: 100%; width: 0; vertical-align: middle; display: inline-block; }
.popup-frame figure { width: 75%; display: inline-block; vertical-align: middle; position: relative; }
.popup-frame figure figcaption { color: #fff; font-size: initial; margin-top: 1.5em; }
.popup-frame figure img.popup { margin: 0; max-width: 100%; width: auto; height: auto; transform: scale(0); transition: transform 0.35s ease; -webkit-backface-visibility: hidden; -webkit-transform-style: preserve-3d; }
.popup-frame.shown { opacity: 1; }
.popup-frame.shown figure::before, .popup-frame.shown figure::after { content: ""; display: block; position: absolute; top: 24px; right: 24px; width: 32px; height: 32px; opacity: 0; transition: opacity 0.35s ease; transition-delay: 0.5s; }
.popup-frame.shown figure::before { background: #fff; mask-image: url(../img/cross.svg); -webkit-mask-image: url(../img/cross.svg); mask-size: 16px; -webkit-mask-size: 16px; mask-position: center; -webkit-mask-position: center; mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat; z-index: 99; }
.popup-frame.shown figure::after { border-radius: 16px; background: rgba(0, 0, 0, 0.6); z-index: 98; }
.popup-frame.shown figure:hover::before, .popup-frame.shown figure:hover::after { opacity: 1; transition-delay: 0s; }
.popup-frame.shown figure img.popup { transform: scale(1) translate3d(0, 0, 0); cursor: zoom-out; }