g.css

:root {
  --theme: #8ab7ff;
  --theme-rgb: 138, 183, 255;
  --whitish: #ddebff;
  --whitish-rgb: 221, 235, 255;
  --whitish-basis: #f2f7ff;
  --whitish-basis-rgb: 242, 247, 255;
  --blackish: #001433;
  --blackish-rgb: 0, 20, 51;
  --blackish-basis: #000814;
  --blackish-basis-rgb: 0, 8, 20;
  --color: var(--blackish-basis);
  --pale: var(--blackish);
  --bg: var(--whitish);
  --basis: var(--whitish-basis);
  --fonts: "YakuHanJP", "Inter", "Inter var", "Noto Sans JP", sans-serif;
  --fonts-mono: "Roboto Mono", "Noto Sans JP", monospace;
  --fonts-serif: "YakuHanMP", "Playfair Display", "Noto Serif JP", serif;
  --font-size-1: 8px;
  --font-size-2: 12px;
  --font-size-3: 16px;
  --font-size-4: 24px;
  --font-size-5: 32px;
  --font-size-6: 40px;
  --font-size-7: 48px;
  --font-size-8: 56px;
  --font-size-9: 64px;
  --font-size-impact: var(--font-size-9);
  --font-size-title: var(--font-size-5);
  --font-size-text: var(--font-size-3);
  --content-width: 640px;
  --page-margin: 32px;
}

@media screen and (max-width: 800px) {
  :root {
    --font-size-impact: var(--font-size-7);
    --page-margin: 16px;
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    --color: var(--whitish-basis);
    --pale: var(--whitish);
    --bg: var(--blackish);
    --basis: var(--blackish-basis);
  }
}

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

html {
  word-break: break-word;
  text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

body {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img {
  vertical-align: bottom;
}