:root {
  color-scheme: dark;
  --day-color: rgb(1, 0, 0);
  color: #feffff;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  min-width: 280px;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  place-items: center;
  background-color: var(--day-color);
}
.page {
  width: min(900px, calc(100% - 32px));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  padding-block: 24px;
}
.brand { display: block; width: 100%; }
.ratu-wordmark { display: block; width: min(560px, 100%); height: auto; aspect-ratio: 9 / 5; }
.wordmark { display: block; width: 100%; height: auto; aspect-ratio: 6 / 1; }
.brand:hover .wordmark, .brand:focus .wordmark { filter: invert(1); }
a:focus-visible { outline: 2px solid #feffff; outline-offset: 4px; }
@media (min-width: 1000px) { .page { width: min(900px, 66%); } }
@media (max-width: 360px) { .page { width: calc(100% - 24px); } }