@font-face {
  font-family: Luckiest;
  src: url('./luckiest.woff2') format('woff2');
  font-display: swap;
}
:root { color-scheme: dark; font-family: system-ui, sans-serif; color: #f6f4ee; background: #101322; }
* { box-sizing: border-box; }
body { margin: 0; line-height: 1.7; }
.wrap { width: min(100% - 40px, 760px); margin: 0 auto; padding: 28px 0 56px; }
header { padding-bottom: 28px; border-bottom: 4px dashed #586178; }
.brand { display: inline-flex; min-height: 44px; align-items: center; color: #a8ed54; font: 28px/1 Luckiest, sans-serif; text-decoration: none; }
h1 { font: 42px/1.15 Luckiest, sans-serif; margin: 22px 0 12px; }
h2 { font-size: 21px; line-height: 1.4; margin: 32px 0 10px; }
p, ul { margin: 12px 0; }
ul { padding-left: 24px; }
a { color: #a8ed54; text-underline-offset: 4px; overflow-wrap: anywhere; }
a:hover { color: #d1ff96; }
a:focus-visible { outline: 3px solid #ffc56b; outline-offset: 5px; border-radius: 2px; }
.date, footer { color: #b5bdd2; font-size: 14px; }
.intro { font-size: 19px; }
nav { display: flex; flex-wrap: wrap; gap: 0 24px; margin-top: 28px; }
nav a { display: inline-flex; align-items: center; min-height: 44px; }
footer { border-top: 1px solid #586178; margin-top: 32px; padding-top: 16px; }
.contact { font-weight: 650; }
@media (max-width: 400px) { h1 { font-size: 35px; } .wrap { width: calc(100% - 32px); } }