:root {
	--shade-10: #fcfcfd;
	--shade-20: #eeeff2;
	--shade-30: #d7d9e0;
	--shade-40: #b7bac8;
	--shade-50: #949aad;
	--shade-60: #6f7690;
	--shade-70: #595e73;
	--shade-80: #353945;
	--shade-90: #1f2128;
	--shade-100: #121317;

	--blue-10: #fbfbfe;
	--blue-20: #e5e5fa;
	--blue-30: #c2ccf4;
	--blue-40: #93a6ec;
	--blue-50: #5f86e3;
	--blue-60: #2650d9;
	--blue-70: #1f34ad;
	--blue-80: #122868;
	--blue-90: #0b153d;
	--blue-100: #060623;

	--red-10: #fefbfc;
	--red-20: #fae5eb;
	--red-30: #f4c2d1;
	--red-40: #ec93ad;
	--red-50: #e35f86;
	--red-60: #d9265c;
	--red-70: #ad1f49;
	--red-80: #68122c;
	--red-90: #3d0b1a;
	--red-100: #23060f;

	---green-10: #fbfefd;
	---green-20: #e5faf3;
	---green-30: #c2f4e2;
	---green-40: #93eccb;
	---green-50: #5fe3b2;
	---green-60: #26d997;
	---green-70: #1fad79;
	---green-80: #126849;
	---green-90: #0b3d2a;
	---green-100: #062318;

	--yellow-10: #fefefb;
	--yellow-20: #faf6e5;
	--yellow-30: #f4eac2;
	--yellow-40: #ecda93;
	--yellow-50: #e3c85f;
	--yellow-60: #d9b526;
	--yellow-70: #ad911f;
	--yellow-80: #685712;
	--yellow-90: #3d330b;
	--yellow-100: #231d06;
}

:root {
  --theme: var(--shade-60);
  /* --theme-rgb: 138, 183, 255; */
  --whitish: var(--shade-20);
  /* --whitish-rgb: 221, 235, 255; */
  --whitish-basis: var(--shade-10);
  /* --whitish-basis-rgb: 242, 247, 255; */
  --blackish: var(--shade-90);
  /* --blackish-rgb: 0, 20, 51; */
  --blackish-basis: var(--shade-100);
  /* --blackish-basis-rgb: 0, 8, 20; */
  --informative: var(--blue-60);
  --color: var(--blackish-basis);
  --pale: var(--blackish);
  --medium: var(--shade-60);
  --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: 0.5rem;
  --font-size-2: 0.75rem;
  --font-size-3: 1rem;
  --font-size-4: 1.5rem;
  --font-size-5: 2rem;
  --font-size-6: 2.5rem;
  --font-size-7: 3rem;
  --font-size-8: 3.5rem;
  --font-size-9: 4rem;
  --font-size-impact: var(--font-size-7);
  --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);
    --medium: var(--shade-50);
    --bg: var(--blackish);
    --basis: var(--blackish-basis);
    --informative: var(--blue-50);
  }
}

* {
  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;
}