@font-face {
  font-family: "Adwaita Sans";
  src: url("AdwaitaSans-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

:root {
  color-scheme: dark;
  font-family: "Adwaita Sans", system-ui, sans-serif;
  line-height: 1.55;
  color: #eee;
  background: #181a17;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { max-width: 960px; margin: auto; padding: 0 24px; }
a { color: #a9d86e; }

header, footer {
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 22px 0;
}

header { justify-content: flex-end; border-bottom: 1px solid #3c4039; }
nav { display: flex; flex-wrap: wrap; gap: 18px; }
main { padding: 42px 0; }
section { margin: 64px 0; }
.header-image { width: 100%; border-radius: 8px; }

h1 { margin-bottom: 12px; font-size: clamp(2.3rem, 7vw, 4.5rem); line-height: 1.05; }
h2 { margin: 36px 0 16px; font-size: 1.8rem; }
h3 { margin: 30px 0 4px; font-size: 1.1rem; }
p { max-width: 720px; margin-top: 0; color: #c7c9c3; }

.links { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.links a { padding: 10px 16px; border: 1px solid #777d72; border-radius: 6px; color: #fff; text-decoration: none; }
.screenshots { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.screenshots img { display: block; width: 100%; border-radius: 5px; }
iframe { display: block; width: 100%; max-width: 646px; border: 0; background: #181a17; }

.posts article { margin: 36px 0; }
.posts h2 { margin: 4px 0; }
.posts time, .post > time { color: #969b91; }
.post { font-size: 1.05rem; }
.post img { max-width: 100%; }

footer { border-top: 1px solid #3c4039; color: #969b91; font-size: .9rem; }
footer span { margin-right: auto; }

@media (max-width: 560px) {
  body { padding: 0 14px; }
  main { padding-top: 24px; }
  section { margin: 48px 0; }
  .screenshots { grid-template-columns: 1fr; }
}