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

html,
body {
  width: 100%;
  height: 100%;
}

body {
  background-color: var(--color-surface-default);
  color: var(--color-on-surface-primary);
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  transition: background-color 800ms ease-in-out, color 800ms ease-in-out;
}

main.splash {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 100dvh;
  background-color: var(--color-surface-default);
  transition: background-color 800ms ease-in-out;
}

figure.mark-lockup {
  display: flex;
  align-items: center;
  justify-content: center;
}

figure.mark-lockup svg {
  width: clamp(270px, 56vmin, 720px);
  height: auto;
  color: var(--color-mark);
  transition: color 800ms ease-in-out;
  display: block;
}

@media (max-width: 375px) {
  figure.mark-lockup svg {
    width: clamp(270px, 56vmin, 450px);
  }
}

@media (min-width: 768px) {
  figure.mark-lockup svg {
    width: clamp(360px, 56vmin, 720px);
  }
}

@media (min-width: 1280px) {
  figure.mark-lockup svg {
    width: clamp(450px, 56vmin, 720px);
  }
}

@media (min-width: 1920px) {
  figure.mark-lockup svg {
    width: clamp(540px, 56vmin, 720px);
  }
}

@media (prefers-reduced-motion: reduce) {
  body,
  main.splash,
  figure.mark-lockup svg {
    transition: none;
  }
}