@font-face { font-family: "Inter"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../fonts/inter.woff2") format("woff2"); }

:root { --bar-h: 48px; }
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { display: flex; flex-direction: column; height: 100vh; height: 100dvh; background: #151E11; font: 500 14px/1.2 "Inter", system-ui, sans-serif; color: #FFFFFF; -webkit-font-smoothing: antialiased; }
p { margin: 0; }

/* Version bar */
.vbar { flex: none; display: flex; align-items: center; gap: 16px; height: var(--bar-h); padding: 0 16px; background: #151E11; border-bottom: 1px solid rgba(255, 255, 255, .12); }
.vbar__label { color: rgba(255, 255, 255, .6); white-space: nowrap; }
.vbar__set { display: flex; gap: 6px; }
.vbar__set a { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .25); color: #FFFFFF; font-weight: 600; text-decoration: none; transition: background-color .15s ease, border-color .15s ease; }
.vbar__set a:hover { border-color: #71BF45; }
.vbar__set a[aria-current="true"] { background: #71BF45; border-color: #71BF45; color: #151E11; }
.vbar__set a:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 2px; }
.vbar__desc { color: rgba(255, 255, 255, .75); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* The chosen homepage fills the rest of the screen */
.vframe { flex: 1; display: block; width: 100%; border: 0; background: #FFFFFF; }

@media (max-width: 600px) {
  .vbar { justify-content: space-between; gap: 10px; padding: 0 12px; }
  .vbar__desc { display: none; }
  .vbar__set a { width: 32px; height: 32px; }
}
@media (max-width: 359px) {
  .vbar__label { display: none; }
  .vbar { justify-content: center; }
}

/* Not-found page (404.html), served for any unknown address */
.nf { align-items: center; justify-content: center; padding: 24px 16px; text-align: center; }
.nf__code { font-size: 13px; letter-spacing: .14em; color: #71BF45; }
.nf__title { margin: 10px 0 8px; font-size: 28px; font-weight: 600; }
.nf__text { color: rgba(255, 255, 255, .75); font-weight: 400; }
.nf__link { display: inline-block; margin-top: 22px; padding: 10px 16px; border-radius: 999px; background: #71BF45; color: #151E11; font-weight: 600; text-decoration: none; }
.nf__link:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 2px; }