body {
	height: 100vh;
	padding: 1rem;
	display: grid;
	grid-template-rows: auto 1fr auto;

	background-color: var(--color-background);

	color: var(--color-text);

	text-box-trim: trim-both;
	font-family: "pf-videotext", sans-serif;
	font-weight: 400;
	font-style: normal;

	filter:
		contrast(1.1)
		brightness(1.05)
		saturate(1.2)
		blur(0.25px);

	animation: crt-flicker 0.12s infinite;

text-shadow:
    0 0 2px rgba(0, 255, 0, 0.35),
    0 0 4px rgba(0, 255, 0, 0.15);

	transform: perspective(800px) scale(.99);
}

body::before {
	pointer-events: none;
	position: absolute;
	inset: 0;
	z-index: 9999;
	background:
	/* Scanlines */
	repeating-linear-gradient(
		to bottom,
		rgba(0, 0, 0, 0.25),
		rgba(0, 0, 0, 0.25) 1px,
		rgba(0, 0, 0, 0) 2px,
		rgba(0, 0, 0, 0) 4px
		),
		/* Phosphor mask */
		repeating-linear-gradient(
			to right,
			rgba(255, 0, 0, 0.10),
			rgba(255, 0, 0, 0.10) 1px,
			rgba(0, 255, 0, 0.09) 2px,
			rgba(0, 0, 255, 0.10) 3px
			);
	/* mix-blend-mode: overlay; */

	content: '';
}

body::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at center,
    rgba(0,0,0,0) 70%,
    rgba(0,0,0,.7) 100%
  );
  pointer-events: none;
}


@keyframes crt-flicker {
  0%   { opacity: 0.85; }
  50%  { opacity: 1; }
  100% { opacity: 0.9; }
}