:root {
  color-scheme: dark;
  background: #222222;
  color: #f3f1ec;
  font-family: Arial, Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
}

*, *::before, *::after { box-sizing: border-box; }

html { min-width: 240px; min-height: 100%; }

body {
  position: relative;
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
}

main {
  display: grid;
  place-items: center;
  min-height: 100vh;
  min-height: 100svh;
  padding: 4rem 1.5rem;
}

.brand {
  width: min(68vw, 60rem);
  max-width: 100%;
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
  line-height: 0;
  transform: translateY(-4vh);
  transform: translateY(-4svh);
}

.brand picture, .brand-image { display: block; width: 100%; }
.brand-image { height: auto; }

footer {
  position: absolute;
  left: max(1.75rem, env(safe-area-inset-left));
  right: max(1.75rem, env(safe-area-inset-right));
  bottom: max(1.5rem, env(safe-area-inset-bottom));
  color: #adada9;
  line-height: 1.5;
}

footer small { font-size: 0.75rem; }

@media (max-width: 640px) {
  .brand { width: min(78vw, 27.5rem); }
  footer { left: max(1.5rem, env(safe-area-inset-left)); }
}

@media (max-height: 440px) and (orientation: landscape) {
  .brand { width: min(52vw, 42rem); transform: none; }
}