@charset "UTF-8";
 :root, :host {
--site-width: 100vw;
--site-header: 3rem;
--actions-box-hight: 3.5rem;
--site-padding-inline: 1rem;
--block-spacing: 1.5rem;
--font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
--font-code: var(--font-family);
--color-50: oklch(98.5% 0.002 247.839);
--color-100: oklch(96.7% 0.003 264.542);
--color-200: oklch(92.8% 0.006 264.531);
--color-300: oklch(87.2% 0.01 258.338);
--color-400: oklch(70.7% 0.022 261.325);
--color-500: oklch(55.1% 0.027 264.364);
--color-600: oklch(44.6% 0.03 256.802);
--color-700: oklch(37.3% 0.034 259.733);
--color-800: oklch(27.8% 0.033 256.848);
--color-900: oklch(21% 0.034 264.665);
--color-950: oklch(13% 0.028 261.692);
--scheme: #ffffff;
--transition: 0.2s ease-out;
--radius: 0;
--radius-small: calc(var(--radius)/2);
--radius-medium: calc(var(--radius)*2 - var(--radius)/2);
--radius-large: calc(var(--radius)*2);
--rgb-dark-05: color-mix(in srgb, var(--color-700), transparent 95%);
--rgb-dark-20: color-mix(in srgb, var(--color-700), transparent 80%);
--rgb-dark-30: color-mix(in srgb, var(--color-700), transparent 70%);
--rgb-dark-10: color-mix(in srgb, var(--color-700), transparent 90%);
--rgb-dark-40: color-mix(in srgb, var(--color-700), transparent 60%);
--rgb-dark-50: color-mix(in srgb, var(--color-700), transparent 50%);
--rgb-dark-60: color-mix(in srgb, var(--color-700), transparent 40%);
--shadow-small: 0 0 0 1px var(--rgb-dark-05), 0 1px 0 0 var(--rgb-dark-05), 0 0.1em 0.6em -0.5em var(--rgb-dark-05), 0 0.2em 1.2em -0.8em var(--rgb-dark-10), 0 0.3em 0.7em -0.6em rgba(var(--wpie-rgb-dark), 0.2), 0 0.4em 0.8em -0.7em var(--rgb-dark-30);
--shadow: 0 0 0 1px var(--rgb-dark-05), 0 1px 0 0 var(--rgb-dark-05), 0 0.2em 1.6em -0.8em var(--rgb-dark-20), 0 0.4em 2.4em -1em var(--rgb-dark-30), 0 0.4em 0.8em -1.2em var(--rgb-dark-40), 0 0.8em 1.2em -1.6em var(--rgb-dark-50), 0 1.2em 1.6em -2em var(--rgb-dark-60);
}
@media screen and (min-width: 60rem) {
:root, :host {
--site-header: 0rem;
}
}
.theme-dark {
--color-50: oklch(13% 0.028 261.692);
--color-100: oklch(21% 0.034 264.665);
--color-200: oklch(27.8% 0.033 256.848);
--color-300: oklch(37.3% 0.034 259.733);
--color-400: oklch(44.6% 0.03 256.802);
--color-500: oklch(55.1% 0.027 264.364);
--color-600: oklch(70.7% 0.022 261.325);
--color-700: oklch(87.2% 0.01 258.338);
--color-800: oklch(92.8% 0.006 264.531);
--color-900: oklch(96.7% 0.003 264.542);
--color-950: oklch(98.5% 0.002 247.839);
--scheme: oklch(20% 0.015 270);
}
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
border: 0 solid;
}
html, :host {
line-height: 1.5;
-webkit-text-size-adjust: 100%;
-moz-tab-size: 4;
-o-tab-size: 4;
tab-size: 4;
font-family: var(--font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
font-feature-settings: normal;
font-variation-settings: normal;
-webkit-tap-highlight-color: transparent;
}
hr {
height: 0;
color: inherit;
border-top-width: 1px;
}
abbr:where([title]) {
-webkit-text-decoration: underline dotted;
text-decoration: underline dotted;
}
h1, h2, h3, h4, h5, h6 {
font-size: inherit;
font-weight: inherit;
}
a {
color: inherit;
-webkit-text-decoration: inherit;
text-decoration: inherit;
}
b, strong {
font-weight: bolder;
}
code, kbd, samp, pre {
font-family: var(--font-code, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
font-feature-settings: normal;
font-variation-settings: normal;
font-size: 1em;
}
small {
font-size: 80%;
}
sub, sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
table {
text-indent: 0;
border-color: inherit;
border-collapse: collapse;
}
:-moz-focusring {
outline: auto;
}
progress {
vertical-align: baseline;
}
summary {
display: list-item;
}
ol, ul, menu {
list-style: none;
}
img, svg, video, canvas, audio, iframe, embed, object {
display: block;
vertical-align: middle;
}
img, video {
max-width: 100%;
height: auto;
}
button, input, select, optgroup, textarea, ::file-selector-button {
font: inherit;
font-feature-settings: inherit;
font-variation-settings: inherit;
letter-spacing: inherit;
color: inherit;
border-radius: 0;
background-color: transparent;
opacity: 1;
}
:where(select:is([multiple], [size])) optgroup {
font-weight: bolder;
}
:where(select:is([multiple], [size])) optgroup option {
padding-inline-start: 20px;
}
::file-selector-button {
margin-inline-end: 4px;
}
::-moz-placeholder {
opacity: 1;
}
::placeholder {
opacity: 1;
}
@supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) {
::-moz-placeholder {
color: currentcolor;
}
::placeholder {
color: currentcolor;
}
@supports (color: color-mix(in lab, red, red)) {
::-moz-placeholder {
color: color-mix(in oklab, currentcolor 50%, transparent);
}
::placeholder {
color: color-mix(in oklab, currentcolor 50%, transparent);
}
}
}
textarea {
resize: vertical;
}
::-webkit-search-decoration {
-webkit-appearance: none;
}
::-webkit-date-and-time-value {
min-height: 1lh;
text-align: inherit;
}
::-webkit-datetime-edit {
display: inline-flex;
}
::-webkit-datetime-edit-fields-wrapper {
padding: 0;
}
::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {
padding-block: 0;
}
::-webkit-calendar-picker-indicator {
line-height: 1;
}
:-moz-ui-invalid {
box-shadow: none;
}
button, input:where([type="button"], [type="reset"], [type="submit"]), ::file-selector-button {
-webkit-appearance: button;
-moz-appearance: button;
appearance: button;
}
::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
height: auto;
}
[hidden]:where(:not([hidden="until-found"])) {
display: none !important;
}
html {
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
-webkit-text-size-adjust: 100%;
-moz-text-size-adjust: 100%;
text-size-adjust: 100%;
scroll-behavior: smooth;
}
body {
background: var(--scheme);
color: var(--color-700);
}
details:not([class]) {
border-bottom: 1px dashed var(--color-300);
}
details:not([class]) summary {
display: flex;
align-items: center;
padding-inline: 1rem;
font-weight: 500;
justify-content: space-between;
cursor: pointer;
}
details:not([class]) summary:hover {
text-shadow: 1px 0 1px var(--color-300);
}
details:not([class]) summary:after {
content: "+";
display: flex;
width: 2em;
height: 2em;
align-items: center;
justify-content: center;
font-size: 1.125em;
transition: all var(--transition);
}
details:not([class])[open] {
padding-block-end: 0.75em;
padding-inline: 1rem;
}
details:not([class])[open] summary {
margin-inline: -1rem;
text-shadow: 1px 0 1px var(--color-300);
color: var(--color-950);
}
details:not([class])[open] summary:after {
transform: rotate(45deg);
transform-origin: center;
color: var(--color-900);
}
.button,
button:not([class^=btn-toggle]),
input[type=button],
input[type=reset],
input[type=submit] {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
border-radius: var(--radius-small);
padding-inline: 1.1875rem;
padding-block: 0.5625rem;
border-width: 0.0625rem;
border-style: solid;
border-color: var(--color-300);
background-color: var(--scheme);
color: var(--color-900);
cursor: pointer;
transition: all var(--transition);
font-size: 0.875rem;
text-wrap: nowrap;
white-space: nowrap;
width: -moz-fit-content;
width: fit-content;
line-height: 1.25rem;
font-weight: 700;
}
.button:hover,
button:not([class^=btn-toggle]):hover,
input[type=button]:hover,
input[type=reset]:hover,
input[type=submit]:hover {
background-color: var(--color-100);
}
.button:focus,
button:not([class^=btn-toggle]):focus,
input[type=button]:focus,
input[type=reset]:focus,
input[type=submit]:focus {
outline: 2px solid var(--color-200);
outline-offset: 2px;
}
.button[disabled],
button:not([class^=btn-toggle])[disabled],
input[type=button][disabled],
input[type=reset][disabled],
input[type=submit][disabled] {
background-color: var(--color-100);
cursor: not-allowed;
}
.button.is-ghost,
button:not([class^=btn-toggle]).is-ghost,
input[type=button].is-ghost,
input[type=reset].is-ghost,
input[type=submit].is-ghost {
border-color: transparent;
background-color: transparent;
}
.button.is-ghost:hover,
button:not([class^=btn-toggle]).is-ghost:hover,
input[type=button].is-ghost:hover,
input[type=reset].is-ghost:hover,
input[type=submit].is-ghost:hover {
background-color: var(--color-100);
}
.button.is-icon,
button:not([class^=btn-toggle]).is-icon,
input[type=button].is-icon,
input[type=reset].is-icon,
input[type=submit].is-icon {
width: 2rem;
height: 2rem;
padding: 0;
display: inline-flex;
place-items: center;
font-size: 1.125rem;
}
.button .btn-icon,
button:not([class^=btn-toggle]) .btn-icon,
input[type=button] .btn-icon,
input[type=reset] .btn-icon,
input[type=submit] .btn-icon {
font-size: 1.125rem;
}
.button.is-secondary,
button:not([class^=btn-toggle]).is-secondary,
input[type=button].is-secondary,
input[type=reset].is-secondary,
input[type=submit].is-secondary {
border-color: var(--color-100);
background-color: var(--color-100);
}
.button.is-secondary:hover,
button:not([class^=btn-toggle]).is-secondary:hover,
input[type=button].is-secondary:hover,
input[type=reset].is-secondary:hover,
input[type=submit].is-secondary:hover {
background-color: var(--color-200);
border-color: var(--color-200);
}
.button.is-primary,
button:not([class^=btn-toggle]).is-primary,
input[type=button].is-primary,
input[type=reset].is-primary,
input[type=submit].is-primary {
background-color: var(--color-600);
border-color: var(--color-600);
color: var(--color-50);
}
.button.is-primary:hover, .button.is-primary:focus,
button:not([class^=btn-toggle]).is-primary:hover,
button:not([class^=btn-toggle]).is-primary:focus,
input[type=button].is-primary:hover,
input[type=button].is-primary:focus,
input[type=reset].is-primary:hover,
input[type=reset].is-primary:focus,
input[type=submit].is-primary:hover,
input[type=submit].is-primary:focus {
background-color: var(--color-700);
border-color: var(--color-700);
color: var(--color-50);
}
.button.is-primary:active,
button:not([class^=btn-toggle]).is-primary:active,
input[type=button].is-primary:active,
input[type=reset].is-primary:active,
input[type=submit].is-primary:active {
background-color: var(--color-800);
border-color: var(--color-800);
color: var(--color-50);
}
.button.is-primary:disabled, .button.is-primary[aria-disabled=true],
button:not([class^=btn-toggle]).is-primary:disabled,
button:not([class^=btn-toggle]).is-primary[aria-disabled=true],
input[type=button].is-primary:disabled,
input[type=button].is-primary[aria-disabled=true],
input[type=reset].is-primary:disabled,
input[type=reset].is-primary[aria-disabled=true],
input[type=submit].is-primary:disabled,
input[type=submit].is-primary[aria-disabled=true] {
opacity: 0.5;
}
.button.is-primary.is-outline,
button:not([class^=btn-toggle]).is-primary.is-outline,
input[type=button].is-primary.is-outline,
input[type=reset].is-primary.is-outline,
input[type=submit].is-primary.is-outline {
background-color: transparent;
border-color: var(--color-300);
color: var(--color-600);
}
.button.is-primary.is-outline:hover, .button.is-primary.is-outline:focus,
button:not([class^=btn-toggle]).is-primary.is-outline:hover,
button:not([class^=btn-toggle]).is-primary.is-outline:focus,
input[type=button].is-primary.is-outline:hover,
input[type=button].is-primary.is-outline:focus,
input[type=reset].is-primary.is-outline:hover,
input[type=reset].is-primary.is-outline:focus,
input[type=submit].is-primary.is-outline:hover,
input[type=submit].is-primary.is-outline:focus {
background-color: var(--color-100);
border-color: var(--color-400);
color: var(--color-800);
}
.button.is-primary.is-outline:active,
button:not([class^=btn-toggle]).is-primary.is-outline:active,
input[type=button].is-primary.is-outline:active,
input[type=reset].is-primary.is-outline:active,
input[type=submit].is-primary.is-outline:active {
background-color: var(--color-200);
border-color: var(--color-500);
color: var(--color-900);
}
.button.is-accent,
button:not([class^=btn-toggle]).is-accent,
input[type=button].is-accent,
input[type=reset].is-accent,
input[type=submit].is-accent {
background-color: var(--color-accent);
border-color: var(--color-accent);
color: var(--color-50);
}
.button.is-accent:hover, .button.is-accent:focus,
button:not([class^=btn-toggle]).is-accent:hover,
button:not([class^=btn-toggle]).is-accent:focus,
input[type=button].is-accent:hover,
input[type=button].is-accent:focus,
input[type=reset].is-accent:hover,
input[type=reset].is-accent:focus,
input[type=submit].is-accent:hover,
input[type=submit].is-accent:focus {
background-color: color-mix(in srgb, var(--color-accent) 90%, black 10%);
border-color: color-mix(in srgb, var(--color-accent) 90%, black 10%);
color: var(--color-50);
}
.button.is-accent:active,
button:not([class^=btn-toggle]).is-accent:active,
input[type=button].is-accent:active,
input[type=reset].is-accent:active,
input[type=submit].is-accent:active {
background-color: color-mix(in srgb, var(--color-accent) 80%, black 20%);
border-color: color-mix(in srgb, var(--color-accent) 80%, black 20%);
color: var(--color-50);
}
.button.is-accent:disabled, .button.is-accent[aria-disabled=true],
button:not([class^=btn-toggle]).is-accent:disabled,
button:not([class^=btn-toggle]).is-accent[aria-disabled=true],
input[type=button].is-accent:disabled,
input[type=button].is-accent[aria-disabled=true],
input[type=reset].is-accent:disabled,
input[type=reset].is-accent[aria-disabled=true],
input[type=submit].is-accent:disabled,
input[type=submit].is-accent[aria-disabled=true] {
opacity: 0.5;
}
.button.is-accent.is-outline,
button:not([class^=btn-toggle]).is-accent.is-outline,
input[type=button].is-accent.is-outline,
input[type=reset].is-accent.is-outline,
input[type=submit].is-accent.is-outline {
background-color: transparent;
border-color: color-mix(in srgb, var(--color-accent) 70%, white 30%);
color: var(--color-accent);
}
.button.is-accent.is-outline:hover, .button.is-accent.is-outline:focus,
button:not([class^=btn-toggle]).is-accent.is-outline:hover,
button:not([class^=btn-toggle]).is-accent.is-outline:focus,
input[type=button].is-accent.is-outline:hover,
input[type=button].is-accent.is-outline:focus,
input[type=reset].is-accent.is-outline:hover,
input[type=reset].is-accent.is-outline:focus,
input[type=submit].is-accent.is-outline:hover,
input[type=submit].is-accent.is-outline:focus {
background-color: color-mix(in srgb, var(--color-accent) 10%, white 90%);
border-color: color-mix(in srgb, var(--color-accent) 60%, white 40%);
color: color-mix(in srgb, var(--color-accent) 80%, black 20%);
}
.button.is-accent.is-outline:active,
button:not([class^=btn-toggle]).is-accent.is-outline:active,
input[type=button].is-accent.is-outline:active,
input[type=reset].is-accent.is-outline:active,
input[type=submit].is-accent.is-outline:active {
background-color: color-mix(in srgb, var(--color-accent) 60%, white 40%);
border-color: color-mix(in srgb, var(--color-accent) 90%, white 10%);
color: color-mix(in srgb, var(--color-accent) 70%, black 30%);
}
.button.is-action,
button:not([class^=btn-toggle]).is-action,
input[type=button].is-action,
input[type=reset].is-action,
input[type=submit].is-action {
max-height: 2rem;
font-size: 1.125rem;
}
input[type=reset] {
background-color: var(--color-900);
color: var(--color-200);
border-color: var(--color-900);
}
input[type=reset]:hover {
background-color: var(--color-800);
}
[type=text],
input:where(:not([type])),
[type=email],
[type=url],
[type=password],
[type=number],
[type=date],
[type=datetime-local],
[type=month],
[type=search],
[type=tel],
[type=time],
[type=week],
[multiple],
textarea,
select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-color: #fff;
border: 0.0625rem solid var(--color-300);
border-radius: var(--radius-small);
padding-block: calc(0.5rem - 0.0625rem);
padding-inline: 0.75rem;
font-size: 0.875rem;
line-height: 1.5rem;
color: var(--color-900);
background: var(--color-50);
}
[type=text]:focus,
input:where(:not([type])):focus,
[type=email]:focus,
[type=url]:focus,
[type=password]:focus,
[type=number]:focus,
[type=date]:focus,
[type=datetime-local]:focus,
[type=month]:focus,
[type=search]:focus,
[type=tel]:focus,
[type=time]:focus,
[type=week]:focus,
[multiple]:focus,
textarea:focus,
select:focus {
outline: 2px solid var(--color-200);
outline-offset: 2px;
}
input::-moz-placeholder, textarea::-moz-placeholder {
color: var(--color-500);
opacity: 1;
}
input::placeholder, textarea::placeholder {
color: var(--color-500);
opacity: 1;
}
::-webkit-datetime-edit-fields-wrapper {
padding: 0;
}
::-webkit-date-and-time-value {
min-height: 1.5rem;
}
::-webkit-date-and-time-value {
text-align: inherit;
}
::-webkit-datetime-edit {
display: inline-flex;
}
::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {
padding-block: 0;
}
select {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='oklch(55.1%25 0.027 264.364)' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
background-position: right 0.5rem center;
background-repeat: no-repeat;
background-size: 1.5rem 1.5rem;
padding-inline-end: 2.5rem;
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
[multiple], [size]:where(select:not([size="1"])) {
background-image: initial;
background-position: initial;
background-repeat: unset;
background-size: initial;
padding-inline-end: 0.75rem;
-webkit-print-color-adjust: unset;
print-color-adjust: unset;
}
[type=checkbox], [type=radio] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
padding: 0;
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
display: inline-block;
vertical-align: middle;
background-origin: border-box;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
flex-shrink: 0;
height: 1rem;
width: 1rem;
color: var(--color-900);
background-color: var(--scheme);
border-color: var(--color-300);
border-width: 0.0625rem;
}
[type=checkbox] {
border-radius: var(--radius-small);
}
[type=radio] {
border-radius: 100%;
}
[type=checkbox]:focus, [type=radio]:focus {
outline: 0.125rem solid var(--color-200);
outline-offset: 0.125rem;
}
[type=checkbox]:checked, [type=radio]:checked {
border-color: transparent;
background-color: currentColor;
background-size: 100% 100%;
background-position: center;
background-repeat: no-repeat;
}
[type=checkbox]:checked {
background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
}
@media (forced-colors: active) {
[type=checkbox]:checked {
-webkit-appearance: auto;
-moz-appearance: auto;
appearance: auto;
}
}
[type=radio]:checked {
background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
}
@media (forced-colors: active) {
[type=radio]:checked {
-webkit-appearance: auto;
-moz-appearance: auto;
appearance: auto;
}
}
[type=checkbox]:checked:hover, [type=checkbox]:checked:focus, [type=radio]:checked:hover, [type=radio]:checked:focus {
border-color: transparent;
background-color: currentColor;
}
[type=checkbox]:indeterminate {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3e%3c/svg%3e");
border-color: transparent;
background-color: currentColor;
background-size: 100% 100%;
background-position: center;
background-repeat: no-repeat;
}
@media (forced-colors: active) {
[type=checkbox]:indeterminate {
-webkit-appearance: auto;
-moz-appearance: auto;
appearance: auto;
}
}
[type=checkbox]:indeterminate:hover, [type=checkbox]:indeterminate:focus {
border-color: transparent;
background-color: currentColor;
}
[type=file] {
background: unset;
border-color: inherit;
border-width: 0;
border-radius: 0;
padding: 0;
font-size: unset;
line-height: inherit;
}
[type=file]:focus {
outline: 0.125rem solid ButtonText;
outline: 0.125rem auto -webkit-focus-ring-color;
}
body.menu-open .site-box .site-sidebar {
display: flex;
}
body.menu-open .site-box .main-box {
display: none;
}
body.toggle-posts .sidebar-posts {
display: flex;
}
body.toggle-posts .main-box {
display: none;
}
body.toggle-posts .search-box {
display: block;
}
@media screen and (min-width: 90rem) {
body.toggle-posts .site-box {
grid-template-columns: 20rem minmax(20rem, 1fr);
}
body.toggle-posts .actions-box {
width: calc(100% - 20rem - 0.0625rem);
}
body.toggle-posts .sidebar-posts {
display: none;
}
body.toggle-posts .switcher .mb-icon {
transform: scale(-1);
}
body.toggle-posts .main-box {
display: block;
border-inline-start: none;
}
}
.site {
position: relative;
display: grid;
grid-template-rows: auto 1fr auto;
}
.site-header {
--min-padding: var(--site-padding-inline);
--max-padding: calc((100vw - var(--site-width)) / 2);
padding-inline: clamp(var(--min-padding), var(--max-padding), var(--max-padding));
width: 100%;
border-block-end: 0.0625rem solid var(--color-300);
height: var(--site-header);
display: flex;
align-items: center;
-moz-column-gap: 1.5rem;
column-gap: 1.5rem;
background-color: var(--scheme);
z-index: 1;
justify-content: space-between;
}
.site-header .branding {
line-height: 1;
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 1.25rem;
font-weight: 700;
color: var(--color-900);
text-decoration: none;
}
.site-header .branding .site-logo img {
max-height: 2rem;
width: auto;
}
.site-header .menu-toggle {
width: 2rem;
height: 2rem;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
border: none;
font-size: 1.5rem;
}
.site-header .menu-toggle .mb-icon-menu {
display: block;
}
.site-header .menu-toggle .mb-icon-plus {
display: none;
}
.site-header .menu-toggle[aria-expanded=true] .mb-icon-menu {
display: none;
}
.site-header .menu-toggle[aria-expanded=true] .mb-icon-plus {
display: block;
transform: rotate(45deg);
}
@media screen and (min-width: 60rem) {
.site-header {
position: absolute;
overflow: hidden;
clip: rect(1px, 1px, 1px, 1px);
width: 1px;
height: 1px;
}
}
.site-footer {
margin-block-start: auto;
position: relative;
border-block-start: 0.0625rem solid var(--color-300);
padding-block-start: 1rem;
padding-inline-end: 1rem;
}
.site-footer .footer-buttons .button:first-child {
border-radius: 0 0 0 var(--radius);
}
.site-footer .footer-buttons .button:last-child {
border-radius: 0 0 var(--radius) 0;
}
.site-footer .footer-buttons .button:not(:first-child):not(:last-child) {
border-radius: 0;
}
.site-footer .footer-buttons .button:first-child:last-child {
border-radius: 0 0 var(--radius) var(--radius);
}
.site-footer:has(.footer-buttons) .footer-box {
border-radius: var(--radius) var(--radius) 0 0;
}
.site-footer .footer-buttons {
gap: 0;
}
.site-footer .site-logo {
max-height: 5rem;
width: 5rem;
}
.site-footer .site-logo svg,
.site-footer .site-logo img {
max-height: 5rem;
width: auto;
}
.footer-box {
display: flex;
gap: 0.75rem;
background: var(--color-50);
padding-block: 1rem 0.5rem;
padding-inline: 1rem;
align-items: center;
border-radius: var(--radius);
}
.footer-info {
flex: 1;
display: flex;
flex-direction: column;
gap: 0.25rem;
overflow: hidden;
}
.footer-blog-name {
font-size: 1rem;
font-weight: 700;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 100%;
}
.footer-text {
font-size: 0.825rem;
flex: 1;
font-weight: 400;
line-clamp: 2;
overflow: hidden;
display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.footer-buttons {
display: flex;
width: 100%;
gap: 0.5rem;
justify-content: space-between;
}
.footer-buttons .menu-icon {
font-size: 1.125rem;
height: 1.125rem;
width: 1.125rem;
}
.footer-buttons .button {
width: 100%;
}
.site-box {
display: grid;
grid-template-columns: minmax(20rem, 1fr);
container-name: site-box;
container-type: inline-size;
}
@media screen and (min-width: 60rem) {
.site-box {
grid-template-columns: 20rem minmax(20rem, 1fr);
}
}
@media screen and (min-width: 90rem) {
.site-box {
grid-template-columns: 20rem 30rem minmax(20rem, 1fr);
}
}
@media screen and (min-width: 60rem) {
.main-box:has(.actions-box) {
padding-block-start: calc(var(--actions-box-hight) + var(--block-spacing));
}
}
.site-sidebar {
height: calc(100vh - var(--site-header));
border-inline-end: 0.0625rem solid var(--color-300);
padding-block: 1rem;
padding-inline-start: 1rem;
display: none;
flex-direction: column;
position: sticky;
top: var(--site-header);
}
@media screen and (min-width: 60rem) {
.site-sidebar {
display: flex;
}
}
.site-sidebar .navigation {
height: 100%;
overflow-y: auto;
overflow-x: hidden;
scrollbar-gutter: stable;
scrollbar-width: thin;
scrollbar-color: rgba(0, 0, 0, 0.25) rgba(0, 0, 0, 0);
}
@media screen and (min-width: 60rem) {
.site-sidebar .navigation {
overflow-y: hidden;
}
.site-sidebar .navigation:hover {
overflow-y: auto;
}
}
@media screen and (min-width: 90rem) {
.site-sidebar .navigation {
-webkit-mask-image: linear-gradient(180deg, #000 0 calc(100% - 2.5rem), #0000);
mask-image: linear-gradient(180deg, #000 0 calc(100% - 2.5rem), #0000);
}
}
.site-sidebar .navigation::-webkit-scrollbar {
width: 6px;
}
.site-sidebar .navigation::-webkit-scrollbar-track {
background: rgba(0, 0, 0, 0);
opacity: 0;
}
.site-sidebar .navigation::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, 0);
border-radius: 10px;
}
.site-sidebar .site-menu {
display: flex;
flex-direction: column;
margin-inline-end: 5px;
gap: 0.5rem;
}
.site-sidebar .site-menu .sub-menu {
padding-block-end: 0.5rem;
padding-inline: 0.5rem 0;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.site-sidebar .site-menu .sub-menu .sub-menu {
padding-block-end: 0;
}
.site-sidebar .site-menu .sub-menu .current-menu-item a {
margin-inline-end: 0.5rem;
}
.site-sidebar .site-menu a {
display: flex;
color: var(--color-700);
align-items: center;
gap: 0.75rem;
transition: all var(--transition);
padding: 0.5rem 0.75rem;
border-radius: var(--radius-small);
word-wrap: break-word;
overflow-wrap: break-word;
word-break: break-all;
-webkit-hyphens: auto;
hyphens: auto;
}
.site-sidebar .site-menu a:hover {
font-weight: 700;
background-color: var(--color-50);
}
.site-sidebar .site-menu a .count {
margin-inline-start: auto;
white-space: nowrap;
}
.site-sidebar .site-menu .menu-icon {
display: flex;
width: 1.5rem;
height: 1.5rem;
align-items: center;
justify-content: center;
font-size: 1.25rem;
}
.site-sidebar .site-menu .btn-toggle {
display: flex;
color: var(--color-700);
align-items: center;
gap: 0.75rem;
padding: 0.5rem 0.75rem;
transition: all var(--transition);
width: 100%;
cursor: pointer;
border-radius: var(--radius-small);
}
.site-sidebar .site-menu .btn-toggle .mb-icon {
rotate: 90deg;
font-size: 0.75rem;
margin-inline-start: auto;
}
.site-sidebar .site-menu .btn-toggle[aria-expanded=true] {
font-weight: 700;
background-color: var(--color-50);
}
.site-sidebar .site-menu .btn-toggle[aria-expanded=true] .mb-icon {
rotate: -90deg;
}
.site-sidebar .site-menu .btn-toggle:hover {
font-weight: 700;
background-color: var(--color-50);
}
.site-sidebar .site-menu .current-menu-item a {
background-color: var(--color-900);
color: var(--color-100);
font-weight: 700;
border-radius: var(--radius-small);
}
.site-sidebar .site-menu li.current-menu-ancestor,
.site-sidebar .site-menu li.current-menu-parent,
.site-sidebar .site-menu li.is-open {
background-color: var(--color-50);
border-radius: var(--radius);
}
.site-sidebar .site-menu li.current-menu-ancestor .btn-toggle,
.site-sidebar .site-menu li.current-menu-parent .btn-toggle,
.site-sidebar .site-menu li.is-open .btn-toggle {
background: none;
}
.sidebar-posts {
height: calc(100vh - var(--site-header));
border-inline-end: 0.0625rem solid var(--color-300);
padding-block: 1rem;
padding-inline-start: 1rem;
display: none;
flex-direction: column;
position: sticky;
top: var(--site-header);
}
@media screen and (min-width: 90rem) {
.sidebar-posts {
display: flex;
}
.sidebar-posts .switcher {
display: none;
}
}
.sidebar-posts .footer-buttons {
margin-block-start: 1.5rem;
padding-inline-end: 1rem;
}
.posts-box {
height: 100%;
overflow-y: auto;
overflow-x: hidden;
scrollbar-gutter: stable;
scrollbar-width: thin;
scrollbar-color: rgba(0, 0, 0, 0.25) rgba(0, 0, 0, 0);
}
@media screen and (min-width: 60rem) {
.posts-box {
overflow-y: hidden;
}
.posts-box:hover {
overflow-y: auto;
}
}
@media screen and (min-width: 90rem) {
.posts-box {
-webkit-mask-image: linear-gradient(180deg, #000 0 calc(100% - 2.5rem), #0000);
mask-image: linear-gradient(180deg, #000 0 calc(100% - 2.5rem), #0000);
}
}
.posts-box::-webkit-scrollbar {
width: 6px;
}
.posts-box::-webkit-scrollbar-track {
background: rgba(0, 0, 0, 0);
opacity: 0;
}
.posts-box::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, 0);
border-radius: 10px;
}
.post-list {
padding-inline: 1rem;
padding-block-end: 1rem;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.post-list .post-item:last-child {
border-bottom: none;
}
.post-item {
position: relative;
display: grid;
grid-template-areas: "post-list-title post-list-icon" "post-list-description post-list-icon";
grid-template-columns: 1fr auto;
-moz-column-gap: 0.5rem;
column-gap: 0.5rem;
align-items: center;
padding: 0.5rem 1rem;
line-height: 1.55;
transition: all var(--transition);
border-radius: var(--radius);
}
.post-item.has-date {
grid-template-areas: "post-list-title post-list-icon" "post-list-time post-list-icon" "post-list-description post-list-icon";
}
.post-item:after {
content: "";
position: absolute;
inset: auto 0 0 0;
width: 100%;
height: 1px;
background-color: var(--color-100);
}
.post-item:hover {
font-weight: 700;
background-color: var(--color-100);
}
.post-item:hover .post-title {
color: var(--color-950);
}
.post-item:hover .post-description {
color: var(--color-700);
}
.post-item:hover:after {
display: none;
}
.post-item.is-current {
background-color: var(--color-100);
border-radius: var(--radius-small);
}
.post-item.is-current .post-title {
font-weight: 700;
color: var(--color-950);
}
.post-item.is-current .post-description {
color: var(--color-700);
}
.post-item.is-current:after {
display: none;
}
.post-item.sticky:before {
content: "";
position: absolute;
inset: 0 auto 0 0;
width: 0.5rem;
height: 100%;
background-color: var(--color-100);
border-radius: var(--radius-small) 0 0 0;
}
.post-item.sticky.is-current:before, .post-item.sticky:hover:before {
border-radius: var(--radius-small) 0 0 var(--radius-small);
}
.post-item .post-badge .mb-icon {
position: absolute;
inset: 0.875rem 1.25rem auto auto;
height: 100%;
font-size: 0.75rem;
}
.post-link {
position: absolute;
inset: 0 0 0 0;
width: 100%;
height: 100%;
}
.post-title {
grid-area: post-list-title;
color: var(--color-900);
word-wrap: break-word;
overflow-wrap: break-word;
word-break: break-all;
-webkit-hyphens: auto;
hyphens: auto;
}
.post-description {
grid-area: post-list-description;
color: var(--color-500);
line-clamp: 2;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
font-size: 0.875rem;
}
.post-icon {
grid-area: post-list-icon;
}
.post-time {
grid-area: post-list-time;
font-weight: 400;
font-size: 0.75rem;
color: var(--color-400);
}
.archive-posts .post-item,
.archive-posts .post-list {
padding-inline: 0;
}
@media screen and (min-width: 90rem) {
.archive-posts {
display: none !important;
}
}
.site-logo .logo-dark {
display: none;
}
body.theme-dark .site-logo .logo-light {
display: none;
}
body.theme-dark .site-logo .logo-dark {
display: block;
}
.toggle {
position: absolute;
opacity: 0;
width: 0;
height: 0;
margin: 0;
padding: 0;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.switcher .mb-arrow-bar-to-left {
transition: all var(--transition);
}
.switcher .toggle-posts-text {
font-size: 0.875rem;
display: none;
}
@media screen and (min-width: 90rem) {
.switcher .toggle-posts-text {
display: none;
}
}
.dropdown {
position: relative;
}
.dropdown.is-open .dropdown-list {
display: block;
z-index: 1;
}
.dropdown-button {
position: relative;
}
.dropdown-list {
position: absolute;
inset: auto 0 auto auto;
display: none;
width: -moz-max-content;
width: max-content;
min-width: 10rem;
background-color: var(--scheme);
padding: 0.25rem;
border: 1px solid var(--color-300);
border-radius: var(--radius-small);
margin-block-start: 0.875rem;
}
.dropdown-list ul {
padding-inline-start: 0.5rem;
}
.dropdown-link {
padding: 0.25rem 0.5rem;
display: flex;
gap: 0.5rem;
align-items: center;
transition: background-color var(--transition);
font-size: 0.75rem;
color: var(--color-600);
border: none;
background: transparent;
box-shadow: none;
white-space: nowrap;
max-width: 24ch;
box-sizing: border-box;
}
.dropdown-link .link-icon {
font-size: 0.875rem;
width: 1rem;
}
.dropdown-link:hover {
font-weight: 700;
background: transparent;
box-shadow: none;
}
.search-section {
display: flex;
justify-content: space-between;
align-items: center;
gap: 0.5em;
margin-inline: 1rem;
border-bottom: 1px solid var(--color-300);
padding-block-end: calc(0.5rem - 1px);
margin-block-end: var(--block-spacing);
}
.search-box {
flex: 1;
padding-inline: 1rem;
}
@media screen and (min-width: 90rem) {
.search-box {
display: none;
}
}
.search-sorting {
border: none;
background-color: var(--color-50);
border-radius: 0;
}
.search-form {
position: relative;
flex: 1;
}
.search-form .search-button,
.search-form .search-icon {
position: absolute;
display: flex;
height: 2rem;
width: 2rem;
align-items: center;
justify-content: center;
}
.search-form .search-button {
inset: 0 0 auto auto;
background-color: transparent;
padding: 0;
border: none;
border-radius: 0;
}
.search-form .search-button:hover {
box-shadow: none;
background-color: transparent;
}
.search-field {
width: 100%;
border: none;
background-color: var(--color-50);
font-size: 0.875rem;
padding-block: 0;
color: var(--color-900);
line-height: 2rem;
-webkit-appearance: textfield;
-moz-appearance: none;
appearance: none;
padding-inline: 2rem;
}
.search-field::-moz-placeholder {
font-size: 0.875rem;
}
.search-field::placeholder {
font-size: 0.875rem;
}
.search-field:focus {
outline: 2px solid var(--color-200);
outline-offset: 2px;
}
.search-field::-webkit-search-cancel-button, .search-field::-webkit-search-decoration {
-webkit-appearance: none;
}
.search-homepage {
border: none;
padding: 0;
width: 100%;
}
article.section-box + article.section-box {
margin-block-start: 3rem;
}
.article-heading {
background-color: var(--color-100);
padding: 1rem;
display: flex;
flex-direction: column;
gap: 0.5rem;
border-block: 1px solid var(--color-300);
}
.article-title {
font-size: 1.25rem;
}
.article-description {
color: var(--color-500);
} .page-content {
padding: 1rem;
display: flex;
flex-direction: column;
gap: 1rem;
max-width: 90rem;
margin-inline: auto;
}
.entry-header,
.page-header {
display: flex;
flex-direction: column;
gap: var(--block-spacing);
}
.page-title,
.entry-title {
color: var(--color-900);
font-weight: 800;
font-size: 2.25rem;
line-height: 1.1111111;
overflow-wrap: break-word;
}
.entry-summary {
color: var(--color-500);
font-size: 1.25em;
line-height: 1.6;
}
.attachment-post-thumbnail {
border-radius: var(--radius);
}
.entry-footer {
display: grid;
gap: 1rem;
}
@media screen and (min-width: 40rem) {
.entry-footer {
grid-template-columns: repeat(2, minmax(300px, 1fr));
}
}
.footer-card {
display: grid;
grid-template-areas: "article-card-icon article-card-title" "article-card-icon article-card-content";
background-color: var(--color-100);
padding: 1rem;
grid-template-columns: auto 1fr;
grid-template-rows: auto 1fr;
-moz-column-gap: 1rem;
column-gap: 1rem;
row-gap: 0.25rem;
border-radius: var(--radius);
}
.footer-card.is-full {
grid-column: span 2;
}
.footer-card .icon-e-delete {
display: none;
}
.footer-card:has(#more-posts:checked) .icon-e-delete {
display: block;
}
.footer-card:has(#more-posts:checked) .icon-e-add {
display: none;
}
.footer-card:has(#more-posts:checked) .relevant-articles li {
display: block;
}
.card-icon {
grid-area: article-card-icon;
font-size: 1.125rem;
}
.card-title {
grid-area: article-card-title;
font-size: 1rem;
font-weight: 600;
display: flex;
justify-content: space-between;
align-items: center;
word-wrap: break-word;
overflow-wrap: break-word;
word-break: break-all;
-webkit-hyphens: auto;
hyphens: auto;
}
.card-title .switcher {
cursor: pointer;
}
.card-content {
grid-area: article-card-content;
}
.card-content a {
color: var(--color-600);
transition: all var(--transition);
}
.card-content a:hover {
color: var(--color-800);
font-weight: 700;
}
.relevant-articles li:not(:nth-child(-n+1)) {
display: none;
}
.entry-content {
color: var(--color-700);
font-size: 1rem;
line-height: 1.75;
}
.entry-content :where(p) {
margin-top: 1.25em;
margin-bottom: 1.25em;
}
.entry-content :where(a:not([class])) {
color: var(--color-900);
text-decoration: underline;
text-underline-offset: 2px;
text-decoration-thickness: 2px;
font-weight: 500;
}
.entry-content :where(a:not([class])):hover {
font-weight: 700;
}
.entry-content :where(strong) {
color: var(--color-900);
font-weight: 600;
}
.entry-content :where(a strong) {
color: inherit;
}
.entry-content :where(blockquote strong) {
color: inherit;
}
.entry-content :where(thead th strong) {
color: inherit;
}
.entry-content :where(ol) {
list-style-type: decimal;
margin-top: 1.25em;
margin-bottom: 1.25em;
padding-inline-start: 1.625em;
}
.entry-content :where(ol[type="A"]) {
list-style-type: upper-alpha;
}
.entry-content :where(ol[type="a"]) {
list-style-type: lower-alpha;
}
.entry-content :where(ol[type="I"]) {
list-style-type: upper-roman;
}
.entry-content :where(ol[type="i"]) {
list-style-type: lower-roman;
}
.entry-content :where(ol[type="1"]) {
list-style-type: decimal;
}
.entry-content :where(ul) {
list-style-type: disc;
margin-top: 1.25em;
margin-bottom: 1.25em;
padding-inline-start: 1.625em;
}
.entry-content :where(ol > li)::marker {
font-weight: 400;
color: var(--color-500);
}
.entry-content :where(ul > li)::marker {
color: var(--color-300);
}
.entry-content :where(dt) {
color: var(--color-900);
font-weight: 600;
margin-top: 1.25em;
}
.entry-content :where(hr) {
border-block-start: 1px solid var(--color-200);
margin-block: 3rem;
}
.entry-content :where(blockquote) {
font-weight: 500;
font-style: italic;
color: var(--color-900);
border-inline-start-width: 0.25rem;
border-inline-start-color: var(--color-200);
quotes: "“" "”" "‘" "’";
margin-block: 1.6em;
padding-inline-start: 1em;
}
.entry-content :where(blockquote p:first-of-type)::before {
content: open-quote;
}
.entry-content :where(blockquote p:last-of-type)::after {
content: close-quote;
}
.entry-content :target {
background: var(--color-100);
transition: background 0.5s ease;
margin-inline: -1rem;
padding-inline: 1rem;
border-radius: var(--radius-small);
animation: target-fade 2s ease forwards;
}
.entry-content :where(mark) {
background: var(--color-100);
padding: 0 0.2em;
border-radius: var(--radius-small);
}
.entry-content :where(h1,h2,h3,h4,h5,h6) {
overflow-wrap: break-word;
}
.entry-content :where(h1,h2,h3,h4,h5,h6)[id] {
scroll-margin-top: 6rem;
}
.entry-content :where(h1) {
color: var(--color-900);
font-weight: 800;
font-size: 2.25em;
margin-top: 0;
margin-bottom: 0.8888889em;
line-height: 1.1111111;
}
.entry-content :where(h1 strong) {
font-weight: 900;
color: inherit;
}
.entry-content :where(h2) {
color: var(--color-900);
font-weight: 700;
font-size: 1.5em;
margin-top: 2em;
margin-bottom: 1em;
line-height: 1.3333333;
}
.entry-content :where(h2 strong) {
font-weight: 800;
color: inherit;
}
.entry-content :where(h3) {
color: var(--color-900);
font-weight: 600;
font-size: 1.25em;
margin-top: 1.6em;
margin-bottom: 0.6em;
line-height: 1.6;
}
.entry-content :where(h3 strong) {
font-weight: 700;
color: inherit;
}
.entry-content :where(h4) {
color: var(--color-900);
font-weight: 600;
margin-top: 1.5em;
margin-bottom: 0.5em;
line-height: 1.5;
}
.entry-content :where(h4 strong) {
font-weight: 700;
color: inherit;
}
.entry-content :where(img) {
margin-top: 2em;
margin-bottom: 2em;
}
.entry-content :where(picture) {
display: block;
margin-top: 2em;
margin-bottom: 2em;
}
.entry-content :where(video) {
margin-top: 2em;
margin-bottom: 2em;
}
.entry-content :where(kbd) {
font-weight: 500;
font-family: inherit;
color: var(--color-900);
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 3px 0 rgba(0, 0, 0, 0.1);
font-size: 0.875em;
border-radius: 0.3125rem;
padding-top: 0.1875em;
padding-inline-end: 0.375em;
padding-bottom: 0.1875em;
padding-inline-start: 0.375em;
}
.entry-content :where(code) {
color: var(--color-900);
font-weight: 600;
font-size: 0.875em;
}
.entry-content :where(code)::before {
content: "`";
}
.entry-content :where(code)::after {
content: "`";
}
.entry-content :where(a code) {
color: inherit;
}
.entry-content :where(h1 code) {
color: inherit;
}
.entry-content :where(h2 code) {
color: inherit;
font-size: 0.875em;
}
.entry-content :where(h3 code) {
color: inherit;
font-size: 0.9em;
}
.entry-content :where(h4 code) {
color: inherit;
}
.entry-content :where(blockquote code) {
color: inherit;
}
.entry-content :where(thead th code) {
color: inherit;
}
.entry-content :where(pre) {
color: var(--color-200);
background-color: var(--color-800);
overflow-x: auto;
font-weight: 400;
font-size: 0.875em;
line-height: 1.7142857;
margin-top: 1.7142857em;
margin-bottom: 1.7142857em;
border-radius: var(--radius);
padding-top: 0.8571429em;
padding-inline-end: 1.1428571em;
padding-bottom: 0.8571429em;
padding-inline-start: 1.1428571em;
}
.entry-content :where(pre code) {
background-color: transparent;
border-width: 0;
border-radius: 0;
padding: 0;
font-weight: inherit;
color: inherit;
font-size: inherit;
font-family: inherit;
line-height: inherit;
}
.entry-content :where(pre code)::before {
content: none;
}
.entry-content :where(pre code)::after {
content: none;
}
.entry-content :where(table) {
width: 100%;
table-layout: auto;
margin-top: 2em;
margin-bottom: 2em;
font-size: 0.875em;
line-height: 1.7142857;
}
.entry-content :where(thead) {
border-bottom-width: 1px;
border-bottom-color: var(--color-300);
}
.entry-content :where(thead th) {
color: var(--color-900);
font-weight: 600;
vertical-align: bottom;
padding-inline-end: 0.5714286em;
padding-bottom: 0.5714286em;
padding-inline-start: 0.5714286em;
}
.entry-content :where(tbody tr) {
border-bottom-width: 1px;
border-bottom-color: var(--color-200);
}
.entry-content :where(tbody tr:last-child) {
border-bottom-width: 0;
}
.entry-content :where(tbody td) {
vertical-align: baseline;
}
.entry-content :where(tfoot) {
border-top-width: 1px;
border-top-color: var(--color-300);
}
.entry-content :where(tfoot td) {
vertical-align: top;
}
.entry-content :where(th, td) {
text-align: start;
}
.entry-content :where(figure > *) {
margin-top: 0;
margin-bottom: 0;
border-radius: var(--radius);
}
.entry-content :where(figcaption) {
color: var(--color-500);
font-size: 0.875em;
line-height: 1.4285714;
margin-top: 0.8571429em;
}
.entry-content :where(picture > img) {
margin-top: 0;
margin-bottom: 0;
}
.entry-content :where(li) {
margin-top: 0.5em;
margin-bottom: 0.5em;
}
.entry-content :where(ol > li) {
padding-inline-start: 0.375em;
}
.entry-content :where(ul > li) {
padding-inline-start: 0.375em;
}
.entry-content :where(.prose > ul > li p) {
margin-top: 0.75em;
margin-bottom: 0.75em;
}
.entry-content :where(.prose > ul > li > p:first-child) {
margin-top: 1.25em;
}
.entry-content :where(.prose > ul > li > p:last-child) {
margin-bottom: 1.25em;
}
.entry-content :where(.prose > ol > li > p:first-child) {
margin-top: 1.25em;
}
.entry-content :where(.prose > ol > li > p:last-child) {
margin-bottom: 1.25em;
}
.entry-content :where(ul ul, ul ol, ol ul, ol ol) {
margin-top: 0.75em;
margin-bottom: 0.75em;
}
.entry-content :where(dl) {
margin-top: 1.25em;
margin-bottom: 1.25em;
}
.entry-content :where(dd) {
margin-top: 0.5em;
padding-inline-start: 1.625em;
}
.entry-content :where(hr + *) {
margin-top: 0;
}
.entry-content :where(h2 + *) {
margin-top: 0;
}
.entry-content :where(h3 + *) {
margin-top: 0;
}
.entry-content :where(h4 + *) {
margin-top: 0;
}
.entry-content :where(thead th:first-child) {
padding-inline-start: 0;
}
.entry-content :where(thead th:last-child) {
padding-inline-end: 0;
}
.entry-content :where(tbody td, tfoot td) {
padding-top: 0.5714286em;
padding-inline-end: 0.5714286em;
padding-bottom: 0.5714286em;
padding-inline-start: 0.5714286em;
}
.entry-content :where(tbody td:first-child, tfoot td:first-child) {
padding-inline-start: 0;
}
.entry-content :where(tbody td:last-child, tfoot td:last-child) {
padding-inline-end: 0;
}
.entry-content :where(figure) {
margin-top: 2em;
margin-bottom: 2em;
}
.entry-content :where(.prose > :first-child) {
margin-top: 0;
}
.entry-content :where(.prose > :last-child) {
margin-bottom: 0;
}
@keyframes target-fade {
0% {
background: var(--color-200);
}
100% {
background: transparent;
}
}
.has-tooltip {
position: relative;
}
.has-tooltip::before, .has-tooltip::after {
color: var(--scheme);
font-size: 0.75rem;
opacity: 0;
pointer-events: none;
text-align: center;
}
.has-tooltip::before {
position: absolute;
top: 0;
left: 50%;
background-color: var(--color-900);
color: var(--scheme);
content: attr(data-tooltip);
padding: 0.5rem 0.75rem;
text-transform: none;
transition: all 0.5s ease;
width: -moz-max-content;
width: max-content;
transform: translateY(calc(-100% - 7px)) translateX(-50%);
word-wrap: break-word;
white-space: break-spaces;
line-height: 1.5;
text-align: left;
border-radius: var(--radius-small);
}
.has-tooltip::after {
position: absolute;
top: -7px;
left: 50%;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid var(--color-900);
content: " ";
font-size: 0;
line-height: 0;
margin-left: -5px;
width: 0;
transform: translateX(-50%);
}
.has-tooltip:focus-visible::before, .has-tooltip:focus-visible::after, .has-tooltip:focus::before, .has-tooltip:focus::after, .has-tooltip:hover::before, .has-tooltip:hover::after {
opacity: 1;
transition: all 0.75s ease;
}
.has-tooltip.on-right::before {
top: 50%;
left: 100%;
transform: translateY(-50%) translateX(4px);
}
.has-tooltip.on-right::after {
top: 50%;
left: calc(100% + 2px);
rotate: 90deg;
transform: translateX(calc(-50% + 2.5px));
}
.has-tooltip.on-left::before {
top: 50%;
left: -2px;
transform: translateY(-50%) translateX(-100%);
}
.has-tooltip.on-left::after {
top: 50%;
left: 0;
rotate: -90deg;
transform: translateX(calc(-50% + 7px));
}
.has-tooltip.on-bottom::before {
top: unset;
bottom: 0;
transform: translateY(calc(100% + 7px)) translateX(-50%);
}
.has-tooltip.on-bottom::after {
top: unset;
bottom: -7px;
rotate: 180deg;
}
.navigation.pagination {
margin-block: var(--block-spacing);
}
.page-links,
.pagination {
display: flex;
justify-content: center;
font-size: 0.875rem;
gap: 0.125rem;
flex-wrap: wrap;
padding: 0;
}
.post-page-numbers,
.page-numbers {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
border-radius: var(--radius-small);
padding: 0.25rem 0.5rem;
color: var(--color-600);
transition: all var(--transition);
font-size: 1.125rem;
box-shadow: var(--shadow-small);
text-wrap: nowrap;
white-space: nowrap;
text-decoration: none;
border-width: 0.0625em;
border-style: solid;
border-color: transparent;
width: -moz-fit-content;
width: fit-content;
height: 2rem;
}
.post-page-numbers.current,
.page-numbers.current {
font-weight: 700;
text-decoration: underline;
text-underline-offset: 0.25rem;
}
.post-page-numbers.current:hover,
.page-numbers.current:hover {
background-color: transparent;
}
.post-page-numbers.dots,
.page-numbers.dots {
padding: 0;
}
.post-page-numbers.next:hover, .post-page-numbers.prev:hover,
.page-numbers.next:hover,
.page-numbers.prev:hover {
background-color: var(--color-50);
}
ul.page-numbers {
padding: 0;
}
.post-navigation .nav-links {
max-width: 50rem;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
gap: 0.25rem;
margin-block-start: var(--block-spacing);
margin-inline: auto;
}
.post-navigation .nav-links .nav-next a,
.post-navigation .nav-links .nav-previous a {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.4em;
border-radius: var(--radius-small);
padding: 0.4375em 0.9375em;
color: var(--color-600);
transition: all var(--transition);
font-size: inherit;
box-shadow: var(--shadow-small);
text-wrap: nowrap;
white-space: nowrap;
text-decoration: none;
border-width: 0.0625em;
border-style: solid;
border-color: transparent;
}
.post-navigation .nav-links .nav-next a:hover,
.post-navigation .nav-links .nav-previous a:hover {
font-weight: 700;
color: var(--color-800);
}
.post-navigation .nav-links .nav-next {
margin-inline-start: auto;
}
.comments-area {
margin-block-start: var(--block-spacing);
padding-inline: 1rem;
border-block-start: 0.0625rem solid var(--color-300);
padding-block: var(--block-spacing) 1rem;
}
.comment-list .children {
margin-inline-start: 0.3125rem;
padding-inline-start: 0.75rem;
}
.comment-list .comment {
position: relative;
}
.comment-list .comment.parent:after {
content: "";
position: absolute;
inset: 2.5rem auto auto 0.125rem;
width: 0.125rem;
height: calc(100% - 2.5rem);
border-inline-start: 0.0625rem dashed var(--color-300);
}
.bypostauthor {
display: block;
}
.comment-reply-link {
color: transparent;
position: relative;
height: 2rem;
width: 2rem;
display: flex;
border-radius: var(--radius-small);
}
.comment-reply-link:after {
position: absolute;
content: "";
font-family: "MonobaseIcon";
color: var(--color-600);
width: 100%;
height: 100%;
inset: 0 0 0 0;
display: flex;
align-items: center;
justify-content: center;
}
.comment-reply-link:hover {
background-color: var(--color-100);
}
.comment-reply-title,
.comments-title {
font-size: 1.125rem;
font-weight: 600;
text-wrap: balance;
}
.comment-reply-title {
font-size: 1.75rem;
margin-block-end: 0.5rem;
}
.comment-body {
display: grid;
gap: 0.5rem;
position: relative;
grid-template-areas: "comment-meta comment-reply" "comment-content comment-content";
grid-template-columns: 1fr auto;
margin-block: 0.5rem;
}
.comment-body .reply {
grid-area: comment-reply;
}
.comment-meta {
grid-area: comment-meta;
}
.comment-content {
min-height: 3.75rem;
margin-inline-start: 2.5rem;
margin-block: 0.75rem;
grid-area: comment-content;
}
.comment-author {
display: flex;
gap: 0.5rem;
align-items: flex-start;
}
.comment-author img {
width: 2rem;
border-radius: var(--radius-small);
}
.comment-metadata {
position: absolute;
inset: auto;
transform: translateY(-75%);
font-size: 0.625rem;
line-height: 1.2;
inset-inline-start: 2.5rem;
}
.comment-metadata a {
color: var(--color-300);
}
.comments-area .edit-link {
position: absolute;
writing-mode: horizontal-tb;
transform: rotate(180deg);
display: none;
}
.comment .comment-respond {
background-color: var(--color-50);
padding: 1rem;
border-radius: var(--radius-medium);
margin-inline-start: 2.5rem;
margin-block: 1rem;
}
.comment .comment-respond .comment-reply-title {
font-size: 1.125rem;
display: flex;
align-items: start;
justify-content: space-between;
margin-block-end: 0.5rem;
}
.comment .comment-respond .comment-reply-title #cancel-comment-reply-link {
color: var(--color-400);
font-size: 0.75rem;
font-weight: 400;
transition: all var(--transition);
}
.comment .comment-respond .comment-reply-title #cancel-comment-reply-link:hover {
color: var(--color-700);
}
.comment-form {
display: flex;
flex-direction: column;
gap: 1rem;
}
.comment-form input[type=text],
.comment-form input[type=email],
.comment-form input[type=url],
.comment-form textarea {
width: 100%;
}
.comment-form .required {
color: var(--color-950);
font-size: 0.875rem;
font-weight: 700;
}
.comment-form-comment label,
.comment-form-author label,
.comment-form-email label,
.comment-form-url label {
display: inline-block;
font-weight: 500;
position: relative;
padding-inline-end: 0.75rem;
margin-block-end: 0.5rem;
}
.comment-form-comment label .required,
.comment-form-author label .required,
.comment-form-email label .required,
.comment-form-url label .required {
position: absolute;
inset: 0 0 auto auto;
transform: translateY(-0.125rem);
}
.comment-form-cookies-consent {
font-size: 0.875rem;
}
.form-submit input[type=submit] {
background: var(--color-900);
color: var(--color-50);
border-color: var(--color-900);
}
.form-submit input[type=submit]:hover {
background: var(--color-800);
border-color: var(--color-800);
}
.comment-form-comment {
order: 2;
}
.form-submit {
order: 3;
}
.no-comments {
display: inline-block;
padding: 0.75rem 1.5rem;
margin-block: 1rem;
color: var(--color-800);
background: var(--color-100);
border: 1px solid var(--color-500);
border-radius: var(--radius-small);
font-size: 0.875rem;
line-height: 1.4;
}
.cards {
display: grid;
gap: 0.75rem;
}
@media screen and (min-width: 40rem) {
.cards {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.card {
position: relative;
padding: 1.25rem;
border: 1px solid var(--color-300);
border-radius: var(--radius);
transition: all var(--transition);
}
.card:hover .card-title {
font-weight: 700;
}
.card-icon {
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--radius-small);
background-color: var(--color-100);
width: 2rem;
height: 2rem;
margin-block-end: 1rem;
}
.card-title {
font-size: 1rem;
font-weight: 600;
line-height: 1.5rem;
word-wrap: break-word;
overflow-wrap: break-word;
word-break: break-all;
-webkit-hyphens: auto;
hyphens: auto;
}
.card-description {
font-size: 0.875rem;
line-height: 1.25rem;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
margin-top: 0.5rem;
}
.card-link {
position: absolute;
inset: 0 0 0 0;
width: 100%;
height: 100%;
}
.card-link .mb-icon {
position: absolute;
inset: 5px 5px auto auto;
transform: rotate(90deg);
color: var(--color-300);
transition: all var(--transition);
opacity: 0;
}
.card-link:hover {
box-shadow: var(--shadow);
}
.card-link:hover .mb-icon {
transform: rotate(45deg);
opacity: 1;
}
.actions-box {
position: static;
inset: 0 0 auto auto;
z-index: 1;
background-color: var(--scheme);
border-block-end: 1px solid var(--color-300);
height: var(--actions-box-hight);
width: 100%;
margin-block-end: var(--block-spacing);
}
@media screen and (min-width: 60rem) {
.actions-box {
position: fixed;
width: calc(100% - 20rem - 1px);
margin-block-end: 0;
}
}
@media screen and (min-width: 90rem) {
.actions-box {
width: calc(100% - 50rem - 1px);
}
}
.actions-meta {
display: flex;
align-items: center;
height: 100%;
}
.action-toggle,
.article-category,
.action-group {
height: 100%;
}
.action-toggle {
display: flex;
align-items: center;
border-inline-end: 1px solid var(--color-300);
padding-inline: 1rem;
}
.action-group {
padding-inline-end: 1rem;
padding-inline-start: calc(1rem + 1px);
margin-inline-start: -1px;
display: none;
align-items: center;
justify-content: end;
border-inline-start: 1px solid var(--color-300);
flex: 1;
gap: 0.5rem;
}
.action-group button:first-child {
margin-inline-end: auto;
}
@media screen and (min-width: 32rem) {
.action-group {
display: flex;
}
}
.article-category {
padding-inline: 1rem;
display: flex;
align-items: center;
gap: 0.375rem;
text-transform: uppercase;
font-size: 0.875rem;
font-weight: 700;
}
.article-category .mb-icon {
font-size: 0.375rem;
}
.article-category .category-link {
position: relative;
display: block;
color: var(--color-900);
}
.article-category .category-link:before {
content: "";
position: absolute;
inset: auto auto -2px 0;
width: 0;
height: 2px;
background-color: var(--color-800);
transition: width var(--transition);
}
.article-category .category-link:hover:before {
width: 100%;
} .screen-reader-text {
position: absolute !important;
overflow: hidden;
clip: rect(1px, 1px, 1px, 1px);
width: 1px;
height: 1px;
}
.screen-reader-text:hover,
.screen-reader-text:active,
.screen-reader-text:focus {
top: 5px;
left: 5px;
z-index: 100000; display: block;
clip: auto !important;
padding: 15px 23px 14px;
width: auto;
height: auto;
border-radius: 3px;
background-color: #f1f1f1;
box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
color: #21759b;
text-decoration: none;
font-weight: bold;
font-size: 0.875em;
line-height: normal;
}
.alignleft {
float: left;
margin-inline-end: var(--block-spacing);
}
.alignright {
float: right;
margin-inline-start: var(--block-spacing);
}
.aligncenter {
display: block;
clear: both;
margin-right: auto;
margin-left: auto;
text-align: center;
}
.clearfix:before,
.clearfix:after,
.comment-navigation:before,
.comment-navigation:after {
display: table;
content: "";
}
.clearfix:after,
.post-navigation .nav-links:after,
.comment-navigation:after {
clear: both;
}
.wp-caption {
margin-top: 2em;
margin-bottom: 2em;
}
.wp-caption-text {
color: var(--color-500);
font-size: 0.875em;
line-height: 1.4285714;
margin-top: 0.8571429em;
} .gallery {
margin-bottom: 1.5em;
display: grid;
grid-gap: 1.5em;
}
.gallery-item {
display: inline-block;
text-align: left;
width: 100%;
}
.gallery-columns-2 {
grid-template-columns: repeat(2, 1fr);
}
.gallery-columns-3 {
grid-template-columns: repeat(3, 1fr);
}
.gallery-columns-4 {
grid-template-columns: repeat(4, 1fr);
}
.gallery-columns-5 {
grid-template-columns: repeat(5, 1fr);
}
.gallery-columns-6 {
grid-template-columns: repeat(6, 1fr);
}
.gallery-columns-7 {
grid-template-columns: repeat(7, 1fr);
}
.gallery-columns-8 {
grid-template-columns: repeat(8, 1fr);
}
.gallery-columns-9 {
grid-template-columns: repeat(9, 1fr);
}
.gallery-caption {
display: block;
}
.is-color-50 {
color: var(--color-50);
}
.is-color-100 {
color: var(--color-100);
}
.is-color-200 {
color: var(--color-200);
}
.is-color-300 {
color: var(--color-300);
}
.is-color-400 {
color: var(--color-400);
}
.is-color-500 {
color: var(--color-500);
}
.is-color-600 {
color: var(--color-600);
}
.is-color-700 {
color: var(--color-700);
}
.is-color-800 {
color: var(--color-800);
}
.is-color-900 {
color: var(--color-900);
}
.is-color-950 {
color: var(--color-950);
}
.is-bg-50 {
background-color: var(--color-50);
}
.is-bg-100 {
background-color: var(--color-100);
}
.is-bg-200 {
background-color: var(--color-200);
}
.is-bg-300 {
background-color: var(--color-300);
}
.is-bg-400 {
background-color: var(--color-400);
}
.is-bg-500 {
background-color: var(--color-500);
}
.is-bg-600 {
background-color: var(--color-600);
}
.is-bg-700 {
background-color: var(--color-700);
}
.is-bg-800 {
background-color: var(--color-800);
}
.is-bg-900 {
background-color: var(--color-900);
}
.is-bg-950 {
background-color: var(--color-950);
}
@media screen and (min-width: 90rem) {
.page .site-box,
.search .site-box,
.error404 .site-box {
grid-template-columns: 20rem minmax(300px, 1fr);
}
.page .site-box .actions-box,
.search .site-box .actions-box,
.error404 .site-box .actions-box {
width: calc(100% - 20rem );
}
}
.page .action-group,
.search .action-group,
.error404 .action-group {
display: flex;
}
@media screen and (max-width: 60rem) {
.page .search-box,
.search .search-box,
.error404 .search-box {
display: none;
}
}
.archive .action-group {
display: flex;
}
@media screen and (max-width: 60rem) {
.archive .search-box {
display: none;
}
}
.single .action-group {
display: flex;
}
@media screen and (max-width: 60rem) {
.single #copy-url, .single .dropdown {
display: none;
}
}
.page-template-default .main-box,
.page-template .main-box {
border-inline-start: none;
}
.error404 .page-content,
.search .page-content,
.page-template-template-focus-page .page-content {
max-width: 50rem;
margin: 0 auto;
height: 100%;
}
.page-template-template-full-page .page-content {
max-width: 100%;
}
.section-box {
max-width: 50rem;
margin-inline: auto;
padding-inline: var(--site-padding-inline);
display: flex;
flex-direction: column;
gap: var(--block-spacing);
}
.section-box + .section-box {
margin-block-start: var(--block-spacing);
}
@media screen and (min-width: 60rem) {
.error404 .site-box,
.search .site-box {
grid-template-columns: 20rem 1fr;
}
}
.error404 .search-section,
.search .search-section {
margin-inline: 0;
}
.error404 .post-list,
.search .post-list {
padding-inline: 0;
}
.search .search-section {
padding-block-end: 3rem;
}
.error-404 .entry-header {
display: block;
}
.error-404 .entry-title {
padding-block-end: 0.75rem;
border-block-end: 1px dashed var(--color-400);
margin-block-end: 0.75rem;
}
.error-404 .entry-summary {
color: var(--color-700);
}
.error404-content-inner {
max-width: 640px;
margin: 4rem auto;
padding: 2rem;
font-family: "Courier New", Courier, monospace;
text-align: center;
}
@media screen and (min-width: 90rem) {
.page .search-box {
display: block;
}
}
.search .action-group {
border-inline-start: none;
}