/* Light mode: black logo on white. Dark mode: white logo on black.
   The SVG is used as a mask and filled with the current text colour, so it
   recolours automatically whatever colour the SVG file itself uses. */
:root {
  --bg: #fff;
  --fg: #000;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #000;
    --fg: #fff;
  }
}

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--fg);
}

main {
  display: grid;
  place-items: center;
  min-height: 100vh;
  min-height: 100dvh;
}

.logo {
  /* Fits inside this box, keeping the logo's own proportions. */
  width: min(70vw, 560px);
  height: min(50vh, 560px);
  background-color: currentColor;
  -webkit-mask: url("kakigori_logo.svg") center / contain no-repeat;
          mask: url("kakigori_logo.svg") center / contain no-repeat;
}