website/static/style/global.css

@import "tailwindcss";
@plugin "@tailwindcss/typography";

:root {
  font-family: "Zen Maru Gothic", sans-serif;
}

@supports (font-variation-settings: normal) {
  :root {
    font-family: "Zen Maru Gothic", sans-serif;
  }
}

@supports (font-variation-settings: bold) {
  :root {
    font-family: "Zen Maru Gothic", sans-serif;
  }
}

@view-transition {
  navigation: auto;
}

@keyframes zoom-fade-out {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(1.05);
  }
}

@keyframes zoom-fade-in {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

::view-transition-old(zoom-fade) {
  animation: 400ms ease both zoom-fade-out;
}

::view-transition-new(zoom-fade) {
  animation: 500ms ease 100ms both zoom-fade-in;
}

.zoom-fade {
  view-transition-name: zoom-fade;
}