:root {
	--bg: #111;
	--surface: #1a1a1a;
	--surface2: #222;
	--border: #2e2e2e;
	--orange: #ff6a00;
	--orange2: #ff9900;
	--orange-dim: #7a3200;
	--orange-glow: rgba(255, 106, 0, 0.15);
	--text: #f5e6d0;
	--text-dim: #8a7a6a;
	--text-muted: #3a3028;
	--diamond: #4dd9e8;
	--dg: rgba(77, 217, 232, 0.2);
	--danger: #e74c3c;
	--success: #2ecc71;
	--r: 8px;
}

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

body {
	background: var(--bg);
	color: var(--text);
	min-height: 100vh;
	overflow-x: hidden;
	font-family: "Passero One", sans-serif;
	text-align: center;
	padding: 30px;
	font-size: larger;
}

@import url(https://fonts.googleapis.com/css2?family=Jaro:opsz@6..72&family=Passero+One&display=swap);

body::before {
	content: "";
	position: fixed;
	inset: 0;
	background-image: linear-gradient(rgba(255, 106, 0, 0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 106, 0, 0.04) 1px, transparent 1px);
	background-size: 32px 32px;
	pointer-events: none;
	z-index: -1;
	animation: gridDriftX 60s ease-in-out infinite alternate, gridDriftY 43s ease-in-out infinite alternate;
}

@keyframes gridDriftX {
	0% {
		background-position-x: 0px;
	}

	100% {
		background-position-x: 1024px;
	}
}

@keyframes gridDriftY {
	0% {
		background-position-y: 0px;
	}

	100% {
		background-position-y: 1024px;
	}
}

body h1 {
    font-size: 3.5em;
    margin-bottom: 20px;
    color: var(--orange);
    text-shadow: 0 0 10px var(--orange-glow), 0 0 20px var(--orange-glow), 0 0 30px var(--orange-glow);
    padding: 30px;
}