:root {
  color-scheme: dark;
  font-family: Tahoma, Verdana, sans-serif;
  font-size: 16px;
  line-height: 1.7;
  background: #000;
  color: #eee;
}

* { box-sizing: border-box; }

body {
  max-width: 76rem;
  margin: 0 auto;
  padding: clamp(2rem, 10vh, 7rem) clamp(1.25rem, 8vw, 7rem) 2rem;
}

a { color: inherit; text-underline-offset: .25em; }
a:hover { color: #bbb; }
a:focus-visible { outline: 2px solid #fff; outline-offset: 5px; }

.site-header { margin-bottom: clamp(3rem, 10vh, 7rem); }
.identity { display: inline-flex; align-items: center; gap: .75rem; white-space: nowrap; text-decoration: none; }
.flag {
  display: inline-block;
  flex: 0 0 1.4rem;
  height: 1rem;
  background:
    linear-gradient(90deg, transparent 28%, #fff 28%, #fff 34%, transparent 34%),
    linear-gradient(transparent 46%, #fff 46%, #fff 58%, transparent 58%),
    #c60c30;
}

main { animation: arrive .6s ease-out both; }
.home main { min-height: 25vh; }
h1, h2, h3, h4 { line-height: 1.3; font-weight: 400; }
h1 { font-size: clamp(1.65rem, 4vw, 2.6rem); margin: 0 0 1rem; }
.latest { max-width: 28ch; }
.latest a { text-decoration-thickness: 1px; }
article { max-width: 72ch; overflow-wrap: anywhere; }
article header { margin-bottom: 3rem; }
article h2 { margin-top: 2.5rem; }
time, .muted { color: #aaa; }
time { font-size: .85rem; }
pre {
  max-width: 100%;
  overflow-x: auto;
  padding: 1rem;
  background: #151515 !important;
  line-height: 1.55;
  overflow-wrap: normal;
}
code { font-family: Consolas, "Liberation Mono", monospace; font-size: .9em; }
:not(pre) > code { background: #151515; padding: .1em .25em; }
blockquote { margin-left: 0; padding-left: 1rem; border-left: 2px solid #555; }
img { max-width: 100%; height: auto; }
table { display: block; overflow-x: auto; border-collapse: collapse; }
th, td { border-bottom: 1px solid #444; padding: .5rem; text-align: left; }
.posts { list-style: none; padding: 0; }
.posts li { margin-bottom: 1.5rem; }
.posts time { display: block; }
footer { margin-top: 5rem; font-size: .8rem; color: #aaa; }
footer nav { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.skip-link { position: absolute; top: .5rem; left: 1rem; transform: translateY(-200%); }
.skip-link:focus { transform: none; }

@keyframes arrive {
  from { opacity: 0; transform: translateY(.4rem); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  main { animation: none; }
}